【zTree】简单实例与异步加载实例

zTree 实例解析：从简单到异步加载

最新推荐文章于 2021-07-24 16:46:03 发布

原创

最新推荐文章于 2021-07-24 16:46:03 发布 · 1.2w 阅读

2 ·

CC 4.0 BY-SA版权

本文介绍了如何使用zTree在项目中实现树形结构，并提供了简单实例和异步加载的改进版。简单实例主要展示基本的树结构设置，而异步加载则针对大量数据场景，避免一次性加载导致的性能问题。通过zTree的异步加载功能，首次只加载父节点，点击后再动态加载子节点。作者强调理解需求、选择合适方法以及面对困难的积极态度在开发中的重要性。

我们在项目中经常会需要用到树，这次按照数据库存储的特点重新了做一个小demo，使用zTree来实现这个功能。

简单实例：

首先我们需要在界面中引入代码，很简单，但是很重要，它用来存放加载的树。

ps:添加ztree的引用，下载地址：http://www.ztree.me/v3/main.php#_zTreeInfo

<span style="font-family:KaiTi_GB2312;font-size:18px;"><ul id="tree" class="ztree"></ul> </span>

其次是js代码：

<span style="font-family:KaiTi_GB2312;font-size:18px;"> var tree = {
        /** 
        * 所有的初始化的操作 
        */
        pFunction: {
            zTree: '',
            setting:
            {
                view: {
                    dblClickExpand: false,
                    showLine: true,  //是否显示节点间的连线
                    selectedMulti: false,
                    expandSpeed: "fast"
                },
                callback: {
                    onDblClick: zTreeOnDblClick
                },
                check: {
                    enable: true,
                    chkStyle: "radio", 
                    radioType: "all"  
                },
                data:
                {
                    key:
                    {
                        name: "Name"  //界面显示的名称参数
                    },
                    simpleData:
                    {
                        enable: true,
                        idKey: "ID",
                        pIdKey: "PID",
                        rootPId: "null"
                    }
                }
            },
            //加载树