ztree實現拖拽功能

最近剛剛接觸了一個樹形結構的文件目錄的，通過拖拽實現結構的變化，利用ztree來實現；

ztree是基於jquery的一個插件

api相對簡單上手，相比與element 、antd 個人感覺相對簡單些

基本入手思路如下：

　　1.這個官方文檔  http://www.treejs.cn/v3/main.php#_zTreeInfo，

　　在馬雲上下載demo 找到對應的文件， 打開相應的功能（ztree數據渲染跟傳統dom渲染不一樣，ztree默認顯示的是name,可以通過setting: 設置屬性，來指定代替name ）

　　2，根據demo顯示的內容找相應的代碼： 來嵌套到自己的代碼中 ，最后將ajax請求到的數據用 zNodes來代替；

　　代碼基本如下 : 

　　　　　

　　<link rel="stylesheet" href="./css/zTreeStyle.css" type="text/css">
　　<script type="text/javascript" src="./js/jquery.ztree.core.js"></script>
　　<script type="text/javascript" src="./js/jquery.ztree.excheck.js"></script>
　　<script type="text/javascript" src="./js/jquery.ztree.exedit.js"></script>

　　　　html 部分　　　　

　　　　　　<div id="treeDemo" class="ztree" ></div>
　　　　　　

　　　　js代碼如下：

　　　　　　

<script>

    var setting = {
        edit: {
            enable: true,
            showRemoveBtn: showRemoveBtn,
            showRenameBtn: showRenameBtn,
            drag: {
                isCopy: false,//所有操作都是move
                isMove: true,
                prev: true,
                next: true,
                inner: true
            }
        },
        data: {
            key:{
                name:"orgName"
            },
            simpleData: {
                enable: true,
                idKey:"orgCode",
                pIdKey:"parentCode",
                rootPid: ""
            }
        },
        callback: {
            beforeDrag: beforeDrag,
            beforeDrop: beforeDrop,
            onDrop: onDrop,
            beforeRemove: beforeRemove,
            beforeRename: beforeRename,
            onRemove: onRemove,
            onRename: onRename
        }
    };

    var zNodes =[] , newCount = 1, log, className = "dark";
    //加載資源
    $.ajax({
        url: 'http://10.3.10.190/enterprise-pc/org/allorg.mvc',
        type: "post",
        async: false,
        success: function (res) {
            zNodes = res.data;
            t = $.fn.zTree.init($("#treeDemo"), setting, zNodes)
        }
    })
    //在拖拽之前
    function beforeDrag(treeId, treeNodes) {
        for (var i=0,l=treeNodes.length; i<l; i++) {
            if (treeNodes[i].drag === false) {
                return false;
            }
        }
        return true;
    }
    //用於捕獲節點拖拽操作結束之前的事件回調函數，並且根據返回值確定是否允許此拖拽操作
    //默認值 null
    function beforeDrop(treeId, treeNodes, targetNode, moveType) {
        return targetNode ? targetNode.drop !== false : true;
    }
    //用於捕獲節點拖拽操作結束的事件回調函數  默認值： null
    function onDrop(event, treeId, treeNodes, targetNode,moveType) {
        //拖拽成功時，修改被拖拽節點的pid
        console.log(event)
        console.log(treeId +'11111')
        console.log(treeNodes )
        console.log(treeNodes[0].parentCode)
        console.log(targetNode)
        console.log(moveType)
        $.ajax({
            type:'post',
            url: '',
            dataType: "text",
            async: false,
            success: function (data) {
            },
            error: function (msg) {
            }
        });
    }
    function showRemoveBtn(treeId, treeNode) {
        return !treeNode.isFirstNode;
    }
    function showRenameBtn(treeId, treeNode) {
        return !treeNode.isLastNode;
    }
    //刪除節點之前執行的函數
    function beforeRemove(treeId, treeNode) {
        console.log('remove')
        className = (className === "dark" ? "":"dark");
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        zTree.selectNode(treeNode);
        return confirm("確認刪除 節點 -- " + treeNode.orgName + " 嗎？");
    }
    //刪除節點執行的函數
    function onRemove(e, treeId, treeNode) {

    }
    //重命名之前執行的函數
    function beforeRename(treeId, treeNode, newName, isCancel) {
        className = (className === "dark" ? "":"dark");
       //showLog((isCancel ? "<span style='color:red'>":"") + "[ beforeRename ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.orgName + (isCancel ? "</span>":""));
        if (newName.length == 0) {
            setTimeout(function() {
                var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                zTree.cancelEditName();
                alert("節點名稱不能為空.");
            }, 0);
            return false;
        }
        return true;
    }
    //重命名是執行的函數
    function onRename(e, treeId, treeNode, isCancel) {

    }
    //再刪除節點之前調用這個函數
    function beforeRemove(treeId, treeNode) {
        className = (className === "dark" ? "":"dark");
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        zTree.selectNode(treeNode);
        return confirm("確認刪除 節點 -- " + treeNode.orgName + " 嗎？");
    }
    //刪除節點值執行的函數
    function onRemove(e, treeId, treeNode) {
        //showLog("[ onRemove ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.orgName);
    }
    function showRemoveBtn(treeId, treeNode) {
        return !treeNode.isFirstNode;
    }
    function showRenameBtn(treeId, treeNode) {
        return !treeNode.isLastNode;
    }
    var newCount = 1;
    //添加
    function addHoverDom(treeId, treeNode) {
        var sObj = $("#" + treeNode.tId + "_span");
        if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
        var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
            + "' title='add node' onfocus='this.blur();'></span>";
        sObj.after(addStr);
        var btn = $("#addBtn_"+treeNode.tId);
        if (btn) btn.bind("click", function(){
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
            zTree.addNodes(treeNode, {id:(100 + newCount), pId:treeNode.id, orgName:"new node" + (newCount++)});
            return false;
        });
    };
    //
    function removeHoverDom(treeId, treeNode) {
        $("#addBtn_"+treeNode.tId).unbind().remove();
    };
</script>