1. 程式人生 > >zTree 拖拽排序

zTree 拖拽排序

 首先配置zTree的相關屬性

   var setting = {  
        callback: {
                beforeDrop: beforeDrog//用於捕獲節點拖拽操作結束之前的事件回撥函式,並且根據返回值確定是否允許此拖拽操作
                }
        
                ,
                edit: { //此屬性新增後,樹才可以被拖拽
                    enable: true,
                    showRemoveBtn: false,
                    showRenameBtn: false,
                    drag: {
                        prev: true,
                        next: true,
                        inner: false //拖拽到目標節點時,設定是不允許成為目標節點的子節點  
                    }
                }
}


  // 拖拽排序 只允許同級排序
    //用於捕獲節點拖拽操作結束之前的事件回撥函式,並且根據返回值確定是否允許此拖拽操作
    function beforeDrog(treeId, treeNodes, targetNode, moveType) {
        for(var i =treeNodes.length-1; i >1; i--){
            if(treeNodes[i].parentTId != treeNodes[i-1].parentTId){
                //todo alert
                return false
            }
        }
        if(treeNodes[0].parentTId == targetNode.parentTId){
            return true;
        }
        return false;
    }

小結:zTree官網給出的API和DEMO還是非常實用的,需要的話隨時查閱即可