bootstrap插件treeview实现全选父节点下所有子节点和反选功能

前端之家收集整理的这篇文章主要介绍了bootstrap插件treeview实现全选父节点下所有子节点和反选功能前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

项目需要实现权限管理,使用前端框架bootstrap,所以就直接选用了bootstrap的treeview扩展插件。先上图:

选中父节点时,父节点下所有子节点也都全部选中,看代码

1、HTML代码

TreeView Checkable

2、Json数据

return defaultData;
}

3、JS数据绑定,加载TreeView

Box: 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',{ 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 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相关文章