bootstrap插件treeview实现全选父节点下所有子节点和反选功能
更新时间:2017年07月21日 15:39:28 作者:Rain
这篇文章主要为大家详细介绍了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); } } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
- bootstrap treeview 扩展addNode方法动态添加子节点的方法
- BootStrap TreeView使用实例详解
- JS树形菜单组件Bootstrap TreeView使用方法详解
- 浅析使用BootStrap TreeView插件实现灵活配置快递模板
- Bootstrap树形菜单插件TreeView.js使用方法详解
- 浅析BootStrap Treeview的简单使用
- 基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
- 基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合
- bootstrap-treeview自定义双击事件实现方法
- bootstrap-Treeview实现级联勾选
相关文章
Json对象和字符串互相转换json数据拼接和JSON使用方式详细介绍(小结)
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.这篇文章主要介绍了Json对象和字符串互相转换json数据拼接和JSON使用方式详细介绍(小结)的相关资料,需要的朋友可以参考下2016-10-10用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法
下面小编就为大家带来一篇用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2016-10-10
最新评论