easyui datagrid 列拖拽2

1、拖动前

2、拖动中

3、拖动后

5、代码1

 

$("#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");

6.代码2

 

 

$.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");
                }
            });
        });
    }
});