可拖拉的Table jquery 实现

参考文档：

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>

以上三步就够了。现在可以试试效果了