zTree 实现树结构及设置节点可拖拽

最新推荐文章于 2023-02-01 13:19:25 发布

GISer_CV攻城狮

最新推荐文章于 2023-02-01 13:19:25 发布

阅读量469

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_44011559/article/details/118208591

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf8" />
    <title>树结构目录</title>
    <link rel="stylesheet" href="zTree_v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <link rel="stylesheet" type="text/css" href="css/rappid.css" />
    <!-- <link rel="stylesheet" type="text/css" href="./css/data-mapping.css" /> -->
    <style>
        html,
        body,
        #PararegulTree {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
            border: none;
            overflow-x: hidden;
            overflow-y: hidden;
        }
        
        #treeDemo {
            height: 98%;
            width: 22%;
            left: 0px;
            background-color: white;
            border: 1px solid#dcdcdc;
            margin: 0px 0px 0px 0px;
            position: absolute;
        }
        
        #PararegulMain {
            height: 98%;
            width: 77%;
            left: 23%;
            border: 2px solid#fcfcfc;
            position: absolute;
        }
        
        #paper {
            height: 60%;
            width: 100%;
            border: 2px solid #177de4;
            margin: 0px 0px 0px 0px;
            position: absolute;
        }
        
        #PararegulStrategy {
            height: 40%;
            width: 100%;
            background-color: white;
            border: 2px solid #dcdcdc;
            margin: 0px 0px 0px 0px;
            position: absolute;
            top: 60%;
        }
    </style>
</head>

<body>
    <div id="PararegulTree">
        <div id="treeDemo" class="ztree"></div>
        <div id="PararegulMain">
            <div id="paper" draggable="false" drop="onDrop" dragover="allowDrop">
            </div>
            <div id="PararegulStrategy" draggable="false"></div>
        </div>
    </div>
    <script src="./src/jquery.js"></script>
    <script type="text/javascript" src="zTree_v3/js/jquery.ztree.core.js"></script>
    <script type="text/javascript" src="zTree_v3/js/jquery.ztree.exedit.js"></script>
</body>

</html>

<script>
    var zTreeObj;
    // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
    var setting = {
        callback: {
            //onDrag: zTreeOnDrag,
            //当拖动结束时，执行函数
            onDrop: zTreeOnDrop,
        },
        edit: {
            enable: true,  
            showRemoveBtn: false, //不显示移除按钮
            showRenameBtn: false, //不显示重命名按钮
            drag: {
                isCopy: false,
                isMove: true, //设置节点可拖拽
                prev: true,
                next: true,
                inner: true,
            }
        },
        data: {
            key: {
                //节点数据保存节点提示信息的属性名称，意思就是可以对字段名重命名，避免
                //与返回的zNodes节点数据中的字段，而不能显示的情况
                url: "key",
                name: "title" 
            }
        }
    };
    var zNodes = [],
        newCount = 1,
        log, className = "dark";
    //加载资源
    $.ajax({
        url: 'http://192.168.xx.xx:xx00/rest/param',
        type: "GET",
        async: false,
        success: function(res) {
            zNodes = res;
            zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes)
        }
    })

    // function zTreeOnDrag(event, treeId, treeNodes) {
    //     alert(treeNodes.length);
    // };

    function zTreeOnDrop(event, treeId, treeNodes, targetNode, moveType) {
        alert(treeNodes.length + "," + (targetNode ? (targetNode.tId + ", " + targetNode.name) : "isRoot"));
    };
</script>

GISer_CV攻城狮

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
zTree 实现树结构及设置节点可拖拽

<!DOCTYPE html><html><head> <meta charset="utf8" /> <title>树结构目录</title> <link rel="stylesheet" href="zTree_v3/css/zTreeStyle/zTreeStyle.css" type="text/css"> <link rel="stylesheet" type="text
复制链接

扫一扫

专栏目录