easyui扩展datagrid格子移动功能

(function($){
$.extend($.fn.datagrid.defaults, {
afterDelete: null
});

   function move(target){
  var dg = $(target);
  var opts = dg.datagrid('options');
  var rows = dg.datagrid('getRows');
  var fields = dg.datagrid('getColumnFields');
  var cell;

 for(var i = 0;i<fields.length;i++){
 for(var j=0;j<rows.length;j++){
 cell = opts.finder.getTr(target, j).find('td[field="'+fields[i]+'"]');
 var celltext = cell.text();
 var textDiv = cell.find("div.datagrid-cell");
 $(textDiv).attr("row",j);
 $(textDiv).attr("col",i);
 $(textDiv).draggable({
deltaX:0,
deltaY:0,
revert:true,
onDrag:function(e){
var t = $(window).scrollLeft();//datagrid-body
$(dg).animate({'scrollLeft':t+200},100);

}
});
 
 cellDroppable(target,cell)
 deleteMenu(target,textDiv);//增加右键删除按钮
 
 }  
 }
 

   }

   

   function cellDroppable(target,object){
  var dg = $(target);
  var fields = dg.datagrid('getColumnFields');
  var opts = dg.datagrid('options');
  $(object).droppable({

onDragEnter:function(){

               $(this).addClass('datagrid-row-selected');

           },
onDragLeave:function(e,source){
$(this).removeClass('datagrid-row-selected');
},
onDrop:function(e,source){
var treetext = $(source).find("span.tree-title").text();

if(treetext != "" && treetext != null){
var parent = $(source).parent();
var pparent = $(parent).parent();
var childrenNum = $(pparent).children().length;
var ppparent = $(pparent).parent();

var parentDiv = $("<div class='datagrid-cell' row ='-1',col='-1' style='text-align: center; height: auto;' ></div>");
$(parentDiv).append(treetext);
source = parentDiv;
$(parent).remove();
if(childrenNum == 1){
$(ppparent).remove(); 
}
}

$(this).removeClass('datagrid-row-selected');
var field = $(this).attr('field');
var tr = $(this).closest('tr.datagrid-row');
var rowIndex = parseInt(tr.attr('datagrid-row-index'));
var colIndex = $.inArray(field, fields);
var thisRow = $(this).find("div.datagrid-cell").attr('row');
var thisCol = $(this).find("div.datagrid-cell").attr('col');

var row = parseInt($(source).attr("row"));//row of the source
var col = parseInt($(source).attr("col"));//col of the source
//alert(thisRow+":"+thisCol+"---"+row+":"+col);
flag = false;
if((thisRow==row && (col+1) == thisCol) || (thisRow==row && col == thisCol) ){

}else{
if(row == thisRow){//同行移动
if(thisCol<col){//同行向前移动
var minLeft = getMaxLeft(target,rowIndex,colIndex);
if(minLeft.row == rowIndex && minLeft.col == colIndex){
removeToCellRight(target,rowIndex,colIndex,source);
}else{//如果左边有空格就移动到最左边
removeToCellRight(target,minLeft.row,minLeft.col,source);
}
}else{
lastSameField = true;
var _cell = opts.finder.getTr(target,rowIndex).find('td[field="'+fields[colIndex]+'"]');//同行目标点是否有值
cellValue = "";
cellValue = $(_cell).text();
removeToCellRight(target,rowIndex,colIndex,source);
removeToCellLeft(target,row,col);
}
}else{
lastSameField = false;
var minLeft = getMaxLeft(target,rowIndex,colIndex);
if(minLeft.row == rowIndex && minLeft.col == colIndex){
removeToCellRight(target,rowIndex,colIndex,source);
}else{//如果左边有空格就移动到最左边
removeToCellRight(target,minLeft.row,minLeft.col,source);
}

removeToCellLeft(target,row,col);
}

}

}

});

   }

   /**用于接收框的右方数据向右移

    * target 目标

    * option 返回属性对象

    * fields 所有的列

    * row 目标行数

    * n目标列数

    * value当前单元格的值

    */

   var flag = false;//判断第一次装载数据（即还没有移动的时候，用于定位col,row）

   var lastField;//同行的最后一个数据

   var lastSameField = false;//是否是移动同行最后一个数据

   var
4000
cellValue="";//同行最后一个数据值

   function removeToCellRight(target,row,col,source){
  var dg = $(target);
  var option = dg.datagrid('options');
  var rows = dg.datagrid('getRows');
  var fields = dg.datagrid('getColumnFields');
  
 var fieldv = fields[col];
  var _cell = option.finder.getTr(target,row).find('td[field="'+fields[col]+'"]');
  var _cellText=$(_cell).text();
  if(!flag){
  $(source).attr("col",col);
  $(source).attr("row",row);
  }else{
  $(source).attr("col",col);
  }
  var currentDiv = _cell.find("div.datagrid-cell");
 
  $(currentDiv).draggable({//需要再次绑定拖动事件，否则会失效
deltaX:0,
deltaY:0,
revert:true
});
  $(source).draggable({
deltaX:0,
deltaY:0,
revert:true
});
  
  deleteMenu(target,currentDiv);//需要再次绑定删除事件，否则会失效
  deleteMenu(target,source);
  if(_cellText){
  flag = true;
  $(_cell).html(source);
 
  col++;
  removeToCellRight(target,row,col,currentDiv);
  }else{
  lastField = source;
  $(_cell).html(source);
  return;
  }
  

   }

   

   /**用于移动方右方数据向左移动

    * target 目标

    * option 返回属性对象

    * fields 所有的列

    * row 目标行数

    */

   function removeToCellLeft(target,row,col){
  var dg = $(target);
  var option = dg.datagrid('options');
  var rows = dg.datagrid('getRows');
  var fields = dg.datagrid('getColumnFields');
  
 var nextfield = fields[col+1];
 var curfield = fields[col];
  var _cell = option.finder.getTr(target,row).find('td[field="'+curfield+'"]');
  var nextCell = option.finder.getTr(target,row).find('td[field="'+nextfield+'"]');
  var _cellText=$(_cell).text();
  var currentDiv = _cell.find("div.datagrid-cell");
  var nextDiv = nextCell.find("div.datagrid-cell");
  $(nextDiv).attr("col",col);
  $(currentDiv).draggable({
deltaX:0,
deltaY:0,
revert:true
});
  $(nextDiv).draggable({
deltaX:0,
deltaY:0,
revert:true
});
  deleteMenu(target,currentDiv);
  deleteMenu(target,nextDiv);
 
  if((_cellText==null || _cellText=="") && nextfield != undefined && nextfield != "undefined"){
  $(_cell).html(nextDiv);
  col++;
  removeToCellLeft(target,row,col);
  }else{
  
  if(lastSameField && cellValue != ""){
  $(_cell).html(lastField);
  }else{
  $(_cell).html(nextDiv);
  }
  return;
  }
  

   }

   /**

    * 判断指定格最左为空的位置

    */

   function getMaxLeft(target,row,col){
  var dg = $(target);
  var option = dg.datagrid('options');
  var rows = dg.datagrid('getRows');
  var fields = dg.datagrid('getColumnFields');
  
  var field = fields[col-1];
  var pre = option.finder.getTr(target,row).find('td[field="'+field+'"]');
  var preText = $(pre).text();
   
  if((preText==null || preText=="") && field != undefined && field != "undefined"){
  col--;
  return getMaxLeft(target,row,col);
  }else{
  return {"row":row,"col":col};
  }

   }

   /**

    * 右键删除按钮功能

    */

   function deleteMenu(target,object){
  var dg = $(target);
  var option = dg.datagrid('options');
  var rows = dg.datagrid('getRows');
  var fields = dg.datagrid('getColumnFields');
 
  var _remove = $("<div class='easyui-menu'></div>");
$(dg).append(_remove);
var _options = $("<div data-options=\"name:'delete',iconCls:'icon-remove'\" style='display:none'>删除</div>");
$(_remove).append(_options);
$(object).bind('contextmenu',function(e){
var _object = this;
e.preventDefault();
$(_options).css("display","block");
$(_remove).menu({
left: e.pageX,
top: e.pageY,
   onClick:function(item){    
    if(item.name=='delete'){
$(_object).remove();
var row = parseInt($(_object).attr("row"));
var col = parseInt($(_object).attr("col"));
removeToCellLeft(target,row,col);
option.afterDelete(_object);
$(this).remove();//把自己删除，否则很多div
}   
   }    
}); 
$(_remove).menu('show');

});

   }

   

   function getCellValue(target,param){
       
     var dg = $(target);
 var panel = dg.datagrid('getPanel');
 var opts = dg.datagrid('options');
 var rows = dg.datagrid('getRows');
 var fields = dg.datagrid('getColumnFields');
 
 var cell = opts.finder.getTr(target,param.index).find('td[field="'+param.field+'"]');
 if(cell === null)
 return null;
 var cellValue = $(cell).text();
 return cellValue;

   }

   

   function collectAllData(target){
   var dg = $(target);
 var opts = dg.datagrid('options');
 var rows = dg.datagrid('getRows');
 var fields = dg.datagrid('getColumnFields');
 var frozenfields = dg.datagrid('getColumnFields',true);//读取冻结的数据
 
 var alldata = [];
 for(var i=0;i<rows.length;i++){
 var rowdata={};
 for(var j=0;j<fields.length;j++){
 var curfield = fields[j];
 var _cell = opts.finder.getTr(target,i).find('td[field="'+curfield+'"]');
 rowdata[curfield] = _cell.text();
 }
 for(var j=0;j<frozenfields.length;j++){
 var curfield = frozenfields[j];
 var _cell = opts.finder.getTr(target,i).find('td[field="'+curfield+'"]');
 rowdata[curfield] = _cell.text();
 }
 alldata.push(rowdata);
 }
 return alldata;

   }
$.extend($.fn.datagrid.methods, {//扩展datagrid方法
move: function(jq){
return jq.each(function(){
 move(this);

});
},
getCellValue:function(jq,param){
return getCellValue(jq[0],param);
},
collectAllData : function(jq){
return collectAllData(jq[0]);
}
});
function draggable(target){
var dg = $(target);
var treeNode = dg.find("div.tree-node");
$.each(treeNode,function(i){
if($(treeNode[i]).children("span.tree-hit").length==0){
$(treeNode[i]).draggable({
disabled:false,
revert:true,
cursor:'move',
proxy:function(_e9){
var p=$("<div class=\"tree-node-proxy\"></div>").appendTo("body");
p.html("<span class=\"tree-dnd-icon tree-dnd-yes\"> </span>"+$(_e9).find(".tree-title").html());
return p;
}
});
}

})

}
$.extend($.fn.tree.methods,{//扩展树的拖拽功能，即可以拖拽到其他地方，不仅仅是这棵树本身
draggable:function(jq){
return jq.each(function(){
draggable(this);
});
}
});

})(jQuery);

html:

<!doctype html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta name="keywords" content="jquery,ui,easy,easyui,web">

    <meta name="description" content="easyui helps you build your web pages easily!">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    

    <title>Cell Moveing in DataGrid - jQuery EasyUI</title>

    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="easyui/demo.css">
<link rel="stylesheet" type="text/css" href="css/move.css">
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<scrip
eb88
t type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/datagrid_cellMove.js"></script>

</head>

<body class="easyui-layout">   

    <div data-options="region:'west',title:'配车排程与编辑',split:true" style="width:710px;">

    
   <div class="easyui-layout" style="width:700px;height:890px;">
   <div data-options="region:'center',split:true" style="height:450px;">
    <table id="dg" style="width:698px;height:480px">
    </table>
   </div>
   <div data-options="region:'south',title:'未派订单',split:true" style="height:400px;">
<ul class="easyui-tree" id="tree" data-options="animate:true"></ul>
   </div>
   </div>

    

     <!-- <input type="button" value="提交" onclick="getValue()"> -->

    </div>   

    <div id="map" data-options="region:'center',title:'地图'" style="padding:5px;background:#eee;">

    </div>   

    

    <script type="text/javascript">

var data = [

            {"lineName":'支线-1.5T-大朗回收-1号车',

            "lines":[{"tm":'13:47', "dp":'769M', "wt":80.5},

                    {"tm":'13:47', "dp":'769M', "wt":70.5},

                    {"tm":'13:47', "dp":'769M',"wt":180.5},

                    {"tm":'13:47', "dp":'766M', "wt":84.8}]
},
{"lineName":'支线-1.5T-大朗回收-2号车', 
"lines":[{"tm":'13:47', "dp":'769M', "wt":180.5},
        {"tm":'13:47', "dp":'769M', "wt":70.5},
        {"tm":'13:47', "dp":'769M',"wt":184.5},
        {"tm":'13:47', "dp":'766M', "wt":84.5}]
},
{"lineName":'支线-1.5T-大朗回收-3号车',
"lines":[{"tm":'13:47', "dp":'769M', "wt":80.5},
        {"tm":'13:47', "dp":'769M', "wt":170.5},
        {"tm":'13:47', "dp":'769M', "wt":184.5},
        {"tm":'13:47', "dp":'766M', "wt":84.5}]
},
{"lineName":'支线-1.5T-大朗回收-4号车',
"lines":[{"tm":'13:47', "dp":'769M', "wt":150.5},
        {"tm":'13:47', "dp":'769M', "wt":70.5},
        {"tm":'13:47', "dp":'769M', "wt":84.5},
        {"tm":'13:47', "dp":'766M', "wt":94.5},


        {"tm":'13:47', "dp":'766M', "wt":184.5},
        {"tm":'13:47', "dp":'766M', "wt":84.5},
        {"tm":'13:47', "dp":'766M', "wt":134.5},
        {"tm":'13:47', "dp":'766M', "wt":184}]
},
{"lineName":'支线-1.5T-大朗回收-5号车', 
"lines":[{"tm":'13:47', "dp":'769M', "wt":80.5},
        {"tm":'13:47', "dp":'769M', "wt":70.5}, 
        {"tm":'12:57', "dp":'769M', "wt":184.5},
        {"tm":'11:47', "dp":'766M', "wt":87.5},
        {"tm":'13:27', "dp":'766M', "wt":67.5}]
}

            

        ];

var treedata = [{
"id":1,
"text":"My Documents",
"children":[{
"id":11,
"text":"Photos",
"state":"closed",
"children":[{
"id":111,
"text":"Friend"
},{
"id":112,
"text":"Wife"
},{
"id":113,
"text":"Company"
}]
},{
"id":12,
"text":"Program Files",
"children":[{
"id":121,
"text":"Intel"
},{
"id":122,
"text":"Java",
"attributes":{
"p1":"Custom Attribute1",
"p2":"Custom Attribute2"
}
},{
"id":123,
"text":"Microsoft Office"
},{
"id":124,
"text":"Games",
"checked":true
}]
},{
"id":13,
"text":"index.html"
},{
"id":14,
"text":"about.html"
},{
"id":15,
"text":"welcome.html"
}]
}];

function formateData(data){
var newdata = [];
var column = [];
$.each(data,function(i){
var rowdata={};
var lineName = data[i].lineName;
rowdata['lineName'] = lineName;
var lines = data[i].lines;
for(var j=0;j<lines.length;j++){
var line = 'line'+j;

rowdata[line] = lines[j]
if($.inArray(line,column) == -1){
column.push(line);
}
}
newdata.push(rowdata);
});
console.log(newdata);
console.log(column);
var columns = [];

$.each(column,function(i){
var columnName = {};
columnName["field"] = column[i];
columnName["title"] = parseInt(column[i].substring(4))+1;
columnName["width"] = 100;
columnName["align"] = 'center';
columnName["resizable"] = true;
columnName["formatter"] = function(value,row,index){
    if(value && value.tm){
    if(value && value.wt && value.wt>100){
    return "<div style='background-color:#11ee00;color:red;'>"+value.tm +",<br>"+value.dp +",<br>"+value.wt+"</div>";
    }else{
    return value.tm +",<br>"+value.dp +",<br>"+value.wt;
    }
   
    }else{
    return value;
    }
    };
columns.push(columnName);
});

return {"columns":columns,"data":{"total":newdata.length,"rows":newdata}};
}

        $(function(){
var cd = formateData(data);

        var datas = cd.data;

        var columns = [cd.columns];

            var dg = $('#dg').datagrid({

                data: datas,

                afterDelete:function(object){

                alert($(object).text());

                },

                frozenColumns:[[{field:'lineName',title:'线路',width:160}]],

                columns:columns 

            });

            dg.datagrid("move");

              $("#tree").tree({

             data:treedata,

             lines:true,

             draggable:false

              });

              $("#tree").tree('draggable');

              

              mapInit();

              addMPolyline();

              addMarker("114.195397","22.86166", '755W');
       addMarker("116.36890411376953","39.913423004886866", '010W');
       addMarker("104.195397","35.86166", '519W');
});

        }

    </script>

</body>

</html>