bootstrap-treeview使用

1.数据

var tree = [{
text: "车型a",
nodes: [{
text: "车系1",
},
{
text: "车系2"
}, {
text: "车系3"
}
]
},
{
text: "车型b",
nodes: [{
text: "车系4",
},
{
text: "车系5"
}, {
text: "车系6"
}
]
}, {
text: "车型c",
nodes: [{
text: "车系7",
},
{
text: "车系8"
}, {
text: "车系9"
}
]
}
];

 

2.方法拓展

var othertree = function(treedom) {
var othis = this;
othis.treedom = treedom;
othis.nodecheckedsilent = false;
othis.nodechecked = (event, node) => {
if(othis.nodecheckedsilent) {
return
}
othis.nodecheckedsilent = true;
othis.checkallparent(node);
othis.checkallson(node);
othis.nodecheckedsilent = false;
};

othis.nodeuncheckedsilent = false;
othis.nodeunchecked = (event, node) => {
if(othis.nodeuncheckedsilent) return;
othis.nodeuncheckedsilent = true;
othis.uncheckallparent(node);
othis.uncheckallson(node);
othis.nodeuncheckedsilent = false;
};

//选中全部父节点
othis.checkallparent = (node) => {
othis.treedom.treeview('checknode', node.nodeid, {
silent: true
});
var _siblings = othis.treedom.treeview('getsiblings', node.nodeid);
var _parentnode = othis.treedom.treeview('getparent', node.nodeid);
if(!("nodeid" in _parentnode)) {
return;
} else {
var _isallunchecked = true; //是否全部选中
for(var i in _siblings) {
if(!(_siblings[i].state.checked)) {
_isallunchecked = false;
break;
}
}
if(_isallunchecked) {
othis.checkallparent(_parentnode);
}
}
};

//取消全部父节点
othis.uncheckallparent = (node) => {
othis.treedom.treeview('unchecknode', node.nodeid, {
silent: true
});
var _siblings = othis.treedom.treeview('getsiblings', node.nodeid);
var _parentnode = othis.treedom.treeview('getparent', node.nodeid);
if(!("nodeid" in _parentnode)) {
return;
}
var _isallunchecked = true; //是否有一个没选中
for(var i in _siblings) {
if(!(_siblings[i].state.checked)) {
_isallunchecked = true;
break;
}
}
if(_isallunchecked) {
othis.uncheckallparent(_parentnode);
}

};

//级联选中所有子节点
othis.checkallson = (node) => {
othis.treedom.treeview('checknode', node.nodeid, {
silent: true
});
if(node.nodes != null && node.nodes.length > 0) {
for(var i in node.nodes) {
othis.checkallson(node.nodes[i]);
}
}
};

//级联取消所有子节点
othis.uncheckallson = (node) => {
othis.treedom.treeview('unchecknode', node.nodeid, {
silent: true
});
if(node.nodes != null && node.nodes.length > 0) {
for(var i in node.nodes) {
othis.uncheckallson(node.nodes[i]);
}
}
};

}

 

 

3.使用

function inittreeview() {
var _othertree = new othertree($tree_view);
$tree_view.treeview({
data: tree,
showcheckbox: true,
color: "#999",
selectedbackcolor: "#f5f5f5",
selectedcolor: "#999",
multiselect: true,
levels: 5,
onnodechecked: function(event, node) {
_othertree.nodechecked(event, node);//调用拓展方法
},
onnodeunchecked: function(event, node) {
_othertree.nodeunchecked(event, node);//调用拓展方法
}
});
}

4.回显

var treearrdata = $tree_view.treeview('getunchecked');//获取所有tree所有的node
if(row.activitymodellist) {//返回的对象
var modellist = row.activitymodellist.split(',');
var checkarr = [];
for(var i = 0; i < modellist.length; i++) {
for(var j = 0; j < treearrdata.length; j++) {
if(treearrdata[j].text == modellist[i]) {//取nodeid
$tree_view.treeview('checknode', treearrdata[j].nodeid, {
silent: true
});
}
}
};
}

 

5.适用

父节点选中子节点全部选中，子节点取消一个父节点自动取消