easyUI editor
$("#corp-grid").datagrid({
title:"泥头车企业管理",
toolbar:"#corp-grid-toolbar",
border:false,
fit:true,
width:$(window).width()-252,
columns:[[
{field:"ckb",checkbox:true},
{field:"corpName",title:"企业名称",width:200,halign:"center",align:"center",resizable:true},
{field:"linkedCorpName",title:"挂靠深圳企业名称",width:200,halign:"center",align:"center",resizable:true},
{field:"corpType",title:"企业类型",width:80,align:"center",resizable:false},
{field:"businessScope",title:"经营范围",width:80,align:"center",resizable:false},
{field:"effectiveDate",title:"有效日期",width:80,align:"center",resizable:false},
{field:"opePeriod",title:"营业期限",width:80,align:"center",resizable:false},
{field:"ifLocal",title:"是否本地",width:80,align:"center",resizable:false},
{field:"state",title:"有效状态",width:80,align:"center",resizable:false}
]],
//striped:true,
fitColumns:true,
//autoRowHeight:true,
rownumbers:false,
singleSelect:false,
ctrlSelect:true,
pagination:true,
pageSize:10,
pageList:[5,10,15,20,25,30],
sortName:"corpId",
sortOrder:"desc",
url:"corp_getInfoList.action",
method:"post",
loadMsg:"加载数据中，请稍后",
onDblClickRow:function(rowIndex, rowData){
openDialog({
type:"view",
title:"泥头车企业信息查看",
width:800,
height:400,
maximizable:true,
href:"BaseInfo/Corp/CorpInfoView.html"
});
},
onRowContextMenu:function(e, rowIndex, rowData){
e.preventDefault();
$(this).datagrid("unselectAll");
$(this).datagrid("selectRow", rowIndex);
$("#corp-menu").menu("show",{
left:event.pageX,
top:event.pageY
});
}
}).datagrid("columnMoving");
$.extend($.fn.datagrid.methods,{
columnMoving:function(jq){
return jq.each(function(){
var grid = this;
var directionDiv = $("<div></div>");
directionDiv.hide();
$("body").append(directionDiv);
$(grid).datagrid("getPanel")
.find(".datagrid-header td[field]:not(td[field='ckb'])").draggable({
revert:true,
cursor:"move",
deltaX:10,
deltaY:10,
edge:10,
proxy:function(source){
var proxyEl = $("<div></div>");
proxyEl.addClass("dg-proxy dg-proxy-error");
proxyEl.text($(source).text());
proxyEl.appendTo($("body"));
return proxyEl;
}
}).droppable({
accept:".datagrid-header td[field]",
onDragOver:function(e,source){
$(source).draggable("proxy").removeClass("dg-proxy-error").addClass("dg-proxy-right");
$(".dg-hide-div").hide();
var thisIndex = $(this).index();
var sourceIndex = $(source).index();
var className = null;
var height = null;
var thisOffset = null;
var left = null;
var top = null;
height = $(this).height();
if(sourceIndex > thisIndex){
className = "dg-move-prev";
thisOffset = $(this).offset();
left = thisOffset.left;
top = thisOffset.top;
}else{
className = "dg-move-next";
if(thisIndex == $(this).parent().children(":last").index()){
thisOffset = $(this).offset();
left = thisOffset.left + $(this).width() - directionDiv.width();
top = thisOffset.top;
}else{
thisOffset = $(this).next().offset();
left = thisOffset.left - directionDiv.width();
top = thisOffset.top;
}
}
directionDiv.removeClass().addClass(className);
directionDiv.css({height:height, left:left, top:top});
directionDiv.show();
},
onDragLeave:function(e,source){
$(source).draggable("proxy").removeClass("dg-proxy-right").addClass("dg-proxy-error");
directionDiv.hide();
},
onDrop:function(e,source){
directionDiv.remove();
var thisIndex = $(this).index();
var sourceIndex = $(source).index();
var sourceCol = new Array();
$(source).remove();
$.each($(grid).datagrid("getPanel")
.find(".datagrid-body tr"),function(index,obj){
var sourceTd = $(obj).children("td:eq(" + sourceIndex + ")");
sourceCol.push(sourceTd);
sourceTd.remove();
});
var prev = sourceIndex > thisIndex;
thisIndex = $(this).index();
if(prev){
$(this).before($(source));
}else{
$(this).after($(source));
}
$.each($(grid).datagrid("getPanel")
.find(".datagrid-body tr"),function(index,obj){
var thisTd = $(obj).children("td:eq(" + thisIndex + ")");
if(prev){
thisTd.before(sourceCol[index]);
}else{
thisTd.after(sourceCol[index]);
}
});
$(grid).datagrid("columnMoving").datagrid("columnHiding");
}
});
});
}
});
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 fromIndex = $(source).index();
47 var toField = $(this).attr('field');
48 var toIndex = $(this).index();
49 setTimeout(function(){
50 moveField(fromField,toField,fromIndex,toIndex);
51 $(target).datagrid();
52 $(target).datagrid('columnMoving');
53 },0);
54 }
55 });
56
57 // move field to another location
58 function moveField(from,to,fromIndex,toIndex){
59 var columns = $(target).datagrid('options').columns;
60 var cc = columns[0];
61 var c = _remove(from);
62 if (c){
63 _insert(to,c);
64 }
65
66 function _remove(field){
67 for(var i=0; i<cc.length; i++){
68 if (cc[i].field == field){
69 var c = cc[i];
70 cc.splice(i,1);
71 return c;
72 }
73 }
74 return null;
75 }
76 function _insert(field,c){
77 var newcc = [];
78 for(var i=0; i<cc.length; i++){
79 if (cc[i].field == field){
80 if(fromIndex<toIndex){
81 newcc.push(cc[i]);
82 i++;
83 newcc.push(c);
84 }else{
85 newcc.push(c);
86 }
87 }
88 newcc.push(cc[i]);
89 }
90 columns[0] = newcc;
91 }
92 }
93 });
94 }
95 });
