ztree组织树实例，选中并展示已选数据

我不是女神ヾ 2022-11-27 03:12 99阅读 0赞

> 最近在对接接口，需要获取上家的组织机构接口并将数据展示出来，所以就了解了一下这种组织机构树，有ztree，dtree等等，考虑到用户那边都是比较老的ie，所以还是用了ztree，特地记录一下使用方法

Ztree的官方API文档和demo地址：[http://www.treejs.cn/][http_www.treejs.cn]

建议在用之前，先去看看官方文档的注意事项与入门指南，可以更加快速上手

## 1.文件准备 ##

ztree提供了很多js文件，在3.0后，将功能分割成独立模块，目前有 core + excheck + exedit +exhide，每个模块负责不同的功能，例如复选框，编辑，拖拽等，明确你需要的功能导入不同js，并且将css文件一并添加

注意，ztre所有的js必须放在jquery的后面

![20200814094300738.png][]

## 2.初始化 ##

这里直接上代码更加直观

setting里面的参数配置，在官方文档写的特别详细，这里就不赘述，可以自行去看，这里只放一些常用的参数

这里区分一下简单数据格式和标准数据格式，简单数据概况的说就是json数据是类似于list集合形式，数据之间的父子关系是通过id和pid进行关联，而标准数据则是在父节点里会包含下面的子节点，现在基本常用的都是简单数据模式，使用时需要绑定id和pid

<script>
    var zTreeObj; //实例一个obj
        var setting = {
            view: {
                selectedMulti: true, //设置是否能够同时选中多个节点
                showIcon: true,  //设置是否显示节点图标
                showLine: true,  //设置是否显示节点与节点之间的连线
            },
            data: {
                simpleData: {
                    enable: true, //设置是否启用简单数据格式（zTree支持标准数据格式跟简单数据格式，上面例子中是标准数据格式）
                    idKey: "id",  //设置启用简单数据格式时id对应的属性名称
                    pidKey: "pId" //设置启用简单数据格式时parentId对应的属性名称,ztree根据id及pid层级关系构建树结构
                }
            },
            check: {
                enable: true   //设置是否显示checkbox复选框
            },
            callback: {
                onCheck: zTreeOnClick,
                beforeCheck: function (treeId, treeNode) {
                    if (treeNode.isParent) {
                        return false;
                    }
                }
            }
        }
    </script>

setting设置完成后，就把你的数据进行绑定

这里是你的dom     配置     数据源
    zTreeObj = $.fn.zTree.init($("#ztreeOrgs"), setting, data.info);

至于其他的更多的扩展功能，我这里贴上代码，如果需要demo的话，也可以留言给我

整体代码 JS

<script>
        var zTreeObj;
        var setting = {
            view: {
                selectedMulti: true, //设置是否能够同时选中多个节点
                showIcon: true,  //设置是否显示节点图标
                showLine: true,  //设置是否显示节点与节点之间的连线
            },
            data: {
                simpleData: {
                    enable: true, //设置是否启用简单数据格式（zTree支持标准数据格式跟简单数据格式，上面例子中是标准数据格式）
                    idKey: "id",  //设置启用简单数据格式时id对应的属性名称
                    pidKey: "pId" //设置启用简单数据格式时parentId对应的属性名称,ztree根据id及pid层级关系构建树结构
                }
            },
            check: {
                enable: true   //设置是否显示checkbox复选框
            },
            callback: {
                onCheck: zTreeOnClick,
                beforeCheck: function (treeId, treeNode) {
                    if (treeNode.isParent) {
                        return false;
                    }
                }
            }
        }
        function zTreeOnClick(event, treeId, treeNode) {
            var treeObj = $.fn.zTree.getZTreeObj("ztreeOrgs");
            var nodes = treeObj.getCheckedNodes(true);
            var c = "";
            var n = "";
            var html = "";
            for (var i = 0; i < nodes.length; i++) {
                if (nodes[i].isParent != true) {
                    html += "<li id=" + nodes[i].id + " class=checkValue>" + nodes[i].name + "</li>"
                    c += nodes[i].id + ",";
                    n += nodes[i].name + ",";
                }
            } 
            $("#checkName").val(n.substring(0, n.length - 1));
            $("#checklist").html(html);
            $("#checkValue").val(c.substring(0, c.length - 1));
    
        };
        function resultCheck() {
            var treeObj = $.fn.zTree.getZTreeObj("ztreeOrgs");
            treeObj.checkAllNodes(false)
            $("#checklist").html("");
            $("#checkValue").val("");
            $("#checkName").val("");
        }
        function submitCheck() {
           
            
        }
        function closelist() {
            var treeObj = $.fn.zTree.getZTreeObj("ztreeOrgs");
            treeObj.expandAll(false);
        }
        $(function () {
            $.ajax({
                type: "POST",
                url: ,
                success: function (data) {
                    if (data.status == "success") {
                        zTreeObj = $.fn.zTree.init($("#ztreeOrgs"), setting, data.info);
                        fuzzySearch('ztreeOrgs', '#KeyOrg', null, true);
                    }
    
                }
            });
        })
    </script>

HTML

<div class="person">
        搜索：<input type="text" name="Orgs" id="KeyOrg" placeholder="模糊查询" style="" />
        <div id="ztreeOrgs" class="ztree"></div>
    
    </div>
    <input type="hidden" name="name" id="checkValue" value="" />
    <input type="hidden" name="name" id="checkName" value="" />
    <input type="hidden" name="name" id="hidID" value="@ViewBag.ID" />
    <input type="hidden" name="name" id="hidPendID" value="@ViewBag.PendID" />
    <div class="person">
        <ul id="checklist">
        </ul>
    </div>
    <div>
        <input type="button" name="name" onclick="submitCheck()" value="提交发文" />
        <input type="button" name="name" onclick="resultCheck()" value="清空选择" />
        <input type="button" name="name" onclick="closelist()" value="全部折叠" />
    </div>

[http_www.treejs.cn]: http://www.treejs.cn/
[20200814094300738.png]: /images/20221124/61eb41ff133e4204b20f83bbc92e114a.png

发表评论取消回复

表情：

评论列表（有 0 条评论，99人围观）

还没有评论，来说两句吧...

相关阅读

相关 layui表格监听checkbox是否选中并获取选中行的数据

table.on('checkbox(table-id)', function(obj){ console.log(obj.checked); //当前是

Myth丶恋晨/ 2023年06月28日 09:56/ 0 赞/ 38 阅读

相关 ztree组织树实例，选中并展示已选数据

> 最近在对接接口，需要获取上家的组织机构接口并将数据展示出来，所以就了解了一下这种组织机构树，有ztree，dtree等等，考虑到用户那边都是比较老的ie，所以还是用了ztr

我不是女神ヾ/ 2022年11月27日 03:12/ 0 赞/ 100 阅读

相关 Ztree行政地区树状展示

[Ztree行政地区树状展示][Ztree] Ztree行政地区树状展示（点击加载）效果如下： ![39190ca364dcb7fcfea903485bcd2201.

蔚落/ 2022年11月21日 09:51/ 0 赞/ 198 阅读

相关树数据集实现组织树报表

1. 描述 [组织树报表][Link 1] 中由 ID 与父 ID 来实现组织树报表，若层级数较多时，对每个单元格设置过滤条件和形态会比较繁琐，因此 FineReport

Bertha 。/ 2022年10月02日 07:59/ 0 赞/ 167 阅读

相关 Ztree创建带有复选框的树

需要增加的属性 check: { enable: true } 封装的工具代码 function createTree(url, treeId)

绝地灬酷狼/ 2022年06月16日 11:13/ 0 赞/ 246 阅读

相关 Ztree树节点应用

`树节点增删改查:` 前台jsp页面： <% String root=request.getContextPath();//获取项目目录

青旅半醒/ 2022年06月04日 08:47/ 0 赞/ 288 阅读

相关 ztree 修改数据默认勾选节点数据回显

转载自： [https://blog.csdn.net/liujava621/article/details/44776557][https_blog.csdn.net_liu

柔情只为你懂/ 2022年05月20日 01:42/ 0 赞/ 591 阅读

相关 Web树zTree

> 今天，我做了一个关于web树的结构，老师讲过之后，我听明白了，写出了一个Demo，在这里跟大家分享一下，这个web树的shi实现主要是shu'数据结构算法设计的巧妙，

╰半橙微兮°/ 2022年05月19日 03:05/ 0 赞/ 293 阅读

相关 jQuery 获取单选框已选中的值

jQuery 获取单选框（radio）已选中的值，请阅读我的原创文章[《jQuery 表单对象属性》][jQuery]，文章中的 “:checked” 选择器文章中有详细的说

曾经终败给现在/ 2022年01月31日 09:07/ 0 赞/ 368 阅读

相关 ztree实现异步树

先上效果图 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0

心已赠人/ 2021年09月30日 16:06/ 0 赞/ 584 阅读