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. DOM节点树和元素树--深度遍历

    我们在阅读JS高级程序设计的时候,提到了节点树的概念.比如说: elem.parentNode---找elem的父节点: elem.childNodes---找elem的所有的直接子节点: elem. ...

  2. Jquery实现可拖动进度条demo

    html <div class="progress"> <div class="progress_bg"> <div class= ...

  3. 浅析javascript高阶函数

    什么是高阶函数:在数学和计算机科学中,高阶函数是至少满足下列一个条件的函数: 1. 接受一个或多个函数作为输入: 2. 输出一个函数.在数学中它们也叫做算子(运算符)或泛函.微积分中的导数就是常见的例 ...

  4. 0ctf2018 pwn

    前言 对 0ctf2018 的 pwn 做一个总结 正文 babystack 漏洞 非常直接的 栈溢出 ssize_t sub_804843B() { char buf; // [esp+0h] [e ...

  5. CSS 0.5px 细线边框的原理和实现方式

    细线边框的具体实现方法有:伪元素缩放或渐变,box-shadow模拟,svg画线,border-image裁剪等.要实现小于1px的线条,有个先决条件:屏幕的分辨率要足够高,设备像素比要大于1,即cs ...

  6. Java 8方法引用使用指南

    [编者按]本文作者为拥有15年 Java 开发经验的资深程序员 Per-Åke Minborg,主要介绍如何灵活地解析 Java 中的方法引用.文章系国内 ITOM 管理平台 OneAPM 编译呈现. ...

  7. Sublime Text 的使用笔记

    Sublime Text 是一个代码编辑器(Sublime Text 2,3是收费软件,但可以无限期试用),也是HTML和散文先进的文本编辑器.Sublime Text是由程序员Jon Skinner ...

  8. error MSB3552: Resource file "**/*.resx" cannot be found. [/ConsoleApp1.csproj]

    问题场景: 练习在docker下操作netcore,镜像为centos7,安装完netcore sdk 2.2后,执行操作: dotnet new consoledotnet run 出现报错: /u ...

  9. 使用Docker构建AspNetCore应用

    #Build Image Stage FROM microsoft/aspnetcore-build:2 AS build-env WORKDIR /api # 以下为优化还原,因为项目文件不常变动D ...

  10. KHFlatButton

    KHFlatButton https://github.com/kylehorn/KHFlatButton 效果: 对于自己做demo来说,每次设置button就不用这么折腾了,几句话就行了,非常爽: ...