300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > html表格宽度拖拽 Js拖拽实现改变Table的列宽解决方案

html表格宽度拖拽 Js拖拽实现改变Table的列宽解决方案

时间:2024-07-21 21:17:00

相关推荐

html表格宽度拖拽 Js拖拽实现改变Table的列宽解决方案

Js拖拽实现改变Table的列宽

如题,楼主是Js小白,最近遇到问题,需要用Js实现GridView的列拖拽改变大小,在网上找到一段代码如下:

functionMouseDownToResize(obj){

setTableLayoutToFixed();

obj.mouseDownX=event.clientX;//当事件被触发时鼠标指针相对于浏览器页面(或客户区)的水平坐标

obj.pareneTdW=obj.parentNode.offsetWidth;//获取Td的宽度

obj.pareneTableW=document.getElementById("Grid_DTable1").offsetWidth;//获取整个表格的宽度

obj.setCapture();//设置属于当前文档的对象的鼠标捕捉

}

functionMouseMoveToResize(obj){

if(!obj.mouseDownX)returnfalse;//

varnewWidth=obj.pareneTdW*1+event.clientX*1-obj.mouseDownX;//鼠标移动时把宽度设置为之前的宽度加上水平位移再减去之前相对于浏览器的坐标

if(newWidth>10){

vartheObjTable=document.getElementById("Grid_DTable1");

obj.parentElement.style.width=newWidth;

theObjTable.style.width=obj.pareneTdW*1+event.clientX*1-obj.mouseDownX;

}

}

functionMouseUpToResize(obj){

obj.releaseCapture();//释放当前文档中对象的鼠标捕捉

obj.mouseDownX=0;

}

functionsetTableLayoutToFixed(){

vartheObjTable=document.getElementById("Grid_DTable1");

if(theObjTable.style.tableLayout=='fixed')return;

varheaderTr=theObjTable.rows[0];

for(vari=0;i

headerTr.cells[i].styleOffsetWidth=headerTr.cells[i].offsetWidth;

}

for(vari=0;i

headerTr.cells[i].style.width=headerTr.cells[i].styleOffsetWidth;

}

theObjTable.style.tableLayout='fixed';

}

代码中注释是我查资料之后加的,但是这代码里面还是不太懂,有没有大神能介绍下这段代码的思路?或者说关键点也行,还有问题就是,我自己创建新的GridView拖拽正常,但是在我的项目中使用这段代码,这样的标题就没有跟着一起变化,这是怎么回事?还有就是拖拽完之后之前居中的样式也不见了,请问怎么修改?

------解决方案--------------------

你这个只能用于ie!

推荐一个/detail/zhangd83/654639

代码也比较容易看懂

------解决方案--------------------

你ShowHeader="false"配置为false还能显示标题?

IE下也不好使啊。。

试试这个:仿MicrosoftExcel修改单元格宽度

------解决方案--------------------

沉了么,我顶~

------解决方案--------------------

不是jquery啊,纯js的。。查看源代码,将script里面Table类库存为一个js就行了,需要修改table的页面导入这个js,然后new下这个Table的实例就可以拖动了

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。