在做这个功能的时候在网上找了大量资料,发现都不适用,要不然就是代码太冗余,所以另起炉灶,自己封装了这个函数
下面是完整的代码:
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 <link rel="stylesheet" href="easyui/themes/default/easyui.css"/>
7 <link rel="stylesheet" href="easyui/themes/icon.css"/>
8 <script src="easyui/jquery.min.js"></script>
9 <script src="easyui/jquery.easyui.min.js"></script>
10 <script src="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 onLoadSuccess: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 onLoadSuccess: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数据加载完成后调用,否则拖动时只有列头改变.
缺点:
这个函数虽然解决了列表拖动的问题,同时也产生了新的问题--------单击排序
当鼠标放到列头时会变成可拖动的标识,这时排序就没用了吗?当然不是,虽然单击时有影响,但是我发现双击还是有用的哦!
如果你对这个缺点不能容忍的话,欢迎提出新的解决方案.
请尊重别人的劳动成果,转载务必标明出处!
时间： 2024-08-09 10:42:48