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. Python 正则 re.sub替换

    # 正则将匹配到的两个字段,都替换成某个值import re s0 = 'BOY and GIRL' s1 = re.sub(r'BOY|GIRL', 'HUMAN', s0) print s1 # ...

  2. Bash：常用命令工具-uniq

    NAME uniq - report or omit repeated lines SYNOPSIS uniq [OPTION]... [INPUT [OUTPUT]] DESCRIPTION Fil ...

  3. flask-login的使用3

    # coding=utf-8 import flask app = flask.Flask(__name__) app.secret_key = 'super secret string' impor ...

  4. pair

    pair的类型: pair 是 一种模版类型.每个pair 可以存储两个值.这两种值无限制.也可以将自己写的struct的对象放进去.. 功能:pair将一对值组合成一个值,这一对值可以具有不同的数据 ...

  5. Git——远程操作详解

    转载自:http://www.ruanyifeng.com/blog/2014/06/git_remote.html 作者: 阮一峰 日期: 2014年6月12日 Git是目前最流行的版本管理系统,学 ...

  6. Python这个缩进让我焦头烂额！最奇葩的缩进...

        例如如下程序.     运行上面代码,如果输入年龄小于20,将会看到如下运行结果.     从上面代码可以看出,如果输入的年龄大于20,则程序会执行整体缩进的代码块. 再次重复:Python不 ...

  7. Linux pyenv环境安装

    python工作环境管理 pyenv安装: git clone https://github.com/pyenv/pyenv ~/.pyenv echo 'export PYENV_ROOT=&quo ...

  8. springboot学习入门之一---基本了解

    1springboot基本了解 1.1概述 Spring Boot不是一门新技术,本质上就是spring. 特性: 1) 零配置(或很少配置) 2) 四个核心:(ASCA) 3.1)自动配置:spri ...

  9. Oracle EBS 附件功能

    SELECT fde.table_name, fde.data_object_code, fdet.user_entity_name, fdet.user_entity_prompt, fat.app ...

  10. 基于JVM（内存）和Tomcat性能调优

    一.总结前一天的学习 从“第三天”的性能测试一节中,我们得知了决定性能测试的几个重要指标,它们是: ü   吞吐量 ü   Responsetime ü   Cpuload ü   MemoryUsa ...