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. cakephp中使用大括号的形式避免用点号连接sql语句

    在cakephp中可以使用{}的形式来代替点号连接sql语句,减少出错的几率

  2. 简单的PHP的任务队列

    文章太长,不作过多介绍,反正,文章的头部就说明了大概的意思...原文如下:写了一个简单的队列任务处理.多进程任务,异步任务可能会用到这个(主要是命令行应用)比如,任务的某个一个环节速度十分不稳定,可能 ...

  3. Java Web应用开发工具

    java Web应用开发工具详细地址:https://my.oschina.net/gitosc/blog/1538466

  4. 安装php扩展redis (windows环境)

    首先十分感谢网络上支持开源分享的前辈们,资源真的太丰富了,虽然也有许多优秀的国外资源被墙了... 想要给php增加redis扩展第一步当然要知道自己使用的php版本以及一些配置.查看 phpinfo ...

  5. 菜鸟的HTML学习之路

    开发网站流程 确定风格.功能(论坛.留言板.支付.用户登录等). 美工制作网页效果图(首页.列表页.内容页). 制作人员切图排版,排成网页形式. 后台程序开始写程序. 前台与后台结合. HTML注释 ...

  6. Hive安装与应用过程

    1.  参考说明 参考文档: https://cwiki.apache.org/confluence/display/Hive/GettingStarted 2.  安装环境说明 2.1.  环境说明 ...

  7. redis HyperLogLog 基数估算

    HyperLogLog 可以接受多个元素的输入,返回输入元素的基数估算值基数,集合中不同元素的数量.如集合{1,2,3,1,2,3,4}的基数是4.估算,HyperLogLog算法返回的基数不是完全精 ...

  8. jsonp promise封装

    npm 安装jsonp import originJSONP from 'jsonp' export default function jsonp(url, data, option){ url += ...

  9. leetCode题解之寻找string中最后一个word的长度

    1.题目描述 返回一个 string中最后一个单词的长度.单词定义为没有空格的连续的字符,比如 ‘a’,'akkk'. 2.问题分析 从后向前扫描,如果string是以空格‘  ’结尾的,就不用计数, ...

  10. Oracle EBS 获取完全的值集信息

    SELECT fvs1.flex_value_set_name, fvs1.description, decode(upper(fvs1.longlist_flag), 'N', '值列表', 'Y' ...