本帖最后由 chennaiweng 于 2019-8-16 11:32 编辑
难点感觉难点就是数据回填，数据操作倒是不是很难。 数据操作思路： 选中某个节点，然后根据其parent_id，递归查找父元素。假如子元素个数和选中个数相等，父元素选中，不相等，则所有父元素半选状态。
数据回填就稍微麻烦一点 首先：递归查找到要回填的数据，使其状态为选中，假如选中的数据有子元素，则所有子元素选中。
其次，找到选中数据的所有父元素，然后改变其状态，使其变为半选。然后对数据进行一个展示。
部分代码递归查找所有父元素代码： [JavaScript] 纯文本查看 复制代码 findAllParent(node, tree, parentNodes = [], index = 0) {
if (!node || !node[this.sprops.parent]) {
return
}
this.findParent(node, parentNodes, tree)
let parentNode = parentNodes[index]
this.findAllParent(parentNode, tree, parentNodes, ++index)
return parentNodes
},
findParent (node, parentNodes, tree) {
for (let i = 0; i < tree.length; i++) {
let item = tree[i]
if (item[this.sprops.value] === node[this.sprops.parent]) {
parentNodes.push(item)
return
}
if (item.children && item.children.length > 0) {
this.findParent(node, parentNodes, item.children)
}
}
},递归查找当前节点源码: [JavaScript] 纯文本查看 复制代码 getCheckedNodes(data, value) {
data.forEach(item => {
if (value === item[this.sprops.value]) {
this.checkedNodes.push(item)
this.$set(item, 'checked', true)
this.$set(item, 'isIndeterminate', false)
this.childrenChecked(item, true)
} else {
if (item.children && item.children.length > 0) {
this.getCheckedNodes(item.children, value)
}
}
})
},回填代码，对所有父元素进行半选。 [JavaScript] 纯文本查看 复制代码 valForeach(val) {
val.forEach(item => {
this.getCheckedNodes(this.options, item)
})
let checkednodeTree = {}
this.checkedNodes.forEach(node => {
checkednodeTree[node[this.sprops.value]] = this.findAllParent(node, this.options)
})
// console.log(checkednodeTree)
for (let key in checkednodeTree) {
if (checkednodeTree[key] && checkednodeTree[key].length > 0) {
let parentArray = checkednodeTree[key].reverse()
parentArray.forEach((item, index) => {
this.$set(item, 'isIndeterminate', true)
this.onelineClick(item, index + 1, 'init')
})
}
}
},本文转自：https://www.haorooms.com/post/js_search_tree |
收藏
淘帖
踩
