Bootstrap插件TreeView选择父节点选择功能的所有子节点下
当选择父节点时,也会选择父节点下的所有子节点来查看代码。
1,HTML代码
TreeView的使用
2,JSON数据
功能gettvstatedata(){
无功defaultdata = {
{
正文:'parent 1,
链接:# parent1,
标签:{一},
状态:{
检查:真的
},
节点:{
{
正文:'1',
链接:#孩子,
标签:{ 2},
节点:{
{
正文:'grandchild 1,
链接:# grandchild1,
Tags: {'0'}
},
{
正文:'grandchild 2,
链接:# grandchild2,
标签:{ 0}
}
}
},
{
正文:'2',
链接:# $child2,
标签:{ 0}
}
}
},
{
正文:'parent 2,
链接:# parent2,
标签:{ 0},
节点:{
{
正文:'1',
链接:#孩子,
标签:{ 2},
节点:{
{
正文:'grandchild 1,
链接:# grandchild1,
标签:{ 0}
},
{
正文:'grandchild 2,
链接:# grandchild2,
标签:{ 0}
}
}
},
{
正文:'2',
链接:# $child2,
标签:{ 0}
}
}
},
{
正文:'parent 3,
链接:# parent3
},
{
正文:'parent 4,
链接:# parent4,
标签:{ 0}
},
{
正文:'parent 5,
链接:# parent5,
标签:{ 0}
}
};
返回defaultdata;
}
3、JS数据绑定、负载TreeView
$(函数(){())
checkabletree = $(var $ ' # TreeView支票)
TreeView({。
数据:(gettvstatedata), / /数据
显示图标:假,
showcheckbox:真,
级别:1,
onnodechecked:功能(事件、节点){ / /选择的节点
var = getchildnodeidarr选择第一个book节点(节点); / /得到的所有子节点
如果(选择第一个book节点){ / /子节点不为空,然后选择所有子节点
$(# TreeView支票)。Treeview('checknode,{选择第一个book节点,沉默:{真} });
}
var = $(# parentNode TreeView支票)。Treeview(getnode
setparentnodecheck(节点);
},
onnodeunchecked:功能(事件、节点){ / /选中节点
var = getchildnodeidarr选择第一个book节点(节点); / /得到的所有子节点
如果(选择第一个book节点){ / /子节点不为空,然后选中所有子节点
$(# TreeView支票)。Treeview('unchecknode,{选择第一个book节点,沉默:{真} });
}
},
OnNodeExpanded:
函数(事件,数据){
如果(data.nodes定义data.nodes | = = = = = | = null){
否则,如果}(数据{ { 0 } = 2){
警报(标签2 );
{人}
警报(1111);
}
}
});
});
4。当父节点被选中/未选中时,所有的子节点都被选中/未选中,当所有的子对象被选中时,父节点被选中。
功能getchildnodeidarr(节点){
var { };
如果(节点){
对于(在节点中的x){
Ts.push(节点。节点{X}。NodeID);
如果(节点,节点,{节点){
无功getnodediedai = getchildnodeidarr(节点。节点{X});
(J为getnodediedai){
Ts.push(getnodediedai {,});
}
}
}
{人}
Ts.push(节点。节点ID);
}
Return ts;
}
功能setparentnodecheck(节点){
var = $(# parentNode TreeView支票)。Treeview(getnode
如果(其父节点。节点){
无功checkedcount = 0;
(X为其父节点。节点){
如果(其父节点。节点{X}。状态。检查){
checkedcount + +;
{人}
打破;
}
}
如果(checkedcount =父节点。节点。长度){
$(# TreeView支票)。Treeview(Checknode
setparentnodecheck(parentNode);
}
}
}
以上是本文的全部内容,希望能对您有所帮助,希望大家多多支持。