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学习笔记之 Ajax操作篇(三) - 过程处理
Jun 23 Javascript
JavaScript lastIndexOf方法入门实例(计算指定字符在字符串中最后一次出现的位置)
Oct 17 Javascript
JavaScript 学习笔记之操作符(续)
Jan 14 Javascript
JavaScript跨平台的开源框架NativeScript
Mar 24 Javascript
js的flv视频播放器插件使用方法
Jun 23 Javascript
jQuery控制div实现随滚动条滚动效果
Jun 07 Javascript
JS中使用FormData上传文件、图片的方法
Aug 07 Javascript
最全面的百度地图JavaScript离线版开发
Sep 10 Javascript
解决Vue 浏览器后退无法触发beforeRouteLeave的问题
Dec 24 Javascript
浅谈js获取ModelAndView值的问题
Mar 28 Javascript
vue.js实现只能输入数字的输入框
Oct 19 Javascript
vue中音频wavesurfer.js的使用方法
Feb 20 Vue.js
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 URL编码解码函数代码
2009/03/10 PHP
php checkbox 取值详细说明
2010/08/19 PHP
php漏洞之跨网站请求伪造与防止伪造方法
2013/08/15 PHP
PHP+jQuery 注册模块的改进(三):更新到Smarty3.1
2014/10/14 PHP
php脚本守护进程原理与实现方法详解
2017/07/20 PHP
精选的10款用于构建良好易用性网站的jQuery插件
2011/01/23 Javascript
js通过地址栏给action传值(中文乱码全是问号)
2013/05/02 Javascript
javascript模拟实现C# String.format函数功能代码
2013/11/25 Javascript
基于NodeJS的前后端分离的思考与实践(一)全栈式开发
2014/09/26 NodeJs
JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件
2015/12/20 Javascript
基于vue的短信验证码倒计时demo
2017/09/13 Javascript
Windows下Node.js安装及环境配置方法
2017/09/18 Javascript
LayUI表格批量删除方法
2018/08/15 Javascript
vue动态删除从数据库倒入列表的某一条方法
2018/09/29 Javascript
Javascript 对象(object)合并操作实例分析
2019/07/30 Javascript
基于Nuxt.js项目的服务端性能优化与错误检测(容错处理)
2019/10/23 Javascript
[02:09]EHOME夺得首届辉夜杯冠军—现场颁奖仪式
2015/12/28 DOTA
[40:03]Liquid vs Optic 2018国际邀请赛淘汰赛BO3 第一场 8.21
2018/08/22 DOTA
在主机商的共享服务器上部署Django站点的方法
2015/07/22 Python
Python八大常见排序算法定义、实现及时间消耗效率分析
2018/04/27 Python
在IPython中执行Python程序文件的示例
2018/11/01 Python
在python中实现调用可执行文件.exe的3种方法
2019/07/07 Python
python实现简单银行管理系统
2019/10/25 Python
Python numpy.zero() 初始化矩阵实例
2019/11/27 Python
Python图像处理二值化方法实例汇总
2020/07/24 Python
简单介绍HTML5中的文件导入
2015/05/08 HTML / CSS
Joseph官网:英国小众奢侈品牌
2019/05/17 全球购物
仓库管理专业个人自我评价范文
2013/11/11 职场文书
珍珠奶茶店创业计划书
2014/01/11 职场文书
团购业务员岗位职责
2014/03/15 职场文书
班级年度安全计划书
2014/05/01 职场文书
房产公证委托书范本
2014/09/20 职场文书
幼儿园见习报告
2014/10/30 职场文书
2014年工人工作总结
2014/11/25 职场文书
2015年小学中秋节活动总结
2015/03/23 职场文书
社区安全温馨提示语
2015/07/14 职场文书