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.适用

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