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 });