Jquery easyui treegrid實現樹形表格的行拖拽

前幾天修改了系統的一個功能——實現樹形列列表的行拖拽，以達到排序的目的。如今基本上功能實現，現作一個簡單的總結。

1.拿到這個直接網上搜，有好多，可是看了後都以爲不是太複雜就是些不是特別想看的例子，本身太懶（對本身不是很熟悉的東西是不肯意第一去看的）。結果選擇良久，仍是jquery easyui treegrid這個例子本身看起來比較熟悉。因而就專心研究了，從官方網站http://www.jeasyui.net/下載了demo，開始研讀。先把jsp頁面一些代碼貼出

<link rel="stylesheet" type="text/css" href="../css/treegrid/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../css/treegrid/icon.css">
<link rel="stylesheet" type="text/css" href="../css/treegrid/treegrid.css">
<script type="text/javascript" src="../js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../js/treegrid-dnd.js"></script>
<script type="text/javascript">

$(function(){  
      //初始化彈出對話框
            $('#win').window('close');
           
            
            $('#tt').treegrid({ 
//                 data:data,
                url:'catalogListItem',
                method:'post',
                dataType:'json',
                rownumbers: true,
                singleSelect:true,
                idField: 'id',
                treeField: 'title',                
                animate:true,
                columns:[[ 
                    {field:'id',title:'ckc',checkbox:true},
                    {field:'title',title:'分類名稱',width:400,align:'left',editor:'text'}, 
                    {field:'sortid',title:'排序值',width:100,align:'left',editor:'text'},
                    {field:'creatorNick',title:'建立者',width:100},    
                    {field:'createdTime',title:'建立時間',width:220},
                    {field:'operate',title:'操做',width:220,
                        formatter: function(value,row,index){
                            var html='';
                            html+='<a onclick="showedit(\'編輯\','+row.id+')" >編輯 </a> ';        
                            //html+=value+'<a onclick="editrow('+row+')" >編輯 </a> <a id="cancel" onclick="cancel()"></a>';        
                            if(row.level==0){
                                html+=' <a href="#" onclick="Confirm(\'確認刪除這個分類及其子類\','+row.id+')">刪除</a> ';
                                html+='<a href="#" onclick="showedit(\'新建\','+row.id+')">新建子節點</a> ';//默認只有二級節點
                            }
                            else
                                html+=' <a href="#" onclick="Confirm(\'確認刪除這個記錄\','+row.id+')">刪除</a> ';
                            
                            return html;
                        }

                    }
                ]],
              
               onLoadSuccess: function(row){ //$(this).treegrid('enableDnd', row?row.id:null);
                   //上面的代碼是demo中的，可是對於要保存更改到數據庫顯然走不通，須要向其餘辦法

                   //啓用拖動排序
                    enableDnd($('#tt'));
                }            
            }); 
      });
    //進入修改/添加    type:操做類型  id：編輯時，當前記錄的id；添加時當前記錄的id（添加第一級節點id要做特殊處理）
      function showedit(type,id){
          $("#form")[0].reset();
          $('#win').window('open');
          if(type=='編輯'){             
              $.ajax({
                  url:'catalogGet?id='+id,
                  type:'post',
                  dataType:'json',
                  cache:false,
                  success:function(data){
                      $("#title").val(data[0].title);
                      $("#sortid").val(data[0].sortid);
                      $("#id").val(id);
                  }
                          
              });
          }
          else
             {              
              $("#parentId").val(id);
             }        
      }     
      //保存
      function save(){
          var title= $("#title").val();
          var sortid=$("#sortid").val();
          var id=$("#id").val(); 
          var parentId=$("#parentId").val();  
          $.ajax({
              url:'catalogEdit',
              data:{"title":title,"sortid":sortid,"id":id,"parentId":parentId},
              type:'post',
              dataType:'json',
              success:
                  function(data)
                  {       
                      if(data.result){
                         $('#win').window('close');
                         $('#tt').treegrid('reload');                        
                      }
                      else                        
                         alert(data.result);                        
                  }         
          });
      }
      //是否刪除
      function Confirm(msg,id) {  
            $.messager.confirm("確認", msg, function (r) {  
                if (r) {  
                    //請求
                    $.ajax({url:'catalogDelete?id='+id,
                        type:'post',
                        dataType: 'json',   
                        success://
                         function (data) {
                            if(data){
                              $('#tt').treegrid('reload');
                            }
                            else
                                alert("faile");                            
                        }
                     });
                }  
            });  
            return false;  
        }  

 

 

想到拖動的話，必定會用到jquery easyui 中draggable這個,可是這也不會寫啊，看看demo按照那個寫了一個，不合適，放棄了。想着着必定會有哪位這方面的前輩寫好了，就各類百度和google，通過各類實驗，找到一個就是上面  onLoadSuccess  裏的  enableDnd($('#tt'));摘自一個論壇http://www.jeasyui.com/forum/index.php?topic=575.0

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
                 //==================================
                 //作本身的邏輯處理
                var src  = $('#tt').treegrid('find', $(source).attr('node-id'));
                var dest = $('#tt').treegrid('find', $(this).attr('node-id'));
               // alert(src.title+","+dest.title);
                $.ajax({
                    url: 'updateCatalogList',
                    dataType: 'json',
                    type:'post',
                    data: {
                        "srcId": src.id,
                        "destId": dest.id
                    },
                    success:function(data){
                        if(data.result)
                        {
                            $('#tt').treegrid('reload');    //從新加載treegrid        
                       }
                    }
                
                });
               //====================
            }
        });
    }
  

 寫入本身的程序，徹底能夠，拖動的效果有了，拖動的處理時間本身寫「//============」之間的就是邏輯代碼，具體就是向後臺傳送拖拽節點的標識信息（通常是id）和拖拽的目標節點的標識信息，即srcId和destId後臺在作處理。  

    <div id="win" title="新建/編輯分類" class="easyui-window" style="width:300px;height:180px;">
        <form id="form" style="padding:10px 20px 10px 40px;">
            <p>分類名稱: <input id="title" name="title" type="text"></p>
            <p>排序值: <input id="sortid" name="sortid" type="text"></p>
            <input id="id" name="id" type="hidden">
            <input id="parentId" name="parentId" type="hidden">
            <div style="padding:5px;text-align:center;">
                <a href="#" class="easyui-linkbutton" icon="icon-ok" onclick="save()">肯定</a>
                <a href="#" class="easyui-linkbutton" icon="icon-cancel" onclick="javascript: $('#win').window('close');">取消</a>
            </div>
            <input id="id" name="id" type="hidden">
        </form>
    </div>
    <table id="tt" class="easyui-treegrid" cellpadding="0" cellspacing="0" border="0" style="width100%;height:450px"></table>

 

 接下來看一下數據源，個人數據源用的json格式，也是demo的給的樣例格式。以下：

var data=[{
    "id":1,
    "name":"C",
    "size":"",
    "date":"02/19/2010",
    "children":[{
        "id":2,
        "name":"Program Files",
        "size":"120 MB",
        "date":"03/20/2010",
        "children":[{
            "id":21,
            "name":"Java",
            "size":"",
            "date":"01/13/2010",
            "state":"closed",
            "children":[{
                "id":211,
                "name":"java.exe",
                "size":"142 KB",
                "date":"01/13/2010"
            },{
                "id":212,
                "name":"jawt.dll",
                "size":"5 KB",
                "date":"01/13/2010"
            }]
        },{
            "id":22,
            "name":"MySQL",
            "size":"",
            "date":"01/13/2010",
            "state":"closed",
            "children":[{
                "id":221,
                "name":"my.ini",
                "size":"10 KB",
                "date":"02/26/2009"
            },{
                "id":222,
                "name":"my-huge.ini",
                "size":"5 KB",
                "date":"02/26/2009"
            },{
                "id":223,
                "name":"my-large.ini",
                "size":"5 KB",
                "date":"02/26/2009"
            }]
        }]
    },{
        "id":3,
        "name":"eclipse",
        "size":"",
        "date":"01/20/2010",
        "children":[{
            "id":31,
            "name":"eclipse.exe",
            "size":"56 KB",
            "date":"05/19/2009"
        },{
            "id":32,
            "name":"eclipse.ini",
            "size":"1 KB",
            "date":"04/20/2010"
        },{
            "id":33,
            "name":"notice.html",
            "size":"7 KB",
            "date":"03/17/2005"
        }]
    }]
}];

 

這就有一點須要注意你傳過來的每條數據對象須要有對應的屬性（children和state），state屬性控制節點的關閉狀態。由於只是照貓畫虎，也沒多想，我就直接把後臺的全部數據直接一次性封裝好，送給前臺了。

注意：1.這在數據量極大地狀況下是很低效的。一種思路就是異步加載子節點。

        2.每次加載排序效果的好壞，還與系統定義的排序方式有關。

 

最後，雖簡單的實現了功能，可是還有待改進。像 enableDnd($('#tt'));這個函數的東西，本身能看懂，可是仍是本身寫的少，以致於須要引用他人的。之後要多多增強一下。