需要注意的是：动态生成的树节点数据不是在后面拼接的，而是直接在done里面

<!DOCTYPE HTML>

<HTML>

 <HEAD>

  <TITLE> ZTREE DEMO </TITLE>

  <meta http-equiv="content-type" content="text/html; charset=UTF-8">

  <link href="css/zTreeStyle/zTreeStyle.css" rel="stylesheet"/>

  <!-- 分别导入jquery，zTree的两个js文件，其中excheck是显示复选框一定要有的 -->

  <script type="text/javascript" src="js/jquery-3.4.1.js"></script>

  <script type="text/javascript" src="js/jquery.ztree.core.js"></script>

  <script type="text/javascript" src="js/jquery.ztree.excheck.js"></script>

 </head>

<BODY>

<div>

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

   <input id="btn1" value="获取选中节点id" type="button"/>

</div>

<script>

    var treeNodes = [];

    $(function(){

        $.ajax({

            url: "http://127.0.0.1:8081/uris",

            type: "GET",

            dataType: "json"

        }).done(function(result){

            var da = result.data;

            for (var i = 0; i < da.length;i ++) {

                var node = {};

                node.id=da[i].id;

                node.superiorsId=da[i].superiorsId;

                node.uriName=da[i].uriName;

                if (da[i].id===112) {

                    node.checked="true";

                }

                treeNodes.push(node);

            }

            // 树是在done里面生成,而不是在后面,这个ready写在此处

            $(document).ready(function(){

                zTreeObj = $.fn.zTree.init($("#treeDemo"),setting,treeNodes)

            });

            console.log(treeNodes);

        })

    })

    var zTreeObj;

    // function ajaxDataFilter(treeId,parentNode,responseData) {

    //     return responseData.data;

    // }

    var setting = {

        // 开启复选框,其他不写就都是默认

        check: {

            enable: true

        },

        // name:"uriName"和取别名差不多

        data: {

            key:{

                name:"uriName"

            },

            // 开启简单数据,其他默认

            // idKey:"id",pIdKey:"superiorsId"也差不多是取别名

            simpleData: {

                enable: true,

                idKey: "id",

                pIdKey: "superiorsId",

                rootPId: 0

            }

        }

    }

    // 点击按钮后获取选中的数据

    $("#btn1").on("click", function(){

        var treeObj=$.fn.zTree.getZTreeObj("treeDemo");

        var nodes=treeObj.getCheckedNodes(true);

        for(var i=0;i<nodes.length;i++){

            console.log(nodes[i].id);

        }

    })

</script>

</BODY>

</HTML>

如果不是要一开始默认选中，而只是显示树节点，可以用更简单的

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <link href="../css/zTreeStyle/zTreeStyle.css" rel="stylesheet"/>

        <script type="text/javascript" src="jquery-3.4.1.js"></script>

        <script type="text/javascript" src="jquery.ztree.core.js"></script>

        <script type="text/javascript" src="jquery.ztree.excheck.js"></script>

    </head>

    <body>

        <div>

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

           <input id="btn1" value="获取选中节点id" type="button"/>

        </div>

        <script>

            var treeNodes = "";

            $(function(){

                $.ajax({

                    url: "http://127.0.0.1:8081/uris",

                    type: "get",

                    dataType: "json"

                }).done(function(result){

                    console.log(result.data);

                    treeNodes = result.data;

                    $(document).ready(function(){

                        zTreeObj = $.fn.zTree.init($("#treeDemo"),setting,treeNodes)

                    });

                })

            })

            var zTreeObj;

            var setting = {

                // 开启复选框,其他不写就都是默认

                check: {

                    enable: true

                },

                // name:"uriName"和取别名差不多

                data: {

                    key:{

                        name:"uriName"

                    },

                    // 开启简单数据,其他默认

                    // idKey:"id",pIdKey:"superiorsId"也差不多是取别名

                    simpleData: {

                        enable: true,

                        idKey: "id",

                        pIdKey: "superiorsId",

                        rootPId: 0

                    }

                }

            }

            $("#btn1").on("click", function(){

                var treeObj=$.fn.zTree.getZTreeObj("treeDemo");

                var nodes=treeObj.getCheckedNodes(true);

                for(var i=0;i<nodes.length;i++){

                    console.log(nodes[i].haveSuperiors);

                }

            })

        </script>

    </body>

</html>

zTree第二次的更多相关文章

  1. zTree第二章，各种常见setting设置和方法

    具体详见API文档: http://www.treejs.cn/v3/api.php --------------------------------------------------------- ...

  2. 项目一:项目第二天 Jquery ztree使用展示菜单数据 2、 基础设置需求分析 3、 搭建项目框架环境--ssh（复习） 4、 SpringData-JPA持久层入门案例（重点） 5、 Easyui menubutton菜单按钮使用 6、 Easyui messager消息框使用

    1. Jquery ztree使用展示菜单数据 2. 基础设置需求分析 3. 搭建项目框架环境--ssh(复习) 4. SpringData-JPA持久层入门案例(重点) 5. Easyui menu ...

  3. 第二篇：怕碰到是因为没掌握，来吧，zTree！

    一直以来看见web项目中的树就头疼.这次又给碰上了,什么也别说,这次自己整理一个版本出来实践一下.zTree v3.2的API界面非常清爽,但是在查看API之前,你需要自己先实践一下,知道基本的概念和 ...

  4. zTree和SweetAlert插件初探

    1.zTree插件简介 zTree是一个依靠 jQuery实现的多功能“树插件”.优异的性能.灵活的配置.多种功能的组合是zTree最大优点.专门适合项目开发,尤其是树状菜单.树状数据的Web显示.权 ...

  5. zTree开发下拉树

    最近,因为工作需要一个树形下拉框的组件,经过查资料一般有两种的实现方法.其一,就是使用zTree实现:其二,就是使用easyUI实现.因为公司的前端不是使用easyUI设计的,故这里我选择了zTree ...

  6. Ztree的简单使用和后台交互的写法（二）

    针对Ztree的简单使用和后台交互的写法(一)中的树进行改进 1.增加节点的权限 由页面的当前用户,决定树的根节点 然后动态获取树的详细节点: 初始化函数为: function init(){ //初 ...

  7. Ztree的简单使用和后台交互的写法（一）

    一.引入ztree的头文件 <!-- 引入ztree/--> <script type="text/javascript" src="${pageCon ...

  8. jQuery Ztree基本用法

    1.首先在页面上有<ul/>标签 <ul id="tree" class="ztree"></ul> 2.定义ztree的配 ...

  9. jq生成目录文件树jQuery Ztree基本用法

    转自:http://www.cnblogs.com/linjiqin/p/4547452.html 1.首先在页面上有<ul/>标签 ? 1 <ul id="tree&qu ...

随机推荐

  1. Python学习第十四课——面向对象基本思想part1

    面向对象的基本思想 # 写法1 person1 = { 'name': 'hanhan', ', 'sex': '男' } def xue_xi(person): print('%s在学习' % pe ...

  2. 最近公共祖先(LCA)问题

    目录 最近公共祖先 1.向上标记法 2.树上倍增法 3.Tarjan算法 最近公共祖先 定义:给定一颗有根树,若结点 z 既是 x 的祖先,也是 y 的祖先,则称 z 是 x,y 的公共祖先.在 x, ...

  3. 「Luogu P3078 [USACO13MAR]扑克牌型Poker Hands」

    本题有\(O(N)\)的优秀做法,但是因为在考场上不一定能想到,就来分享一种\(O(N\log_2N)\)的做法.虽然有点慢,但是可以过. 前置芝士 线段树:提高组及以上必备内容,不会的同学可以学习一 ...

  4. python学习 —— seaborn、matplotlib、pandas、numpy package的混合使用

    这里使用了Titanic Machine learning数据集,然后通过Seaborn的函数来拟合和绘制回归线,matplotlib进行可视化. 先来一个简单的测试: import pandas a ...

  5. 收藏 40 2 CPD （广告合作方式）

    CPD,Cost per day的缩写,意思是按天收费,是一种广告合作方式. 在实际的广告合作中根据行业不同还包括Cost per Download的缩写含义,意思是依据实际下载量收费.   “CPD ...

  6. Windows密码安全性测试

    一.本地管理员密码如何直接提取 1.1直接通过mimikatz读取管理员密码 (不能交互式,不能在webshell下用,图形化界面很好用) 第一条:privilege::debug          ...

  7. gets和scanf区别

    scanf 和 gets 读取字符串 深入了解scanf()/getchar()和gets()等函数 scanf与gets函数读取字符串的区别 今天看到一段话,大致是说gets比scanf()快,有点 ...

  8. java编程，通过代理服务器访问外网的FTP

    有些时候我们的网络不能直接连接到外网, 需要使用http或是https或是socket代理来连接到外网, 这里是java使用代理连接到外网的一些方法, 希望对你的程序有用.方法一:使用系统属性来完成代 ...

  9. python正则表达式错误集

    这篇博文主要记载一些个人的(python)正则表达式的常见错误以及误区,所以,不一定全面,不一定具有权威.但我会把每个例子列出来,争取用事实说话. 大括号中空格问题 In [15]: re.match ...

  10. 牛客NOIPtg day5 B-demo的gcd

    一句话题意:给定长度为n的序列,求任意两两之间gcd的积mod 998244353的值. 好像是莫比乌斯反演板子题???(反正noip估计不考这种毒瘤 考场上想到一个类似正解的思路 好像摊下来最多处理 ...