|
kauser.ahmmed
|
 |
« on: December 03, 2014, 10:08:58 PM » |
|
I want to implement drag and drop in treegrid like below: - A node of level n can be dropped to a node of level n-1. problem is -- 1. after i drop node function211 to process11. process11 node can not be moved to area2 node[which should be]. my code is -- <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic 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="CSS/demo.css">
<script type="text/javascript" src="Extension/jquery.min.js"></script>
<script type="text/javascript" src="Extension/jquery.easyui.min.js"></script>
<script type="text/javascript" src="Extension/treegrid-dnd.js"></script>
</head>
<body>
<h2>Project Estimation</h2>
<p>Show projects as treegrid.</p>
<div>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="edit()">Edit</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="save()">Save</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="cancel()">Cancel</a>
</div>
<div style="margin:20px 0;"></div>
<table id ="tg" class="easyui-treegrid" style="width:700px;height:250px"
data-options="
animate: true,
collapsible: true,
fitColumns: true,
url: 'Data/project_data.json',
method: 'get',
rownumbers: true,
idField: 'id',
treeField: 'name',
loadFilter: myLoadFilter,
onLoadSuccess: onLoadSuccess,
onDblClickCell: onDblClickCell
">
<thead >
<tr>
<th data-options="field:'name',width:'180',editor:'text'">Name</th>
<th data-options="field:'categoryid',
formatter: function(value,row){
return row.categoryname;
},
width:'180',
editor:{
type:'combobox',
options:{
valueField:'categoryid',
textField:'categoryname',
method:'get',
url:'Data/category.json',
required:true,
onSelect: onSelectCategoryName
}
}">Category
</th>
<th data-options="field:'department',width:'180',editor:'text'">Department</th>
<th data-options="field:'referenceSize',width:'180',editor:'text'">Reference Size</th>
</tr>
</thead>
</table>
<div id="mm" class="easyui-menu" style="width:120px;">
<div id="m-append" onclick="append()" data-options="iconCls:'icon-add'">Append</div>
<div id="m-removeIt" onclick="removeIt()" data-options="iconCls:'icon-remove'">Remove</div>
</div>
<script type="text/javascript">
var maxLeafLevel = 3;
$.extend($.fn.treegrid.methods, {
editCell: function(jq,param){
return jq.each(function(){
var opts = $(this).treegrid('options');
var fields = $(this).treegrid('getColumnFields',true).concat($(this).treegrid('getColumnFields'));
for(var i=0; i<fields.length; i++){
var col = $(this).treegrid('getColumnOption', fields[i]);
col.editor1 = col.editor;
if (fields[i] != param.field){
col.editor = null;
}
}
$(this).treegrid('beginEdit', param.index);
for(var i=0; i<fields.length; i++){
var col = $(this).treegrid('getColumnOption', fields[i]);
col.editor = col.editor1;
}
});
}
});
var appendVisible = true;
var removeVisible = true;
function onContextMenu(e, row){
e.preventDefault();
$(this).treegrid('select', row.id);
var currentLevel = getLevel(row);
if(currentLevel == maxLeafLevel){
if (appendVisible) {
var itemEl = $('#m-append')[0];
$('#mm').menu('hideItem', itemEl);
appendVisible = false;
}
}
else{
if(!appendVisible){
var itemEl = $('#m-append')[0];
$('#mm').menu('showItem', itemEl);
appendVisible = true;
}
}
$('#mm').menu('show',{
left: e.pageX,
top: e.pageY
});
}
$(function(){
$('#tg').treegrid({
onContextMenu: onContextMenu,
//onDragEnter: onDragEnter,
onDragOver: onDragOver,
//onDragLeave: onDragLeave,
onBeforeDrop: onBeforeDrop
//onDrop: onDrop,
//onBeforeDrag: onBeforeDrag
});
/*var id = row?row.id:null;
var target = this;
var state = $.data(this, 'treegrid');
state.disabledNodes = [];
var t = $(this);
var opts = state.options;
if (id){
var nodes = opts.finder.getTr(target, id);
var rows = t.treegrid('getChildren', id);
for(var i=0; i<rows.length; i++){
nodes = nodes.add(opts.finder.getTr(target, rows[i][opts.idField]));
}
} else {
var nodes = t.treegrid('getPanel').find('tr[node-id]');
}
nodes.draggable({}).droppable({
accept: 'tr[node-id]',
onDragOver: onDragOver,
//onDragLeave: onDragLeave,
onBeforeDrop: onBeforeDrop,
//onDrop: onDrop
});*/
});
function append(){
var tree = $('#tg');
var node = tree.treegrid('getSelected');
var currentLevel = getLevel(node);
if(currentLevel < maxLeafLevel){
var children = tree.treegrid('getChildren', node.id);
var childrenNo = children.length;
childrenNo++;
childId = node.id*10;
childLevel = currentLevel + 1;
tree.treegrid('append',{
parent: node.id,
data: [{
id: node.id*10 + childrenNo,
name: getNodeNameForLevel(childLevel) + node.id + '.' + childrenNo,
iconCls: getIconNameForLevel(childLevel)
}]
});
}
}
function removeIt(){
var node = $('#tg').treegrid('getSelected');
if(node){
$('#tg').treegrid('remove', node.id);
}
}
var editingId;
function edit(){
if(editingId != undefined){
$('#tg').treegrid('select', editingId);
return;
}
var row = $('#tg').treegrid('getSelected');
var currentLevel = getLevel(row);
if(row){
if(currentLevel == maxLeafLevel){
editingId = row.id;
$('#tg').treegrid('beginEdit', editingId);
enableEdit(editingId);
}
else{
onDblClickCell('name',row);
}
}
}
function save(){
if(editingId != undefined){
$('#tg').treegrid('endEdit', editingId);
editingId = undefined;
}
}
function cancel(){
if(editingId != undefined){
$('#tg').treegrid('cancelEdit', editingId);
editingId = undefined;
}
}
function endEditing(){
if (editingId == undefined){return true}
if ($('#tg').treegrid('validateRow', editingId)){
$('#tg').treegrid('endEdit', editingId);
editingId = undefined;
return true;
} else {
return false;
}
}
function onDblClickCell(field, row){
if (endEditing()){
var currentLevel = getLevel(row);
if(currentLevel == maxLeafLevel || field == 'name'){
$('#tg').treegrid('select', row.id)
.treegrid('editCell', {index:row.id,field:field});
editingId = row.id;
enableEdit(editingId);
$('#tg').treegrid('getPanel').bind('keyup',function(e){
if(e.keyCode == 27){
cancel();
}
});
}
}
}
function enableEdit(id){
if(id){
var t = $('#tg');
var eds = t.treegrid('getEditors',id);
for(var i=0;i<eds.length;i++){
$(eds[i].target).bind('mousedown',function(e){
e.stopPropagation();
});
}
}
}
function getLevel(row){
var currentLevel = $('#tg').treegrid('getLevel', row.id);
return currentLevel;
}
function onLoadSuccess(row, data){
$(this).treegrid('enableDnd', row?row.id:null);
for (var i = 0; i < data.length; i++) {
if(data[i].iconCls == undefined){
data[i].iconCls = getIconNameForNode(data[i]);
$('#tg').treegrid('refresh', data[i].id);
}
}
}
function getIconNameForNode(node){
currentLevel = getLevel(node);
return getIconNameForLevel(currentLevel);
}
function getIconNameForLevel(currentLevel){
var iconName;
switch(currentLevel){
case 1:
iconName = 'icon-add';
break;
case 2:
iconName = 'icon-edit';
break;
case 3:
iconName = 'icon-remove';
break;
default:
iconName = 'icon-blank';
break;
}
return iconName;
}
function onSelectCategoryName(param){
var row = $('#tg').treegrid('getSelected');
row.categoryid = param.categoryid;
row.categoryname = param.categoryname;
}
function myLoadFilter(data,parentId){
function setData(data){
var todo = [];
for(var i=0; i<data.length; i++){
todo.push(data[i]);
}
while(todo.length){
var node = todo.shift();
if (node.children && node.children.length){
node.state = 'closed';
node.children1 = node.children;
node.children = undefined;
todo = todo.concat(node.children1);
}
}
}
setData(data);
var tg = $(this);
var opts = tg.treegrid('options');
opts.onBeforeExpand = function(row){
if (row.children1){
tg.treegrid('append',{
parent: row[opts.idField],
data: row.children1
});
row.children1 = undefined;
tg.treegrid('expand', row[opts.idField]);
}
return row.children1 == undefined;
};
return data;
}
function getNodeNameForLevel(level){
var nodeName;
switch(level){
case 1:
nodeName = 'Area';
break;
case 2:
nodeName = 'Process';
break;
case 3:
nodeName = 'Function';
break;
default:
nodeName = 'blank';
break;
}
return nodeName;
}
function onDrop(targetRow,sourceRow,point){
sourceRow.parentId = targetRow.id;
$('#tg').treegrid('refresh', targetRow.id);
$('#tg').treegrid('refresh', sourceRow.id);
}
function onBeforeDrop(targetRow,sourceRow,point){
var tl = getLevel(targetRow);
var sl = getLevel(sourceRow);
if(tl == sl && point != 'append')
{
return true;
}
if(tl == sl-1 && point == 'append')
{
return true;
}
return false;
}
/*function onDragEnter(targetRow,sourceRow){
//return true;
var tl = getLevel(targetRow);
var sl = getLevel(sourceRow);
//if(tl == sl || tl == (sl-1))
if(tl == (sl-1))
{
return true;
}
return false;
}*/
function onDragOver(targetRow,sourceRow){
//return true;
//alert("on drag before");
var tl = getLevel(targetRow);
var sl = getLevel(sourceRow);
/*if(tl == sl || tl == (sl-1))*/
if(tl == (sl-1))
{
return true;
}
return false;
}
function onStopDrag(row){
//console.dir($._data($('#tg')[0]).data.treegrid.options);
var rl = getLevel(row);
}
function onDragLeave(targetRow, sourceRow){
tl = getLevel(targetRow);
sl = getLevel(sourceRow);
$('#tg').treegrid('refresh', targetRow.id);
$('#tg').treegrid('refresh', sourceRow.id);
}
function onBeforeDrag(row){
var state = $.data(this, 'treegrid');
console.log("on before drag : ");
console.dir(state);
}
</script>
</body>
</html>
----------------- my data is --- [{
"id":1,
"name":"Area1",
"children": [{
"id": 11,
"name": "Process11",
"parentId": 1,
"children": [{
"id": 111,
"name": "Function111",
"parentId": 11,
"categoryid": "1",
"categoryname": "Screen",
"department": "UX",
"referenceSize": "M"
}]
},
{
"id": 12,
"name": "Process12",
"parentId": 1
}]
},{
"id":2,
"name":"Area2",
"children": [{
"id": 21,
"name": "Process21",
"parentId": 2,
"children": [{
"id": 211,
"name": "Function211",
"parentId": 21,
"categoryid": "1",
"categoryname": "Screen",
"department": "UX",
"referenceSize": "M"
}]
},
{
"id": 22,
"name": "Process22",
"parentId": 2
}]
}]
|
Poll
