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

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