实现bootstrap-treeview选中某节点时同时选中父节点和子节点
程序员文章站
2022-06-14 10:34:16
...
在使用bootstrap-treeview插件的时候,需要实现选中某个节点时同时选中其祖辈节点和其子孙节点,难受的是它貌似并没有实现这样的功能,只能自己动手实现了,我这里是直接修改源代码实现的。
- 添加选中父辈节点、子孙节点的处理函数
Tree.prototype.setCheckedChildrenState = function(node, state, options) {
//选中后子孙节点
this.setCheckedState(node, state, options);
if(node.nodes != null && node.nodes.length > 0) {
for(var i = 0; i < node.nodes.length; i++) {
this.setCheckedChildrenState(node.nodes[i], node.state.checked, options);
}
}
};
Tree.prototype.setCheckedParentState = function(node, state, options) {
this.setCheckedState(node, state, options);
//选中祖辈节点
if(node.parentId != undefined) {
var parent_ = this.nodes[node.parentId];
this.setCheckedState(parent_, state, options);
}
};
- 找到函数
Tree.prototype.toggleCheckedState = function(node, options) {
if (!node) return;
this.setCheckedState(node, !node.state.checked, options);
}
- 替换 this.setCheckedState(node, !node.state.checked, options);
this.setCheckedChildrenState(node, !node.state.checked, options);
if(node.state.checked) {
this.setCheckedParentState(node, node.state.checked, options);
}
即可完成选择回溯选择祖辈节点和子孙节点。
这里有个疑问就是我们改变某个节点时会把所有的子节点也做对应的改变,回溯祖辈节点的时候,又不会把对应的子节点做相应的改变,似乎存在矛盾。
最后附上修改后的js文件(https://download.csdn.net/download/u014420690/11135605)
下一篇: SQLite数据库操作类
推荐阅读
-
解决Jstree 选中父节点时被禁用的子节点也会选中的问题
-
Web网页树形列表中实现选中父节点则子节点全选和不选中父则子全不选
-
实现bootstrap-treeview选中某节点时同时选中父节点和子节点
-
Jstree选中父节点时禁用子节点也被选中
-
zTree实现清空选中第一个节点和所有子节点的方法详解
-
解决Jstree 选中父节点时被禁用的子节点也会选中的问题
-
在Jstree中如何实现选中父节点时被禁用的子节点也会选中
-
Jstree选中父节点时禁用子节点也被选中
-
Jstree 选中父节点时被禁用的子节点也会选中解决办法
-
vue+ elementv UI 使用Tree组件实现定位展开某一个父节点并选中该父节点下的某一个子节点