EasyUI Forum
March 04, 2024, 01:28:30 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1] 2
  Print  
Author Topic: Drag Drop in TreeGrid  (Read 73671 times)
yogesh
Newbie
*
Posts: 47


View Profile Email
« on: August 14, 2012, 03:44:27 AM »

is it possible to provide drag drop functionality on Treegrid control
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #1 on: August 16, 2012, 05:31:52 PM »

The code below demonstrate a simple drag-drop functionality on treegrid nodes:
Code:
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:
Code:
<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
Newbie
*
Posts: 47


View Profile Email
« Reply #2 on: August 20, 2012, 02:16:23 AM »

Thanks  Smiley

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
Newbie
*
Posts: 10


View Profile Email
« 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
Newbie
*
Posts: 47


View Profile Email
« 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
Newbie
*
Posts: 10


View Profile Email
« 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
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:
    Code:
    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:

    Code:
    <!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
    Newbie
    *
    Posts: 47


    View Profile Email
    « Reply #6 on: August 24, 2012, 12:53:21 AM »

    it will help you
    Code:
    <!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
    stworthy
    Administrator
    Hero Member
    *****
    Posts: 3581


    View Profile Email
    « Reply #7 on: August 24, 2012, 01:41:22 AM »

    Please refer to this example.
    http://jsfiddle.net/tjdG7/3/
    Logged
    catasoft
    Newbie
    *
    Posts: 10


    View Profile Email
    « 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:
    Code:
              [...]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
    Newbie
    *
    Posts: 47


    View Profile Email
    « 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
    Newbie
    *
    Posts: 10


    View Profile Email
    « 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:
    Code:
    //inside onDrop
    src  = $('#tt').treegrid('find', $(source).attr('node-id'));
    dest = $('#tt').treegrid('find', $(this).attr('node-id'));
    Logged
    stworthy
    Administrator
    Hero Member
    *****
    Posts: 3581


    View Profile Email
    « 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.
    Code:
    <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:
    Code:
    <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
    Newbie
    *
    Posts: 10


    View Profile Email
    « Reply #12 on: August 24, 2012, 05:27:27 AM »

    Beautiful, stworthy!  Cheesy
    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
    Newbie
    *
    Posts: 10


    View Profile Email
    « 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 Sad
    thanks (I promise to stop writing in this thread after this one Embarrassed)
    Logged
    stworthy
    Administrator
    Hero Member
    *****
    Posts: 3581


    View Profile Email
    « 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.
    Code:
    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
    Pages: [1] 2
      Print  
     
    Jump to:  

    Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!