首页 > 代码库 > datagrid拖动列头更换排列顺序

datagrid拖动列头更换排列顺序

2024-09-06 08:14:01   218人阅读

在做这个功能的时候在网上找了大量资料,发现都不适用,要不然就是代码太冗余,所以另起炉灶,自己封装了这个函数

下面是完整的代码:

  1 <!DOCTYPE html>
  2 <html>
  3 <head lang="en">
  4     <meta charset="UTF-8">
  5     <title></title>
  6     <link rel="stylesheet" href="http://www.mamicode.com/easyui/themes/default/easyui.css"/>
  7     <link rel="stylesheet" href="http://www.mamicode.com/easyui/themes/icon.css"/>
  8     <script src="http://www.mamicode.com/easyui/jquery.min.js"></script>
  9     <script src="http://www.mamicode.com/easyui/jquery.easyui.min.js"></script>
 10     <script src="http://www.mamicode.com/easyui/locale/easyui-lang-zh_CN.js"></script>
 11 </head>
 12 <body>
 13 <div id="tab1">
 14     <table id="removeCell1">
 15     <thead>
 16     <tr>
 17         <th data-options="field:‘X‘,width:50,align:‘center‘,sortable:true">X</th>
 18         <th data-options="field:‘Y‘,width:50,align:‘center‘,sortable:true">Y</th>
 19         <th data-options="field:‘Z‘,width:50,align:‘center‘,sortable:true">Z</th>
 20         <th data-options="field:‘IMSI‘,width:50,align:‘center‘,sortable:true">A</th>
 21         <th data-options="field:‘Status‘,width:50,align:‘center‘,sortable:true">B</th>
 22         <th data-options="field:‘Online‘,width:50,align:‘center‘,sortable:true">C</th>
 23     </tr>
 24     </thead>
 25 </table>
 26 </div>
 27 <div id="tab2">
 28     <table id="removeCell2">
 29     <thead>
 30     <tr>
 31         <th data-options="field:‘X‘,width:50,align:‘center‘,sortable:true">X</th>
 32         <th data-options="field:‘Y‘,width:50,align:‘center‘,sortable:true">Y</th>
 33         <th data-options="field:‘Z‘,width:50,align:‘center‘,sortable:true">Z</th>
 34         <th data-options="field:‘IMSI‘,width:50,align:‘center‘,sortable:true">A</th>
 35         <th data-options="field:‘Status‘,width:50,align:‘center‘,sortable:true">B</th>
 36         <th data-options="field:‘Online‘,width:50,align:‘center‘,sortable:true">C</th>
 37     </thead>
 38 </table>
 39 </div>
 40 <script>
 41     $("#removeCell1").datagrid({
 42         rownumbers:true,
 43         width:380,
 44         height:300,
 45         singleSelect:true,
 46         multiSort:true,
 47         remoteSort:true,
 48         url:"query.json",
 49         onl oadSuccess:function() {
 50             remove("tab1");
 51         }
 52     })
 53     $("#removeCell2").datagrid({
 54         rownumbers:true,
 55         width:380,
 56         height:300,
 57         singleSelect:true,
 58         multiSort:true,
 59         remoteSort:true,
 60         url:"query.json",
 61         onl oadSuccess:function() {
 62             remove("tab2");
 63         }
 64     })
 65 
 66     function remove(limit) {
 67         var dom=‘.datagrid-header-inner .datagrid-cell‘;
 68         var tbodyTr = $(".datagrid-view2 .datagrid-body .datagrid-btable tbody tr");
 69         if(limit){
 70             dom=‘#‘+limit+‘ .datagrid-header-inner .datagrid-cell‘;
 71             tbodyTr = $("#"+limit+" .datagrid-view2 .datagrid-body .datagrid-btable tbody tr");
 72         }
 73         $(dom).draggable({
 74             revert: true,
 75             proxy: ‘clone‘
 76         }).droppable({
 77             accept: dom,
 78             onDrop: function (e, source) {
 79                 var destination=$(e.currentTarget).parent().index();
 80                 var start=$(source).parent().index();
 81                 if(destination<start){
 82                     $(source).parent().insertBefore($(e.currentTarget).parent());
 83                 }else{
 84                     $(source).parent().insertAfter($(e.currentTarget).parent());
 85                 }
 86                 for(var i=0;i<tbodyTr.length;i++){
 87                     var cell1=$(tbodyTr[i]).find("td")[destination];
 88                     var cell2=$(tbodyTr[i]).find("td")[start];
 89                     if(destination<start){
 90                         $(cell2).insertBefore($(cell1));
 91                     }else{
 92                         $(cell2).insertAfter($(cell1));
 93                     }
 94                 }
 95             }
 96         });
 97     }
 98 </script>
 99 </body>
100 </html>

 

我定义了两个table,table外部必须包裹有唯一id的div,这是要保证两个table之间的操作互不影响.

主要实现功能的就是remove()这个函数,里面传入的参数是table外面div的ID,这样可以区分两个table的操作。

如果你的页面只有一个table的话不传参数也是可以的,也可以把limit参数相关的代码删除.

remove()函数需要在datagrid数据加载完成后调用,否则拖动时只有列头改变.

缺点:

这个函数虽然解决了列表拖动的问题,同时也产生了新的问题--------单击排序

当鼠标放到列头时会变成可拖动的标识,这时排序就没用了吗?当然不是,虽然单击时有影响,但是我发现双击还是有用的哦!

如果你对这个缺点不能容忍的话,欢迎提出新的解决方案.

请尊重别人的劳动成果,转载务必标明出处!

 

datagrid拖动列头更换排列顺序


联系
我们