|
yogesh
|
 |
« on: August 14, 2012, 03:44:27 AM » |
|
is it possible to provide drag drop functionality on Treegrid control
|
|
|
|
|
Logged
|
|
|
|
|
stworthy
|
|
« Reply #1 on: August 16, 2012, 05:31:52 PM » |
|
The code below demonstrate a simple drag-drop functionality on treegrid nodes: function enableDnd(t){
var nodes = t.treegrid('getPanel').find('tr[node-id]');
nodes.find('span.tree-hit').bind('mousedown.treegrid',function(){
return false;
});
nodes.draggable({
disabled:false,
revert:true,
cursor:'pointer',
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
}
});
}
Additional css definition should be added into your page: <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>
|
|
|
|
|
Logged
|
|
|
|
|
yogesh
|
|
« Reply #2 on: August 20, 2012, 02:16:23 AM » |
|
Thanks  every thing is working fine as per given below but now i am struggling to get the values for source node and target node like after drop operation i want change parent id of source node with id of target node var node = $('#test').treegrid('getSelected'); is not working in this case sorry for poor question but i am not master in Jquery and this control but i like this control |
|
|
|
|
Logged
|
|
|
|
|
catasoft
|
|
« Reply #3 on: August 23, 2012, 09:53:21 PM » |
|
Hello
I tried for hours to get this code to work, with the latest version of the treegreid, but nothing,
I have no idea where this code should be placed, and how it will be called.
Could you be so kind as to give me, even in only a few words, a few indications as to where this code should be placed?
In other examples from the previous days I noticed an option "dtd:true" but doesn't seem to work "out of the box".
So basically the question is: where do I put this code in order for dnd to work?
Tried to put it into a ready() handler, thought otherwise the tree wouldn't be generated at the time of execution... but the nodes list turns out empty.
Thanks in advance,
Catalin
|
|
|
|
|
Logged
|
|
|
|
|
yogesh
|
|
« Reply #4 on: August 24, 2012, 12:06:14 AM » |
|
first load treegrid
second load data in treegrid
after each data load call above function
|
|
|
|
|
Logged
|
|
|
|
|
catasoft
|
|
« Reply #5 on: August 24, 2012, 12:21:38 AM » |
|
Thanks yogesh, but excuse my ignorance: I don't understand yet. Here's how I tried to make it work. - Went to the demos folder
- edited treegrid3.html file (so that I know settings were all fine)
- added the style to the head
- added the code
$(document).ready(function() {
enableDnd($('#tt')); //clearly, "tt" is the ID of the tree table
});[/li]Conclusion? DND doesn't work. I edited the provided function and added some line to see what was going on: function enableDnd(t){
var nodes = t.treegrid('getPanel').find('tr[node-id]');
alert($('tbody tr').length);
alert(nodes.length);Guess what: it's Zero. Don't know, it should be easyer:( This is my whole code, treegrid3.html edited: <!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> |
|
|
|
|
Logged
|
|
|
|
|
yogesh
|
|
« Reply #6 on: August 24, 2012, 12:53:21 AM » |
|
it will help you <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<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>
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]');
nodes.find('span.tree-hit').bind('mousedown.treegrid', function() {
return false;
});
nodes.draggable({
disabled: false,
revert: true,
cursor: 'pointer',
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
}
});
}
</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"
url="treegrid_data3.json" idField="id" treeField="code"
pagination="true" fitColumns="true" onload="">
<thead>
<tr>
<th field="code" rowspan="2" width="150" editor="text">Code</th>
<th colspan="2">Group Fields</th>
</tr>
<tr>
<th field="name" width="200" editor="text">Name</th>
<th field="addr" width="200" editor="text">Addr</th>
</tr>
</thead>
</table>
<script>
$('#tt').treegrid({
onLoadSuccess: function(row, param) { enableDnd($('#tt')); }
});
</script>
</body>
</html>
|
|
|
|
|
Logged
|
|
|
|
|
|
|
catasoft
|
|
« Reply #8 on: August 24, 2012, 02:00:00 AM » |
|
Great. Now, is it possible to just move nodes around, without the need to reload the tree? I'd like to do everything in Javascript, and then submit the whole tree and save it to the database (it's a Mongo DB, so no problems). My code creates all sort of problems, plus it doesn't work for moving nodes: [...]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
if (action == 'append')
$(this).append(source);
else if (point == 'top')
$(source).insertBefore(this);
else
$(source).insertAfter(this);
[...]
}Should I do a recursive getChildren, and then an append, to get it to work "in browser"? This would be a great addition. Thanks a lot for your efforts! |
|
|
|
|
Logged
|
|
|
|
|
yogesh
|
|
« Reply #9 on: August 24, 2012, 02:06:09 AM » |
|
Hi stworthy,
I am still struggling to get source node and target node values i am only getting source node text and target node text but not row data
|
|
|
|
|
Logged
|
|
|
|
|
catasoft
|
|
« Reply #10 on: August 24, 2012, 02:43:44 AM » |
|
Yogesh, I don't know if this is what you need, I got the node values for source/destination nodes with this little code: //inside onDrop
src = $('#tt').treegrid('find', $(source).attr('node-id'));
dest = $('#tt').treegrid('find', $(this).attr('node-id')); |
|
|
|
|
Logged
|
|
|
|
|
stworthy
|
|
« Reply #11 on: August 24, 2012, 04:27:08 AM » |
|
The drag-drop function is implemented in the attached file now. To enable the drag-drop feature, include the 'treegrid-ext.js' file in page head. <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<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" src="../jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script type="text/javascript" src="../treegrid-ext.js"></script>
And then call 'enableDnd' method when load data successfully. The code below demonstrate how to use this method: <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,fitColumns:true,autoRowHeight:false,
onLoadSuccess:function(){
$(this).treegrid('enableDnd');
},
onDrop: function(target,source,point){
alert(target+':'+source+':'+point);
}">
<thead>
<tr>
<th data-options="field:'code'" rowspan="2" width="150">Code</th>
<th colspan="2">Group Fields</th>
</tr>
<tr>
<th data-options="field:'name'" width="200">Name</th>
<th data-options="field:'addr'" width="200">Addr</th>
</tr>
</thead>
</table>
Finally write some code in 'onDrop' event to save the new node state to database. |
|
|
|
|
Logged
|
|
|
|
|
catasoft
|
|
« Reply #12 on: August 24, 2012, 05:27:27 AM » |
|
Beautiful, stworthy!  One bug: editing somehow is not working anymore... If I don't enable Dnd, it works. I mean, it draws the input boxes, but the Editing cursor doesn't show up when clicking in them, it's like they are readonly. |
|
|
|
|
Logged
|
|
|
|
|
catasoft
|
|
« Reply #13 on: August 26, 2012, 01:42:02 PM » |
|
stworthy, could you please take a look at editing in Dnd trees? it somehow no longer works  thanks (I promise to stop writing in this thread after this one  ) |
|
|
|
|
Logged
|
|
|
|
|
stworthy
|
|
« Reply #14 on: August 26, 2012, 05:38:21 PM » |
|
A solution to solve the editing issue is to stop the 'mousedown' event bubble on each editor. var t = $('#tt');
t.treegrid('beginEdit',id);
var eds = t.treegrid('getEditors',id);
for(var i=0;i<eds.length;i++){
$(eds[i].target).bind('mousedown',function(e){
e.stopPropagation();
});
}
|
|
|
|
|
Logged
|
|
|
|
|
