$.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 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>
<script 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="提交" οnclick="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>