1. 程式人生 > >ztree 僅在同級拖動 (親測實力派)

ztree 僅在同級拖動 (親測實力派)

實現僅同一個組織下不同部門排序拖拽,是判斷當前拖拽的節點pId和目標節點的pId是否相等,否則拖拽無效。

  var zNodes =[  
            { id:1, pId:0, name:"總公司", open:true, iconSkin:"pIcon01"},  
            { id:2, pId:1, name:"一分公司", open:true, iconSkin:"pIcon02"},  
            { id:3, pId:2, name:"總經辦", open:true, iconSkin:"pIcon02"},  
            { id:4, pId:3, name:"總經理", open:true, iconSkin:"pIcon01"},  
            { id:5, pId:4, name:"研發經理", open:true, iconSkin:"pIcon01"},  
            { id:6, pId:5, name:"研發部", iconSkin:"icon01"},  
            { id:7, pId:3, name:"銷售經理"},  
            { id:8, pId:3, name:"售後經理"},  
            { id:9, pId:1, name:"二分公司",open:true, iconSkin:"icon02"}  
        ];  

var dragId; 
        //<!--
        var setting = {
            view: {
                dblClickExpand: false,
                showLine: false,
                selectedMulti: false
            },
            check: {
                enable: false
            },
            data: {
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "pId",
                    rootPId: ""
                }
            }, 
            edit: { //此屬性新增後,樹才可以被拖拽
                enable: true,
                showRemoveBtn: false,
                showRenameBtn: false,
                drag: {
                    prev: true,
                    next: true,
                    inner: false //拖拽到目標節點時,設定是不允許成為目標節點的子節點  
} }, callback: { beforeClick: beforeClick, onClick: onClick, beforeDrag: function(treeId, treeNodes){ for (var i=0,l=treeNodes.length; i<l; i++) { dragId = treeNodes[i].pId; if (treeNodes[i].drag === false) { return false; } } return true; },beforeDrop: function(treeId, treeNodes, targetNode, moveType, isCopy){ //console.log("【源節點】節點id:"+treeNodes[0].id+" 父節點id:"+treeNodes[0].pId+" 級層:"+treeNodes[0].level+" 名稱:"+treeNodes[0].name); //console.log("【目標節點】 節點id:"+targetNode.id+" 父節點id:"+targetNode.pId+" 級層:"+targetNode.level+" 名稱:"+targetNode.name); if(treeNodes[0].level==0){ //console.log("不允許拖拽庫節點"); return false; } //if(!targetNode.isParent){ // console.log("不允許拖拽任何節點到表節點下"); // return false; //} if(targetNode.pId == dragId){ return true; }else{ return false; } },onDrag: function(){ //console.log("拖拽中"); return true; }, onDrop: function(event, treeId, treeNodes, targetNode, moveType, isCopy){ console.log("拖拽完畢"); //console.log("【源節點】節點id:"+treeNodes[0].id+" 父節點id:"+treeNodes[0].pId+" 級層:"+treeNodes[0].level+" 名稱:"+treeNodes[0].name); //console.log("【目標節點】 節點id:"+targetNode.id+" 父節點id:"+targetNode.pId+" 級層:"+targetNode.level+" 名稱:"+targetNode.name); if(treeNodes[0].pId == dragId && targetNode.pId==dragId){ var updateNode = getPeerNodes(targetNode); var persons=[]; for(var i=0;i<updateNode.length;i++) { persons.push({id: updateNode[i].id, ordinal: i+1}); } var para = { "updateJson":JSON.stringify(persons) }; $.ajax({ type: "POST", url: "DepartmentEdit.aspx/UpdateNode", data: JSON.stringify(para), async: false, dataType: "json", contentType: "application/json; charset=utf-8", success: function (resultData) { }, error: function (ex, status) { } }); }else{ //console.log('只能進行同級排序!'); return false; } return true; }, } }; function getPeerNodes(targetNode){ if(targetNode == null){ return null; }else{ if(targetNode.getParentNode() != null){ return targetNode.getParentNode().children; } return null; } } var zNodes = []; function beforeClick(treeId, treeNode, clickFlag) { if (treeNode != null && treeNode.permissionClick == "true") { return true; } else { return false; } }