zTree实现树形节点勾选效果图

使用流程：

  • JS文件导入和引用
  • css文件导入和引用
  • demo代码

JS、css文件导入和引用

3个核心JS文件及两个核心css文件

demo相关代码：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

</head>

<body>

    <script src="js/jquery-3.3.1.min.js"></script>

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

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

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

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

    <div class="modal-body">

        <ul id="treeDemo" class="ztree" style="width:260px; overflow:auto;"></ul>

    </div>

    <button id="clickThis" type="button">点我</button>

</body>

</html>

<script type="text/javascript">

      var setting = {

          check: {

             enable: true

          },

          data: {

             simpleData: {

                enable: true

             }

          }

      };

      var zNodes =[

          { id:1, pId:0, name:"can check 1",open:true},

          { id:11, pId:1, name:"can check 1-1", open:true},

          { id:111, pId:11, name:"can check 1-1-1"},

          { id:112, pId:11, name:"can check 1-1-2"},

          { id:12, pId:1, name:"can check 1-2", open:true},

          { id:121, pId:12, name:"can check 1-2-1"},

          { id:122, pId:12, name:"can check 1-2-2"},

          { id:2, pId:0, name:"can check 2", checked:true, open:true},

          { id:21, pId:2, name:"can check 2-1"},

          { id:22, pId:2, name:"can check 2-2", open:true},

          { id:221, pId:22, name:"can check 2-2-1", checked:true},

          { id:222, pId:22, name:"can check 2-2-2"},

          { id:23, pId:2, name:"can check 2-3"}

      ];

      function setCheck() {

          var zTree = $.fn.zTree.getZTreeObj("treeDemo"),

          type = { "Y":'ps', "N":'ps'};

          zTree.setting.check.chkboxType = type;

      }

      $(document).ready(function(){

          $.fn.zTree.init($("#treeDemo"), setting, zNodes);

          setCheck();

    });

    $("#clickThis").click(function () {

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

        // 获取选中的节点

        nodes = treeObj.getCheckedNodes(true);

        console.log("获取选中的节点");

        console.log(nodes);

        // 获取选中节点的id

        v = "";

        arr1 = [];

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

            v += nodes[i].name + ",";//获取选中节点的name值

            alert(nodes[i].id);    //获取选中节点的id值

            arr1.push(nodes[i].id);

        }

        console.log("获取选中节点的name值");

        console.log(v);

        console.log("获取选中节点的id值");

        console.log(arr1);

        // 获取所有节点的id

        code = $("#tree").data("id");

        arr2 = [];

        for (var i in code) {

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

            arr2.push(code[i].id);

        }

        console.log("获取所有节点的id");

        console.log(arr2);

        // 获取没有选中节点的id

        arr3 = [];

        for (var x = 0; x < arr2.length; x++) {

            a = $.inArray(arr2[x], arr1);

            if (a == -1) {

                arr3.push(arr2[x]);

            }

        }

        console.log("获取没有选中节点的id");

        console.log(arr3);

    });

</script>

第三方开源插件zTree的使用的更多相关文章

  1. ASP.NET中使用开源插件zTree的小结

    在最近的项目应用中,找到了zTree免费的好东西,这里总结一下: 源码下载:http://www.ztree.me/ 效果是酱紫的: 前台代码: 样式和脚本 <link rel="st ...

  2. iOS常用第三方开源框架和优秀开发者博客等

    博客收藏iOS开发过程好的开源框架.开源项目.Xcode工具插件.Mac软件.文章等,会不断更新维护,希望对你们有帮助.如果有推荐或者建议,请到此处提交推荐或者联系我. 该文档已提交GitHub,点击 ...

  3. iOS - CocoaPods 第三方开源框架管理

    1.CocoaPods CocoaPods 是一个负责管理 iOS 项目中第三方开源库的工具.CocoaPods 的项目源码在 Github 上管理.该项目开始于 2011 年 8 月 12 日,在这 ...

  4. iOS项目中常用的第三方开源库

    1.项目使用的第三方开源库 项目使用了CocoaPods(类似java中的maven)管理常用的第三方库,一些特殊的单独引用,下面介绍下比较好用的几个. (1)AFNetworking 目前比较推荐的 ...

  5. Autolayout 第三方开源库

    转载自:http://blog.csdn.net/hmt20130412/article/details/46638625 今天才发现CSDN支持markdown了…还是给出新博客地址:Autolay ...

  6. IOS-常用第三方开源框架介绍

    iOS开发-常用第三方开源框架介绍(你了解的ios只是冰山一角) 时间:2015-05-06 16:43:34      阅读:533      评论:0      收藏:0      [点我收藏+] ...

  7. iOS开发-常用第三方开源框架介绍

    iOS开发-常用第三方开源框架介绍 图像: 1.图片浏览控件MWPhotoBrowser        实现了一个照片浏览器类似 iOS 自带的相册应用,可显示来自手机的图片或者是网络图片,可自动从网 ...

  8. 第三方开源库和jar包的区别

    jar包和第三方开源库的根本区别在于,开源库的功能比jar包功能更强大,通过引入库项目可以访问java文件以及该开源库项目下的资源文件,例如图片,layout等文件 jar包中只能放class文件 引 ...

  9. 第三方登录插件.NET版XY.OAuth-CSharp

    XY.OAuth-CSharp GitHub:XY.OAuth-CSharp OSChina:XY.OAuth-CSharp 第三方登录插件.NET版 使用 首先,从NuGet上安装"XY. ...

随机推荐

  1. 用数组指针遍历数组,FOR/FOREACH遍历数组

    1. 用数组指针遍历一维数组 <?php header("Content-type:text/html;charset=utf-8"); /*用数组指针遍历一位数组的值*/ ...

  2. python学习之老男孩python全栈第九期_day016作业

    1. 请利用filter()过滤出1~100中平方根是整数的数,即结果应该是: [1, 4, 9, 16, 25, 36, 49, 64, 81, 100] import math def func( ...

  3. cf1097D. Makoto and a Blackboard(期望dp)

    题意 题目链接 Sol 首先考虑当\(n = p^x\),其中\(p\)是质数,显然它的因子只有\(1, p, p^2, \dots p^x\)(最多logn个) 那么可以直接dp, 设\(f[i][ ...

  4. 正能量：You Are the Best

    Success comes from knowing that you did your best to become the best that you are capable of becomin ...

  5. 【java错误】System.out.println()出错

    今天想测试java的System的类,没想到居然出错了.在同一个包下的java文件System全错,而其他包中的System没错.上网查了下资料,原来我是重定义了System类,覆盖了原来的Syste ...

  6. 如何发挥ERP系统中的财务监控职能？

    ERP系统的管理理念与特点 ERP,是整合了企业管理理念.业务流程.基础数据.人力物力.计算机硬件和软件于一体的企业资源管理系统.ERP系统运用信息技术将企业的资金流.物资流.信息流进行有效的集成,使 ...

  7. 2018-10-15 21:07:38 c language

    2018-10-15 21:07:38 c language C语言编译器,神奇的魔法师 在类 UNIX 系统(Linux.Mac OS 等)下,可执行程序没有特定的后缀,系统根据文件的头部信息来判断 ...

  8. text-overflow修剪文本，以省略号显示

    overflow: hidden;  必须设置,不然无法修剪文本 white-space: nowrap;  规定段落中的文本不进行换行 text-overflow: ellipsis;  当文本溢出 ...

  9. MongoDB用户配置

    MongoDB学习笔记—权限管理 阅读目录 1.MongoDB权限介绍 2 MongoDB添加管理员账户 3 MongoDB开启用户权限验证 4 MongoDB的roles角色简单介绍 5 Mongo ...

  10. maven(19)-生命周期和内置插件

    生命周期和依赖一样,是maven中最重要的核心概念.平时在使用maven时并不一定需要知道生命周期,但是只有明白了生命周期,才能真正理解很多重要的命令和插件配置. default生命周期 defaul ...