bootstrap插件treeview实现全选父节点下所有子节点和反选功能
时间:2019-03-30
本文章向大家介绍bootstrap插件treeview实现全选父节点下所有子节点和反选功能,主要包括bootstrap插件treeview实现全选父节点下所有子节点和反选功能使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
项目需要实现权限管理,使用前端框架bootstrap,所以就直接选用了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); } } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- 缓冲区溢出攻击初学者手册(更新版)
- 在Python机器学习中如何索引、切片和重塑NumPy数组
- HelloWorld,我的第一趟旅程出发点
- Android OpenGL开发实践 - GLSurfaceView对摄像头数据的再处理
- 走进科学:对七夕“超级病毒”XX神器的逆向分析
- 机器学习 - 朴素贝叶斯分类器的意见和文本挖掘
- 认知指纹:颠覆性的身份认证技术
- 跟我学姿势:极客教你如何科学的看电影
- Discuz 5.x/6.x/7.x投票SQL注入分析
- 论如何高效的挖掘漏洞
- Rxjava + retrofit + dagger2 + mvp搭建Android框架
- 走进科学:如何正确的隐藏自己的行踪
- 比特儿(Bter.com) 比特币交易平台被盗事件全解析
- BitTorrent Bleep:无法被监控的聊天软件
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例