Thanks yogesh, but excuse my ignorance: I don't understand yet.
Here's how I tried to make it work.
Conclusion? DND doesn't work.
Guess what: it's Zero.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Editable TreeGrid - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<link rel="stylesheet" type="text/css" href="demo.css">
<script type="text/javascript" src="../jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<style type="text/css">
.row-top td{
border-top:1px solid red;
background:#fff;
}
.row-bottom td{
border-bottom:1px solid red;
background:#fff;
}
.row-append td{
border:0;
background:#FBEC88;
}
</style>
<script type="text/javascript" >
function editNode(){
var node = $('#tt').treegrid('getSelected');
if (node){
$('#tt').treegrid('beginEdit',node.id);
}
}
function saveNode(){
var node = $('#tt').treegrid('getSelected');
if (node){
$('#tt').treegrid('endEdit',node.id);
}
}
function cancelNode(){
var node = $('#tt').treegrid('getSelected');
if (node){
$('#tt').treegrid('cancelEdit',node.id);
}
}
function enableDnd(t){
var nodes = t.treegrid('getPanel').find('tr[node-id]');
alert($('tbody tr').length);
alert(nodes.length);
nodes.each(function() {alert($(this).attr('node-id'));});
nodes.find('span.tree-hit').bind('mousedown.treegrid',function(){
return false;
});
nodes.draggable({
disabled:false,
revert:true,
cursor:'crosshair',
proxy: function(source){
var p = $('<div class="tree-node-proxy tree-dnd-no"></div>').appendTo('body');
p.html($(source).find('.tree-title').html());
p.hide();
return p;
},
deltaX: 15,
deltaY: 15,
onBeforeDrag:function(){
$(this).next('tr.treegrid-tr-tree').find('tr[node-id]').droppable({accept:'no-accept'});
},
onStartDrag:function(){
$(this).draggable('proxy').css({
left:-10000,
top:-10000
});
},
onDrag:function(e){
$(this).draggable('proxy').show();
this.pageY = e.pageY;
},
onStopDrag:function(){
$(this).next('tr.treegrid-tr-tree').find('tr[node-id]').droppable({accept:'tr[node-id]'});
}
}).droppable({
accept:'tr[node-id]',
onDragOver:function(e,source){
var pageY = source.pageY;
var top = $(this).offset().top;
var bottom = top + $(this).outerHeight();
$(source).draggable('proxy').removeClass('tree-dnd-no').addClass('tree-dnd-yes');
$(this).removeClass('row-append row-top row-bottom');
if (pageY > top + (bottom - top) / 2){
if (bottom - pageY < 5){
$(this).addClass('row-bottom');
} else {
$(this).addClass('row-append');
}
} else {
if (pageY - top < 5){
$(this).addClass('row-top');
} else {
$(this).addClass('row-append');
}
}
},
onDragLeave:function(e,source){
$(source).draggable('proxy').removeClass('tree-dnd-yes').addClass('tree-dnd-no');
$(this).removeClass('row-append row-top row-bottom');
},
onDrop:function(e,source){
var action,point;
if ($(this).hasClass('row-append')){
action = 'append';
} else {
action = 'insert';
point = $(this).hasClass('row-top') ? 'top' : 'bottom';
}
$(this).removeClass('row-append row-top row-bottom');
alert(action+":"+point);
// your logic code here
// do append or insert action and reload the treegrid data
}
});
}
$(document).ready(function() {
enableDnd($('#tt'));
});
</script>
</head>
<body>
<h2>Editable TreeGrid - Pagination</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Select node and Click edit button to perform editing.</div>
</div>
<div style="margin:10px 0">
<a href="javascript:editNode()" class="easyui-linkbutton">Edit</a>
<a href="javascript:saveNode()" class="easyui-linkbutton">Save</a>
<a href="javascript:cancelNode()" class="easyui-linkbutton">Cancel</a>
</div>
<table id="tt" title="TreeGrid" class="easyui-treegrid" style="width:700px;height:300px"
data-options="url:'treegrid_data3.json',idField:'id',treeField:'code',
rownumbers:true,pagination:true,fitColumns:true,autoRowHeight:false,dnd:true">
<thead>
<tr>
<th data-options="field:'code',editor:'text'" rowspan="2" width="150">Code</th>
<th colspan="2">Group Fields</th>
</tr>
<tr>
<th data-options="field:'name',editor:'text'" width="200">Name</th>
<th data-options="field:'addr',editor:'text'" width="200">Addr</th>
</tr>
</thead>
</table>
</body>
</html>
