easyui datagrid 列拖拽2

1、拖动前

2、拖动中

3、拖动后

5、代码1

1. $("#corp-grid").datagrid({
2. title:"泥头车企业管理",
3. toolbar:"#corp-grid-toolbar",
4. border:false,
5. fit:true,
6. width:$(window).width()-252,
7. columns:[[
8. {field:"ckb",checkbox:true},
9. {field:"corpName",title:"企业名称",width:200,halign:"center",align:"center",resizable:true},
10. {field:"linkedCorpName",title:"挂靠深圳企业名称",width:200,halign:"center",align:"center",resizable:true},
11. {field:"corpType",title:"企业类型",width:80,align:"center",resizable:false},
12. {field:"businessScope",title:"经营范围",width:80,align:"center",resizable:false},
13. {field:"effectiveDate",title:"有效日期",width:80,align:"center",resizable:false},
14. {field:"opePeriod",title:"营业期限",width:80,align:"center",resizable:false},
15. {field:"ifLocal",title:"是否本地",width:80,align:"center",resizable:false},
16. {field:"state",title:"有效状态",width:80,align:"center",resizable:false}
17. ]],
18. //striped:true,
19. fitColumns:true,
20. //autoRowHeight:true,
21. rownumbers:false,
22. singleSelect:false,
23. ctrlSelect:true,
24. pagination:true,
25. pageSize:10,
26. pageList:[5,10,15,20,25,30],
27. sortName:"corpId",
28. sortOrder:"desc",
29. url:"corp_getInfoList.action",
30. method:"post",
31. loadMsg:"加载数据中，请稍后",
32. onDblClickRow:function(rowIndex, rowData){
33. openDialog({
34. type:"view",
35. title:"泥头车企业信息查看",
36. width:800,
37. height:400,
38. maximizable:true,
39. href:"BaseInfo/Corp/CorpInfoView.html"
40. });
41. },
42. onRowContextMenu:function(e, rowIndex, rowData){
43. e.preventDefault();
44. $(this).datagrid("unselectAll");
45. $(this).datagrid("selectRow", rowIndex);
46. $("#corp-menu").menu("show",{
47. left:event.pageX,
48. top:event.pageY
49. });
50. }
51. }).datagrid("columnMoving");

6.代码2

1. $.extend($.fn.datagrid.methods,{
2. columnMoving:function(jq){
3. return jq.each(function(){
4. var grid = this;
5. var directionDiv = $("<div></div>");
6. directionDiv.hide();
7. $("body").append(directionDiv);
8. $(grid).datagrid("getPanel")
9. .find(".datagrid-header td[field]:not(td[field='ckb'])").draggable({
10. revert:true,
11. cursor:"move",
12. deltaX:10,
13. deltaY:10,
14. edge:10,
15. proxy:function(source){
16. var proxyEl = $("<div></div>");
17. proxyEl.addClass("dg-proxy dg-proxy-error");
18. proxyEl.text($(source).text());
19. proxyEl.appendTo($("body"));
20. return proxyEl;
21. }
22. }).droppable({
23. accept:".datagrid-header td[field]",
24. onDragOver:function(e,source){
25. $(source).draggable("proxy").removeClass("dg-proxy-error").addClass("dg-proxy-right");
26. $(".dg-hide-div").hide();
27. var thisIndex = $(this).index();
28. var sourceIndex = $(source).index();
29. var className = null;
30. var height = null;
31. var thisOffset = null;
32. var left = null;
33. var top = null;
34. height = $(this).height();
35. if(sourceIndex > thisIndex){
36. className = "dg-move-prev";
37. thisOffset = $(this).offset();
38. left = thisOffset.left;
39. top = thisOffset.top;
40. }else{
41. className = "dg-move-next";
42. if(thisIndex == $(this).parent().children(":last").index()){
43. thisOffset = $(this).offset();
44. left = thisOffset.left + $(this).width() - directionDiv.width();
45. top = thisOffset.top;
46. }else{
47. thisOffset = $(this).next().offset();
48. left = thisOffset.left - directionDiv.width();
49. top = thisOffset.top;
50. }
51. }
52. directionDiv.removeClass().addClass(className);
53. directionDiv.css({height:height, left:left, top:top});
54. directionDiv.show();
55. },
56. onDragLeave:function(e,source){
57. $(source).draggable("proxy").removeClass("dg-proxy-right").addClass("dg-proxy-error");
58. directionDiv.hide();
59. },
60. onDrop:function(e,source){
61. directionDiv.remove();
62. var thisIndex = $(this).index();
63. var sourceIndex = $(source).index();
64. var sourceCol = new Array();
65. $(source).remove();
66. $.each($(grid).datagrid("getPanel")
67. .find(".datagrid-body tr"),function(index,obj){
68. var sourceTd = $(obj).children("td:eq(" + sourceIndex + ")");
69. sourceCol.push(sourceTd);
70. sourceTd.remove();
71. });
72. var prev = sourceIndex > thisIndex;
73. thisIndex = $(this).index();
74. if(prev){
75. $(this).before($(source));
76. }else{
77. $(this).after($(source));
78. }
79. $.each($(grid).datagrid("getPanel")
80. .find(".datagrid-body tr"),function(index,obj){
81. var thisTd = $(obj).children("td:eq(" + thisIndex + ")");
82. if(prev){
83. thisTd.before(sourceCol[index]);
84. }else{
85. thisTd.after(sourceCol[index]);
86. }
87. });
88. $(grid).datagrid("columnMoving").datagrid("columnHiding");
89. }
90. });
91. });
92. }
93. });