参考文档:
http://www.open-open.com/lib/view/open1370175623352.html
点击在线演示,然后另存为页面,这时候只需要引4个js即可。
该方式只需要引4个js:
<script src="jQuery%20Resizable%20Columns_files/analytics.js" async=""></script> <script src="jQuery%20Resizable%20Columns_files/jquery_002.js"></script> <script src="jQuery%20Resizable%20Columns_files/store.js"></script> <script src="jQuery%20Resizable%20Columns_files/jquery.js"></script>然后再加2个样式:
<link rel="stylesheet" href="jQuery%20Resizable%20Columns_files/bootstrap.css">
<link rel="stylesheet" href="jQuery%20Resizable%20Columns_files/jquery.css">
如果你不想改变本来已经定义好的样式,那么你在样式文件里加下面一句话即可:
td,th{
border-left: 1px solid #dddddd;
}
这时候在你需要刷新的页面,添加
<script>
$(function(){
debugger;
$("table").resizableColumns({
store: store
});
});
就大功告成了。
但是这个地方因为另存为的原因,所以js文件名都改变了。jquery_002.js是引的jquery文件。如果你已经引了juqery注意将这个js去掉,不然就resize不了咯。上面jquery.js实际上是<scriptsrc="dist/jquery.resizableColumns.min.js"></script>.这个另存为还真是坑我不少啊。
但是上面的只兼容火狐和谷歌 。IE不兼容。所以楼主不辛苦的继续找,功夫不负有心人。居然找到了 jquery plugin里的colresizable.果然一如既往的好用。分享给大家链接地址:http://quocity.com/colresizable/#download
使用非常简单,并且兼容Table设置的各种情况。比如,如果你的表头加了自定义的<colgroup><col /><col/><col /><col class="150"></colgroup>这种情况,第一种方法是拖拉不了的。但是jquery 插件能兼容。
附上最简单的使用方法:
1、加入CSS
如果你项目里已经定义了css,不想破坏样式。那么只需要从demo里的main.css里拷出:
.grip{
width:20px;
height:30px;
margin-top:-3px;
margin-left:-5px;
position:relative;
z-index:88;
cursor:e-resize;
}
.grip:hover{
background-position-x:-20px;
}
.dragging .grip{
background-position-x:-40px;
}
当然要是你的表格是无boder的,我建议最好加上左表栏是有border的,以方便用户即使不在表头也能进行拖拉。需要加的样式如下 :
td,th{
border-left: 1px solid #dddddd;
}
2‘、第二步导入jquery.js及colResizable-1.3.min.js
3、第三步,在你需要使用拖拉表格的页面加入:
<script>
$(function(){
$("table").colResizable({
liveDrag:true,
gripInnerHtml:"<div class='grip'></div>",
draggingClass:"dragging"});
});
</script>
以上三步就够了。现在可以试试效果了