重新=》easyui DataGrid是否可以动态的改变列显示的顺序

Posted 2020-08-09 芜明-追星

1. $.extend($.fn.datagrid.methods,{  
2.     columnMoving: function(jq){  
3.         return jq.each(function(){  
4.             var target = this;  
5.             var cells = $(this).datagrid(‘getPanel‘).find(‘div.datagrid-header td[field]‘);  
6.             cells.draggable({  
7.                 revert:true,  
8.                 cursor:‘pointer‘,  
9.                 edge:5,  
10.                 proxy:function(source){  
11.                     var p = $(‘<div class="tree-node-proxy tree-dnd-no" style="position:absolute;border:1px solid #ff0000"/>‘).appendTo(‘body‘);  
12.                     p.html($(source).text());  
13.                     p.hide();  
14.                     return p;  
15.                 },  
16.                 onBeforeDrag:function(e){  
17.                     e.data.startLeft = $(this).offset().left;  
18.                     e.data.startTop = $(this).offset().top;  
19.                 },  
20.                 onStartDrag: function(){  
21.                     $(this).draggable(‘proxy‘).css({  
22.                         left:-10000,  
23.                         top:-10000  
24.                     });  
25.                 },  
26.                 onDrag:function(e){  
27.                     $(this).draggable(‘proxy‘).show().css({  
28.                         left:e.pageX+15,  
29.                         top:e.pageY+15  
30.                     });  
31.                     return false;  
32.                 }  
33.             }).droppable({  
34.                 accept:‘td[field]‘,  
35.                 onDragOver:function(e,source){  
36.                     $(source).draggable(‘proxy‘).removeClass(‘tree-dnd-no‘).addClass(‘tree-dnd-yes‘);  
37.                     $(this).css(‘border-left‘,‘1px solid #ff0000‘);  
38.                 },  
39.                 onDragLeave:function(e,source){  
40.                     $(source).draggable(‘proxy‘).removeClass(‘tree-dnd-yes‘).addClass(‘tree-dnd-no‘);  
41.                     $(this).css(‘border-left‘,0);  
42.                 },  
43.                 onDrop:function(e,source){  
44.                     $(this).css(‘border-left‘,0);  
45.                     var fromField = $(source).attr(‘field‘);  
46.                     var toField = $(this).attr(‘field‘);  
47.                     setTimeout(function(){  
48.                         swapField(fromField,toField);  
49.                         $(target).datagrid();  
50.                         $(target).datagrid(‘columnMoving‘);  
51.                     },0);  
52.                 }  
53.             });  
54.               
55.             // swap Field to another location  
56.             function swapField(from,to){  
57.                 var columns = $(target).datagrid(‘options‘).columns;  
58.                 var cc = columns[0];  
59.                 _swap(from,to);  
60.                 function _swap(fromfiled,tofiled){  
61.                     var fromtemp;  
62.                     var totemp;  
63.                     var fromindex = 0;  
64.                     var toindex = 0;  
65.                     for(var i=0; i<cc.length; i++){  
66.                         if (cc[i].field == fromfiled){  
67.                             fromindex = i;  
68.                             fromtemp = cc[i];  
69.                         }  
70.                         if(cc[i].field == tofiled){  
71.                             toindex = i;  
72.                             totemp = cc[i];  
73.                         }  
74.                     }  
75.                     cc.splice(fromindex,1,totemp);  
76.                     cc.splice(toindex,1,fromtemp);  
77.                 }  
78.             }  
79.         });  
80.     }  
81. });  

调用$(‘#dg‘).datagrid({.....}).datagrid("columnMoving");