bootstrap插件treeview实现全选父节点下所有子节点和反选功能


Posted in Javascript onJuly 21, 2017

项目需要实现权限管理,使用前端框架bootstrap,所以就直接选用了bootstrap的treeview扩展插件。先上图:

bootstrap插件treeview实现全选父节点下所有子节点和反选功能

选中父节点时,父节点下所有子节点也都全部选中,看代码

1、HTML代码

<h2>TreeView Checkable</h2>
<div id="treeview-checkable"></div>

2、Json数据

function getTvStateData() {
   var defaultData = [
    {
     text: 'Parent 1',
     href: '#parent1',
     tags: ['4'],
     state: {
      checked: true
     },
     nodes: [
      {
       text: 'Child 1',
       href: '#child1',
       tags: ['2'],
       nodes: [
        {
         text: 'Grandchild 1',
         href: '#grandchild1',
         tags: ['0']
        },
        {
         text: 'Grandchild 2',
         href: '#grandchild2',
         tags: ['0']
        }
       ]
      },
      {
       text: 'Child 2',
       href: '#child2',
       tags: ['0']
      }
     ]
    },
    {
     text: 'Parent 2',
     href: '#parent2',
     tags: ['0'],
     nodes: [
      {
       text: 'Child 1',
       href: '#child1',
       tags: ['2'],
       nodes: [
        {
         text: 'Grandchild 1',
         href: '#grandchild1',
         tags: ['0']
        },
        {
         text: 'Grandchild 2',
         href: '#grandchild2',
         tags: ['0']
        }
       ]
      },
      {
       text: 'Child 2',
       href: '#child2',
       tags: ['0']
      }
     ]
    },
    {
     text: 'Parent 3',
     href: '#parent3'
    },
    {
     text: 'Parent 4',
     href: '#parent4',
     tags: ['0']
    },
    {
     text: 'Parent 5',
     href: '#parent5',
     tags: ['0']
    }
   ];

   return defaultData;
  }

3、JS数据绑定,加载TreeView

$(function() {
 var $checkableTree = $('#treeview-checkable')
    .treeview({
     data: getTvStateData(), //数据
     showIcon: false,
     showCheckbox: true,
     levels: 1,
     onNodeChecked: function(event, node) { //选中节点
      var selectNodes = getChildNodeIdArr(node); //获取所有子节点
      if (selectNodes) { //子节点不为空,则选中所有子节点
       $('#treeview-checkable').treeview('checkNode', [selectNodes, { silent: true }]);
      }
      var parentNode = $("#treeview-checkable").treeview("getNode", node.parentId);
      setParentNodeCheck(node);
     },
     onNodeUnchecked: function(event, node) { //取消选中节点
      var selectNodes = getChildNodeIdArr(node); //获取所有子节点
      if (selectNodes) { //子节点不为空,则取消选中所有子节点
       $('#treeview-checkable').treeview('uncheckNode', [selectNodes, { silent: true }]);
      }
     },
     onNodeExpanded:
      function(event, data) {
       if (data.nodes === undefined || data.nodes === null) {
        
       } else if (data.tags[0] === "2") {
        alert("Tags 2");
       } else {
        alert("1111");
       }
      }
    });
 });

4、选中/取消选中父节点时,选中/取消选中所有子节点,以及选中所有子节点时,选中父节点

function getChildNodeIdArr(node) {
   var ts = [];
   if (node.nodes) {
    for (x in node.nodes) {
     ts.push(node.nodes[x].nodeId);
     if (node.nodes[x].nodes) {
      var getNodeDieDai = getChildNodeIdArr(node.nodes[x]);
      for (j in getNodeDieDai) {
       ts.push(getNodeDieDai[j]);
      }
     }
    }
   } else {
    ts.push(node.nodeId);
   }
   return ts;
  }

  function setParentNodeCheck(node) {
   var parentNode = $("#treeview-checkable").treeview("getNode", node.parentId);
   if (parentNode.nodes) {
    var checkedCount = 0;
    for (x in parentNode.nodes) {
     if (parentNode.nodes[x].state.checked) {
      checkedCount ++;
     } else {
      break;
     }
    }
    if (checkedCount === parentNode.nodes.length) {
     $("#treeview-checkable").treeview("checkNode", parentNode.nodeId);
     setParentNodeCheck(parentNode);
    }
   }
  }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery阻止同类型事件小结
Apr 19 Javascript
JS中for循序中延迟加载动态效果的具体实现
Aug 18 Javascript
可自定义速度的js图片无缝滚动示例分享
Jan 20 Javascript
jquery模拟alert的弹窗插件
Jul 31 Javascript
详解Node.js包的工程目录与NPM包管理器的使用
Feb 16 Javascript
jQuery 中ajax异步调用的四种方式
Jun 28 Javascript
单行 JS 实现移动端金钱格式的输入规则
May 22 Javascript
echarts学习笔记之箱线图的分析与绘制详解
Nov 22 Javascript
详解封装基础的angular4的request请求方法
Jun 05 Javascript
Angular脚手架开发的实现步骤
Apr 09 Javascript
在vue项目中使用codemirror插件实现代码编辑器功能
Aug 27 Javascript
在微信小程序中使用mqtt服务的方法
Dec 13 Javascript
Node接收电子邮件的实例代码
Jul 21 #Javascript
基于JavaScript实现无限加载瀑布流
Jul 21 #Javascript
原生JS实现自定义滚动条效果
Oct 27 #Javascript
JS HTML图片显示Canvas 压缩功能
Jul 21 #Javascript
JavaScript 用fetch 实现异步下载文件功能
Jul 21 #Javascript
详解vue 模版组件的三种用法
Jul 21 #Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
Jul 21 #Javascript
You might like
php通过array_merge()函数合并关联和非关联数组的方法
2015/03/18 PHP
CodeIgniter扩展核心类实例详解
2016/01/20 PHP
JavaScript 联动的无限级封装类,数据采用非Ajax方式,随意添加联动
2010/06/29 Javascript
jquery实现每个数字上都带进度条的幻灯片
2013/02/20 Javascript
js算法中的排序、数组去重详细概述
2013/10/14 Javascript
详细介绍8款超实用JavaScript框架
2013/10/25 Javascript
JS画线(实例代码)
2013/11/20 Javascript
浏览器图片选择预览、旋转、批量上传的JS代码实现
2013/12/04 Javascript
JS可以控制样式的名称写法一览
2014/01/16 Javascript
检查输入的是否是数字使用keyCode配合onkeypress事件
2014/01/23 Javascript
javascript 终止函数执行操作
2014/02/14 Javascript
解决Jquery鼠标经过不停滑动的问题
2014/03/03 Javascript
Ubuntu中搭建Nodejs开发环境过程分享
2014/06/01 NodeJs
jQuery中prop()方法用法实例
2015/01/05 Javascript
使用js实现的简单拖拽效果
2015/03/18 Javascript
js仿小米官网图片轮播特效
2016/09/29 Javascript
JavaScript实现图片懒加载(Lazyload)
2016/11/28 Javascript
bootstrap select下拉搜索插件使用方法详解
2017/11/23 Javascript
微信小程序JS加载esmap地图的实例详解
2019/09/04 Javascript
JS如何在不同平台实现多语言方式
2020/07/16 Javascript
JS实现密码框效果
2020/09/10 Javascript
Saltstack快速入门简单汇总
2016/03/01 Python
使用Python对Excel进行读写操作
2017/03/30 Python
Python设置在shell脚本中自动补全功能的方法
2018/06/25 Python
对Python的多进程锁的使用方法详解
2019/02/18 Python
pandas对dataFrame中某一个列的数据进行处理的方法
2019/07/08 Python
Python 二叉树的层序建立与三种遍历实现详解
2019/07/29 Python
python关于倒排列的知识点总结
2020/10/13 Python
阿里巴巴Oracle DBA笔试题答案-备份恢复类
2013/11/20 面试题
某公司.Net方向面试题
2014/04/24 面试题
机械工程师求职自我评价
2013/09/23 职场文书
中国入世承诺
2014/04/01 职场文书
淘宝客服专员岗位职责
2014/04/11 职场文书
观看《筑梦中国》纪录片心得体会
2016/01/18 职场文书
小学体育课教学反思
2016/02/16 职场文书
MySQL新手入门进阶语句汇总
2022/09/23 MySQL