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选取多个或单个元素的实现代码(用class)
Aug 22 Javascript
延时加载JavaScript代码提高速度
Dec 27 Javascript
深入了解JavaScript的逻辑运算符(与、或)
Dec 20 Javascript
小程序开发实战:实现九宫格界面的导航的代码实现
Jan 19 Javascript
JavaScript实现事件的中断传播和行为阻止方法示例
Jan 20 Javascript
AngularJS 最常用的八种功能(基础知识)
Jun 26 Javascript
VueJS 集成 Medium Editor的示例代码 (自定义编辑器按钮)
Aug 24 Javascript
JavaScript实现焦点进入文本框内关闭输入法的核心代码
Sep 20 Javascript
axios携带cookie配置详解(axios+koa)
Dec 28 Javascript
微信小程序实现3D轮播图效果(非swiper组件)
Sep 21 Javascript
vue调用本地摄像头实现拍照功能
Aug 14 Javascript
vue图片裁剪插件vue-cropper使用方法详解
Dec 16 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
神族 PROTOSS 概述
2020/03/14 星际争霸
使用PHP维护文件系统
2006/10/09 PHP
php设计模式之简单工厂模式详解
2014/09/04 PHP
一张表搞清楚php is_null、empty、isset的区别
2015/07/07 PHP
详解php中serialize()和unserialize()函数
2017/07/08 PHP
dojo 之基础篇(三)之向服务器发送数据
2007/03/24 Javascript
基于Jquery的仿照flash放大图片效果代码
2011/03/16 Javascript
javascript学习笔记(十一) 正则表达式介绍
2012/06/20 Javascript
jQuery on()方法示例及jquery on()方法的优点
2015/08/27 Javascript
基于jquery实现省市区三级联动效果
2015/12/25 Javascript
原生js实现autocomplete插件
2016/04/14 Javascript
浅谈JS之tagNaem和nodeName
2016/09/13 Javascript
微信小程序 wx.request(object) API详解及实例代码
2016/09/30 Javascript
JavaScript中绑定事件的三种方式及去除绑定
2016/11/05 Javascript
Vue 实用分页paging实例代码
2017/04/12 Javascript
JS身份证信息验证正则表达式
2017/06/12 Javascript
angularjs2中父子组件的数据传递的实例代码
2017/07/05 Javascript
VUE + UEditor 单图片跨域上传功能的实现方法
2018/02/08 Javascript
vue项目中播放rtmp视频文件流的方法
2020/09/17 Javascript
在Linux下调试Python代码的各种方法
2015/04/17 Python
Python中enumerate()函数编写更Pythonic的循环
2018/03/06 Python
python selenium 获取标签的属性值、内容、状态方法
2018/06/22 Python
Python异步操作MySQL示例【使用aiomysql】
2019/05/16 Python
pytorch实现mnist数据集的图像可视化及保存
2020/01/14 Python
一文了解python 3 字符串格式化 F-string 用法
2020/03/04 Python
解决Jupyter notebook中.py与.ipynb文件的import问题
2020/04/21 Python
Django项目创建及管理实现流程详解
2020/10/13 Python
详解webapp页面滚动卡顿的解决办法
2018/12/26 HTML / CSS
html5简介及新增功能介绍
2020/05/18 HTML / CSS
工程地质勘察专业大学生求职信
2013/10/13 职场文书
电子技术专业中专生的自我评价
2013/12/17 职场文书
职业生涯规划书的格式
2013/12/29 职场文书
大学毕业生个人自荐信范文
2014/01/08 职场文书
《玩具柜台前的孩子》教学反思
2014/02/13 职场文书
投标售后服务承诺书
2015/04/29 职场文书
承诺书怎么写 ?
2019/04/16 职场文书