ztree实现拖拽功能

时间 2019-11-11

标签 ztree 实现功能繁體版

原文原文链接

最近刚刚接触了一个树形结构的文件目录的，经过拖拽实现结构的变化，利用ztree来实现；javascript

ztree是基于jquery的一个插件php

api相对简单上手，相比与element 、antd 我的感受相对简单些css

基本入手思路以下：html

　　1.这个官方文档 http://www.treejs.cn/v3/main.php#_zTreeInfo，java

　　在马云上下载demo 找到对应的文件，打开相应的功能（ztree数据渲染跟传统dom渲染不同，ztree默认显示的是name,能够经过setting: 设置属性，来指定代替name ）node

　　2，根据demo显示的内容找相应的代码：来嵌套到本身的代码中，最后将ajax请求到的数据用 zNodes来代替；jquery

　　代码基本以下 : ajax

　　<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 部分　　　　api

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

　　　　js代码以下：antd

<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>