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 相关文章推荐
js禁止小键盘输入数字功能代码
Aug 01 Javascript
js滚动条回到顶部的代码
Dec 06 Javascript
js获取及判断键盘按键的方法
Dec 01 Javascript
jQuery实现带水平滑杆的焦点图动画插件
Mar 08 Javascript
Bootstrap面板学习使用
Feb 09 Javascript
vue学习之mintui picker选择器实现省市二级联动示例
Oct 12 Javascript
three.js中文文档学习之通过模块导入
Nov 20 Javascript
javascript实现获取一个日期段内每天不同的价格(计算入住总价格)
Feb 05 Javascript
JavaScript事件委托原理与用法实例分析
Jun 07 Javascript
vue + element-ui的分页问题实现
Dec 17 Javascript
Vue组件基础用法详解
Feb 05 Javascript
Python版实现微信公众号扫码登陆
May 28 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插件 HTMLPurifier HTML解析器
2013/07/01 PHP
php float不四舍五入截取浮点型字符串方法总结
2013/10/28 PHP
PHP查询网站的PR值
2013/10/30 PHP
PHP字符串中特殊符号的过滤方法介绍
2014/02/18 PHP
php通过session防url攻击方法
2014/12/10 PHP
php中smarty模板条件判断用法实例
2015/06/11 PHP
PHP 错误处理机制
2015/07/06 PHP
使用Jquery搭建最佳用户体验的登录页面之记住密码自动登录功能(含后台代码)
2011/07/10 Javascript
Javascript绝句欣赏 一些经典的js代码
2012/02/22 Javascript
jquery 跳到顶部和底部动画2句代码简单实现
2013/07/18 Javascript
使用原生JS实现弹出层特效
2014/12/22 Javascript
每日十条JavaScript经验技巧(一)
2016/06/23 Javascript
JS实现的简易拖放效果示例
2016/12/29 Javascript
jQuery.Validate表单验证插件的使用示例详解
2017/01/04 Javascript
vue组件实例解析
2017/01/10 Javascript
基于JavaScript实现的希尔排序算法分析
2017/04/14 Javascript
JS实现无缝循环marquee滚动效果
2017/05/22 Javascript
Vue项目组件化工程开发实践方案
2018/01/09 Javascript
vue动态路由配置及路由传参的方式
2018/05/23 Javascript
ES6入门教程之变量的解构赋值详解
2019/04/13 Javascript
微信小程序使用字体图标的方法
2019/05/23 Javascript
微信小程序开发技巧汇总
2019/07/15 Javascript
VUE写一个简单的表格实例
2019/08/06 Javascript
JavaScript创建、读取和删除cookie
2019/09/03 Javascript
Vue中jsx不完全应用指南小结
2019/11/01 Javascript
[22:07]DOTA2-DPC中国联赛 正赛 iG vs Magma 选手采访
2021/03/11 DOTA
Python实现的简单排列组合算法示例
2018/07/04 Python
德国低价购买灯具和家具网站:Style-home.de
2016/11/25 全球购物
c语言常见笔试题总结
2016/09/05 面试题
幼儿园植树节活动总结
2014/07/04 职场文书
中华魂放飞梦想演讲稿
2014/08/26 职场文书
食堂采购员岗位职责
2015/04/03 职场文书
《卧薪尝胆》读后感3篇
2019/12/26 职场文书
Python基础数据类型tuple元组的概念与用法
2021/08/02 Python
Redis Cluster 集群搭建你会吗
2021/08/04 Redis
Java中CyclicBarrier和CountDownLatch的用法与区别
2021/08/23 Java/Android