ztree基本使用

最新推荐文章于 2025-06-28 12:51:07 发布

qq_31118787

最新推荐文章于 2025-06-28 12:51:07 发布

阅读量1k

点赞数 2

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/qq_31118787/article/details/80652531

上图为敬。

实现对目录树的编辑、新增、删除、拖拽更改父目录4个功能，会在高级功能里详细讲。

一、基本文件引入

在官网上下载的ztree包的js文件中找到jquery.ztree.all.js ，

和css文件中的 metroStyle文件夹(注意是整个文件夹），

将这两个文件在自己的Html文件中引用（CSS放在html的Head中，js放在HTML的body末尾），注意相对位置。

此外还需要jquery.js文件。

二、ztree初始化

首先，去ztree官网上看例子和api。ztree的官网API真的写的很好，很实用，不吹不黑。

那这里，我先用如下的示例数据:

var zNodes = [
        {
            "id": 0,
            "categoryId": "100",
            "categoryName": "我的目录",    
            "parentId": -1,
            "categoryLevel": 1,
            "createTime": "2017-12-14 21:05:35.0",
            "creator": "1",
            "typeId": "0",
            "bmID": "",
            "fullbmID": ""
        },
        {
            "id": 265,
            "categoryId": "1",
            "categoryName": "北京1",
            "parentId": 0,
            "categoryLevel": 1,
            "createTime": "2017-12-14 21:05:35.0",
            "creator":0,
            "typeId": null,
            "bmID": "BJZZX",
            "fullbmID": "BJZZX"
        },
        {
            "id": 266,
            "categoryId": "2",
            "categoryName": "北京2",
            "parentId": -1,
            "categoryLevel": 1,
            "createTime": "2017-12-14 21:05:35.0",
            "creator":0,
            "typeId": null,
            "bmID": "BJZZX",
            "fullbmID": "BJZZX"
        },
        {
            "id": 267,
            "categoryId": "3",
            "categoryName": "北京分公司3",
            "parentId": 0,
            "categoryLevel": 1,
            "createTime": "2017-12-14 21:05:35.0",
            "creator": "7",
            "typeId": null,
            "bmID": "BJZZX",
            "fullbmID": "BJZZX"
        },
        {
            "id": 268,
            "categoryId": "2",
            "categoryName": "北京分公司4",
            "parentId": 0,
            "categoryLevel": 1,
            "createTime": "2017-12-14 21:05:35.0",
            "creator": "7",
            "typeId": null,
            "bmID": "BJZZX",
            "fullbmID": "BJZZX"
        }];

我需要根据每个节点的id和parentId来定义树结构，显示categoryName。

   data: {
        key: {
            name: "categoryName",
        },
        simpleData: {
            enable: true,
            idKey: "id",
            pIdKey: "parentId",
            rootPId: "0"
        }
    },

此外，你还可以自选一些需要的功能：

 edit: {
        enable: true,
        editNameSelectAll: true,
        showLine: true,
        selectedMulti: false,
    },
    view: {
        dblClickExpand: false,
        showLine: true,
        selectedMulti: false,
        
    },

下面贴代码：

js:

var zTree;
var setting = {
    edit: {
        enable: true,
        editNameSelectAll: true,
        showLine: true,
        selectedMulti: false,
    },
    view: {
        dblClickExpand: false,
        showLine: true,
        selectedMulti: false,
    },
    data: {
        key: {
            name: "categoryName",
        },
        simpleData: {
            enable: true,
            idKey: "id",
            pIdKey: "parentId",
            rootPId: "0"
        }
    },


    callback: {
        //     beforeRemove: beforeRemove,
        //     onRemove: onRemove,
        //     beforeRename: beforeRename,
        //     onRename: onRename,
        //     beforeDrag: beforeDrag,
        //     beforeDrop: beforeDrop,
        //     onDrop: zTreeOnDrop,
        //     beforeClick: beforeClick,
        //     onClick: zTreeOnClick
        // }
    }
}

var zNodes = [
        {
            "id": 0,
            "categoryId": "100",
            "categoryName": "我的目录",
            "parentId": -1,
            "categoryLevel": 1,
            "createTime": "2017-12-14 21:05:35.0",
            "creator": "1",
            "typeId": "0",
            "bmID": "",
            "fullbmID": ""
        },
        {
            "id": 265,
            "categoryId": "1",
            "categoryName": "北京1",
            "parentId": 0,
            "categoryLevel": 1,
            "createTime": "2017-12-14 21:05:35.0",
            "creator":0,
            "typeId": null,
            "bmID": "BJZZX",
            "fullbmID": "BJZZX"
        },
        {
            "id": 266,
            "categoryId": "2",
            "categoryName": "北京2",
            "parentId": -1,
            "categoryLevel": 1,
            "createTime": "2017-12-14 21:05:35.0",
            "creator":0,
            "typeId": null,
            "bmID": "BJZZX",
            "fullbmID": "BJZZX"
        },
        {
            "id": 267,
            "categoryId": "3",
            "categoryName": "北京分公司3",
            "parentId": 0,
            "categoryLevel": 1,
            "createTime": "2017-12-14 21:05:35.0",
            "creator": "7",
            "typeId": null,
            "bmID": "BJZZX",
            "fullbmID": "BJZZX"
        },
        {
            "id": 268,
            "categoryId": "2",
            "categoryName": "北京分公司4",
            "parentId": 0,
            "categoryLevel": 1,
            "createTime": "2017-12-14 21:05:35.0",
            "creator": "7",
            "typeId": null,
            "bmID": "BJZZX",
            "fullbmID": "BJZZX"
        }];


    $(document).ready(function() {
        $.fn.zTree.init($("#first"), setting, zNodes);
        var zTree = $.fn.zTree.getZTreeObj("tree");

        //        turn_tnodeto_Data(zNodes,);
        //        console.log(GlobalTreeNode);
        //        table_show_tNodes(GlobalTreeNode);

    });

html:

<html>

<head>
    <!-- ztree -->
    <link rel="stylesheet" type="text/css" href="./css//metroStyle/metroStyle.css" />
</head>

<body>

    <p>ztree基本使用</p>
    <div class="box-body">
        <ul id="first" class="ztree" style="width:100%"></ul>
    </div>
</body>

</html>

<!-- <script type="text/javascript" src="./forin.js"> </script> -->
<script type="text/javascript" src="./jquery.min.js"> </script>
<script type="text/javascript" src="./jquery.ztree.all.min.js"> </script>

<script type="text/javascript" src="./myztree.js"> </script>