// 省市级数据 var procityTreeData = YUNM._set.procityTreeData; // 用户已经选中的城市，比如河南洛阳。 var init_code = $this.next("input[name=area]").val(); // 如果用户有选中项，则对选中项进行规则展示 if (init_code) { // 初始化选中项目 $.each(procityTreeData, function(index, value) { // 通过i和省级的节点length进行对比，判断是否全选、未全选、全未选三种状态 var i = 0; $.each(value.nodes, function(index1, value1) { if (init_code.indexOf(value1.code) != -1) { // 选中时先初始化state，再把state.checked设为true value1["state"] = {}; value1["state"]["checked"] = true; i++; } else { // 否则重置state，保证procityTreeData数据的不被更改 // 这个地方其实有待优化，由于js我还不算精通，所以不知道怎么把数组复制到一个新数组里，保证原始属于不被更改 value1["state"] = {}; } }); value["state"] = {}; // 市级节点有选中，那么省级节点的状态需要变化，根据上面制定的规则来 if (i > 0) { // 市级全选，那么此时省级节点打钩 if (value.nodes.length == i) { value["state"]["checked"] = true; } // 根据selected来设定颜色 value["state"]["selected"] = true; } else { value["state"]["selected"] = false; } }); }
让treeview和我们打个招呼吧！
$("#procitytree").treeview({ data : procityTreeData,// 赋值 highlightSelected : false,// 选中项不高亮，避免和上述制定的颜色变化规则冲突 multiSelect : false,// 不允许多选，因为我们要通过check框来控制 showCheckbox : true,// 展示checkbox }).treeview('collapseAll', {// 节点展开 silent : true });
⑤、节点onNodeChecked、onNodeUnchecked的应用
不要⑤就够了吗？
不够，我们还要控制节点选择框的变化。
就像效果图中那样。
onNodeChecked : function(event, node) { YUNM.debug("选中项目为：" + node); // 省级节点被选中，那么市级节点都要选中 if (node.nodes != null) { $.each(node.nodes, function(index, value) { $this.treeview('checkNode', value.nodeId, { silent : true }); }); } else { // 市级节点选中的时候，要根据情况判断父节点是否要全部选中 // 父节点 var parentNode = $this.treeview('getParent', node.nodeId); var isAllchecked = true; // 是否全部选中 // 当前市级节点的所有兄弟节点，也就是获取省下面的所有市 var siblings = $this.treeview('getSiblings', node.nodeId); for ( var i in siblings) { // 有一个没选中，则不是全选 if (!siblings[i].state.checked) { isAllchecked = false; break; } } // 全选，则打钩 if (isAllchecked) { $this.treeview('checkNode', parentNode.nodeId, { silent : true }); } else {// 非全选，则变红 $this.treeview('selectNode', parentNode.nodeId, { silent : true }); } } }, onNodeUnchecked : function(event, node) { YUNM.debug("取消选中项目为：" + node); // 选中的是省级节点 if (node.nodes != null) { // 这里需要控制，判断是否是因为市级节点引起的父节点被取消选中 // 如果是，则只管取消父节点就行了 // 如果不是，则子节点需要被取消选中 if (silentByChild) { $.each(node.nodes, function(index, value) { $this.treeview('uncheckNode', value.nodeId, { silent : true }); }); } } else { // 市级节点被取消选中 var parentNode = $this.treeview('getParent', node.nodeId); var isAllUnchecked = true; // 是否全部取消选中 // 市级节点有一个选中，那么就不是全部取消选中 var siblings = $this.treeview('getSiblings', node.nodeId); for ( var i in siblings) { if (siblings[i].state.checked) { isAllUnchecked = false; break; } } // 全部取消选中，那么省级节点恢复到默认状态 if (isAllUnchecked) { $this.treeview('unselectNode', parentNode.nodeId, { silent : true, }); $this.treeview('uncheckNode', parentNode.nodeId, { silent : true, }); } else { silentByChild = false; $this.treeview('selectNode', parentNode.nodeId, { silent : true, }); $this.treeview('uncheckNode', parentNode.nodeId, { silent : true, }); } } silentByChild = true; },
到这里，treeview的应用已经算是非常全面了