treeview插件使用:根据子节点选中父节点

时间:2022-10-09 21:46:35

  鄙人公司没有专门的前端,所以项目开发中都是前后端一起抡。最近用bootstrap用的比较频繁,发现bootstrap除了框架本身的样式组件外,还提供了多种插件供开发者选择。本篇博文讲的就是bootstrap的一个树形插件bootstrap-treeview。

  最近项目权限模块中,需要将用户菜单做成可配置的。授权人员的授权操作是通过对树形菜单中的复选框进行勾选后保存来完成的,如下图所示:

treeview插件使用:根据子节点选中父节点

  bootstrap-treeview本身对勾选/取消的支持是没问题,问题在于复选框的业务逻辑上:

    ① 如果 勾选了父级节点,怎么让子节点全部变为勾选状态?

    ② 如果只选择了某个子节点,怎么让该节点所有的父节点全部变为选中状态?

  博主开发的时候也是问了度娘,但很多网友的分享让自己这样前端薄弱的人看得头大,所以项目功能实现后,特意整理了自己的简洁实现,如博友有更好的方法,欢迎告知,共同进步。

  首先,请求服务器后台获取的节点数据,通过树形插件的事件触发机制,在点击复选框做选中/取消操作的时候,去执行全选的代码:

function modify(id) {
BASE.ajax("permission/pers", {
id: id
}, function (data) {
$("#demoTree").treeview({
color: "#428bca",
data: data,
levels: 1, //显示时展开到几级
showIcon: false,
showCheckbox: true,
onNodeChecked: function (event, node) { //选中事件
checkAllNodes("checkNode", node);
},
onNodeUnchecked: function (event, node) { //取消事件
checkAllNodes("uncheckNode", node);
}
});
$("#modal").modal("show");
});
}

  然后,通过对选中的当前节点进行遍历,对遍历出的节点执行选中;如果子节点还有子节点,很简单,递归一下就能搞定:

function checkAllNodes(method, node) {
var $tree = $('#modifyTree');
$(node.nodes).each(function (a, b) {
//判断子节点存在,就执行相应的选中/取消事件。
//each回调函数中参量:a表示节点索引,b表示节点对象
$tree.treeview(method, [b.nodeId, {
silent: true
}]);
if (b.nodes) //递归调用
checkAllNodes(method, b);
});
}

  自此,点击父节点 选中/取消 所有子节点的功能就算ok了。基于同样的思想,要想实现选中某一子节点后同时选中所有的父节点,那么只需要在代码中继续添加:① 通过子节点判断父节点的存在;② 选中父节点;③ 递归判断。

于是,上面的函数代码中就可以这样添加:

function checkAllNodes(method, node) {
var $tree = $('#modifyTree');
if (node.parentId) {//如果父节点存在,选中/去除父节点
getParentNode(method, node, $tree);
}
$(node.nodes).each(function (a, b) {
$tree.treeview(method, [b.nodeId, {
silent: true
}]);
if (b.nodes)
checkAllNodes(method, b);
});
} function getParentNode(method, node, tree) {
tree.treeview(method, [node.parentId, {
silent: true
}]);
var pnode = tree.treeview('getNode', node.parentId);
if (pnode.parentId) //递归判断父节点是否还有父节点
getParentNode(method, pnode, tree);
}

  自此,上面提到的两个问题就算是大功告成了。。。吗?稍等,如果这就算完成了,这篇博文记录对我实在没有多大意义。正当我喜滋滋的以为功能实现了的时候,突然发现了很大的bug,就是在通过子节点选中所有父节点的功能实现中,选中是没有问题,可是当取消某个子节点,无论兄弟节点是否有选中,父节点都一并被取消掉了。这肯定是有问题的。所以,自己又对取消事件单独做了判断,判断取消的时候,是否还有兄弟节点是处于选中状态,如果有,那么父节点就不执行取消了。代码如下:

function getParentNode(method, node, tree) {
if (method == "uncheckNode") { //如果是取消事件,当判断兄弟节点是否存在
var arr = tree.treeview('getSiblings', node);//获取兄弟节点
for (var i = 0; i < arr.length; i++) {
var brotherNode = arr[i];
if (brotherNode.state.checked) { //判断兄弟节点是否用选中状态
return;
}
}
}
tree.treeview(method, [node.parentId, {
silent: true
}]);
var pnode = tree.treeview('getNode', node.parentId);
if (pnode.parentId)
getParentNode(method, pnode, tree);
}

  行文至此,上面的两个问题算是完美解决了。代码中的事件、属性,都是插件官网有详细说明的,插件使用过程中肯定需要根据业务需要去查询使用详情,再融合进自己的代码中的,不可生搬硬套。分享完结,希望能帮到一些人。如有疑惑或者更好的建议,留言讨论,不胜感激。。。

treeview插件使用:根据子节点选中父节点的更多相关文章

  1. &lbrack;extjs&rsqb; ExtJS4 treepanel 子节点选中父节点自动选中,选中父节点 子节点自动全部选中

    ExtJS4 treepanel 主要添加viewConfig重的代码: xtype:'treepanel', store: menuStore, id:'menuTreePanel', viewCo ...

  2. Web网页树形列表中实现选中父节点则子节点全选和不选中父则子全不选

                需要实现的功能:选中父节点对应子节点全选:不选中父节点,对应子节点也不选中 如下图所示,选中车队,对应车队中车辆也全部选中,以实现车队中所有车辆在地图上的显示. 选中cqupt ...

  3. vue&plus;element-ui之tree树形控件有关子节点和父节点之间的各种选中关系详解

    做后端管理系统,永远是最蛋疼.最复杂也最欠揍的事情,也永远是前端开发人员最苦逼.最无奈也最尿性的时刻.蛋疼的是需求变幻无穷,如同二师兄的三十六般变化:复杂的是开发难度寸步难行,如同蜀道难,难于上青天: ...

  4. jstree 取消选中父节点

    问题说明: 当选择子节点时,它的父节点只有一个子节点的情况下,默认会选中父节点. 当前应用场景: 不需要选中当前的父节点 实验截图: 修改部分: jstree.js 信息

  5. ztree 获取子节点所有父节点的name的拼接

    ztree 获取子节点所有父节点的name的拼接 //获取子节点,所有父节点的name的拼接字符串function getFilePath(treeObj){if(treeObj==null)retu ...

  6. JS获取子节点、父节点和兄弟节点的方法实例总结

    转自:https://www.jb51.net/article/143286.htm 本文实例讲述了JS获取子节点.父节点和兄弟节点的方法.分享给大家供大家参考,具体如下: 一.js获取子节点的方式 ...

  7. 红黑树之 原理和算法详细介绍&lpar;阿里面试-treemap使用了红黑树&rpar; 红黑树的时间复杂度是O&lpar;lgn&rpar; 高度&lt&semi;&equals;2log&lpar;n&plus;1&rpar;1、X节点左旋-将X右边的子节点变成 父节点 2、X节点右旋-将X左边的子节点变成父节点

    红黑树插入删除 具体参考:红黑树原理以及插入.删除算法 附图例说明   (阿里的高德一直追着问) 或者插入的情况参考:红黑树原理以及插入.删除算法 附图例说明 红黑树与AVL树 红黑树 的时间复杂度 ...

  8. SQL SERVER 2000 遍历父子关系数据的表(二叉树)获得所有子节点 所有父节点及节点层数函数

    ---SQL SERVER 2000 遍历父子关系數據表(二叉树)获得所有子节点 所有父节点及节点层数函数---Geovin Du 涂聚文--建立測試環境Create Table GeovinDu([ ...

  9. extjs4 treepanel 多个checkbox先中 多个节点选中 多级节点展开

    //<%@ page contentType="text/html; charset=utf-8" %> var checkedNodes = { _data:{}, ...

随机推荐

  1. 安装wampserver遇到,无法启动此程序,丢失MSVCR110&period;dll

    这个问题遇到多次了,根据网上的解决办法,下载这个动态链接库文件,安装到指定位置重启系统后还是解决不了,其实这个文件有时候是存在的也会出现这个问题.问题截图如下 其实这个我认为是系统缺少了相关组组件的安 ...

  2. C&num; 基础知识总结

    要学好C#,基础知识的重要性不言而喻,现将常用到的一些基础进行总结,总结如下: 1. 数据类型转换: 强制类型转换(Chart--> int):  char cr='A';   int i = ...

  3. checkbox全选-取消-再全选没有显示问题

    源码: <input type="checkbox" id="cleckAll" />全选 <div class="list&quo ...

  4. 设计模式23---设计模式之装饰模式(Decorator)(结构型)

    1.装饰模式讲解 1.1定义 动态的给一个对象添加一些额外的职责.就增加功能来说,装饰模式比生成子类更加灵活. 1.2装饰模式要点 透明的给一个对象增加功能,换句话说就是要给一个对象增加功能,但是不能 ...

  5. POJ1797 Heavy Transportation 【Dijkstra】

    Heavy Transportation Time Limit: 3000MS   Memory Limit: 30000K Total Submissions: 21037   Accepted:  ...

  6. Tkinter开发第一个桌面程序HelloWorld

    在Python3中是tkinter,Python2中是Tkinter Tkinter是Python 官方承认的标准 GUI 方案(de-facto standard),因为是Python自带安装,决定 ...

  7. 4&period;91Python数据类型之(6)元组

    前言 有时候,我们为了数值的安全性,不许用户修改数据,今天我们就来讲讲关于python不可变的数据类型--- 元组数据 目录 1.元组的基本定义 2.元组的基本操作 (一)元组的基本定义 1.元组的概 ...

  8. 使用cpanm安装perl相关模块

    cpanm是安装Perl模块的最方便的方法.自动下载安装依赖包.使用CPAN shell或下载源码包安装模块,遇到大量依赖关系,非常头痛.下面就是一例: 1. 安装cpanmcpanm其实是一个可执行 ...

  9. Oracle 与 mysql 建立透明网关

    1.1.1.   文档编写目的 项目上需要做与Mysql数据库的对接,然而Oracle与Mysql数据库是异构的,因此这里采用透明网关的方式来解决. 另,项目上的环境为APP:12.2.6 ; DB: ...

  10. wamp 修改www目录

    我的情况 Wamp版本:2.2 WAMP2.2安装目录:C:/ www目录:D:/wamp/www/ 变更目录:E:/HbuilderProjects/ 一 主要过程: (1)修改 D:\wamp\b ...