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. 如何解决“There is no locally stored library”的问题

    今天我在用pyCharm开发网页的时候,用cdn引入js文件,但是程序报错,说“there is no locally stored library”.于是我上网找到了解决方案,特整理如下: 在你报错 ...

  2. 小程序视图层（xx.xml)和逻辑层(xx.js)

    整个系统分为两块视图层(View)和逻辑层(App Service) 框架可以让数据与视图非常简单地保持同步.当做数据修改的时候,只需要在逻辑层修改数据,视图层就会做相应的更新. 通过这个简单的例子来 ...

  3. MVP 模式简单易懂的介绍方式

    为什么用Android MVP 设计模式? 当项目越来越庞大.复杂,参与的研发人员越来越多的时候,MVP 模式 的优势就充分显示出来了. MVP 模式是 MVC 模式在 Android 上的一种变体, ...

  4. java基础(四) java运算顺序的深入解析

    1. 从左往右的计算顺序   与C/C++不同的是,在Java中,表达式的计算与结果是确定的,不受硬件与环境的影响.如: int i = 5; int j = (i++) + (i++) +(i++) ...

  5. 三、vue如何配置路由 、获取路由的参数、部分刷新页面、缓存页面

        1.路由配置:所有的启动文件都在最初始的main.js文件里面,这个文件中首先需要引入: 2.路由文件配置说明: 3.如何获取页面url的参数? this.$route.query 4.页面之 ...

  6. centos安装redis，并设置开机自动启动项

    安装Redis 1.下载.解压.编译.安装 下载.解压 https://redis.io/download 官网下载redis的*.tar.gz安装包.版本可根据自己需要下载. tar -zxvf r ...

  7. 回归JavaScript基础（二）

    主题:在HTML中使用JavaScript. 要想把JavaScript放到网页中,就必须涉及到Web的核心语言HTML.向HTML页面中插入JavaScript的主要方法,就是使用<scrip ...

  8. 6.JXL操作Excel

    一.简介 jxl是一个韩国人写的java操作excel的工具, 在开源世界中,有两套比较有影响的API可 供使用,一个是POI,一个是jExcelAPI.其中功能相对POI比较弱一点.但jExcelA ...

  9. SQLSERVER2012里的扩展事件初尝试（下）

    SQLSERVER2012里的扩展事件初尝试(下) SQLSERVER2012里的扩展事件初尝试(上) 我们继续文章扩展事件在Denali CTP3里的新UI(二)里的这个实验 脚本文件下载:http ...

  10. 如何在定制化组件中实现并使用v-model

    https://alligator.io/vuejs/add-v-model-support/