datagrid拖动列头更换排列顺序
Posted 嫣然一笑
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了datagrid拖动列头更换排列顺序相关的知识，希望对你有一定的参考价值。
在做这个功能的时候在网上找了大量资料,发现都不适用,要不然就是代码太冗余,所以另起炉灶,自己封装了这个函数
下面是完整的代码:
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数据加载完成后调用,否则拖动时只有列头改变.
缺点:
这个函数虽然解决了列表拖动的问题,同时也产生了新的问题--------单击排序
当鼠标放到列头时会变成可拖动的标识,这时排序就没用了吗?当然不是,虽然单击时有影响,但是我发现双击还是有用的哦!
如果你对这个缺点不能容忍的话,欢迎提出新的解决方案.
请尊重别人的劳动成果,转载务必标明出处!
以上是关于datagrid拖动列头更换排列顺序的主要内容，如果未能解决你的问题，请参考以下文章
WPF的DataGrid列头和行头相交的单元格怎么修改样式和填充文字
WPF的DataGrid列头和行头相交的单元格怎么修改样式和填充文字