From 59293a219e5f63cb56c4fcf5a0776567d7d2fe09 Mon Sep 17 00:00:00 2001 From: Furybean Date: Tue, 22 Nov 2016 00:08:22 +0800 Subject: [PATCH] Tree: add filter-node-method prop & filter method. --- examples/docs/en-US/tree.md | 2 ++ examples/docs/zh-CN/tree.md | 2 ++ packages/tree/src/model/node.js | 1 + packages/tree/src/model/tree.js | 31 +++++++++++++++++++++++++++++++ packages/tree/src/tree-node.vue | 3 ++- packages/tree/src/tree.vue | 10 ++++++++-- test/unit/specs/tree.spec.js | 19 +++++++++++++++++++ 7 files changed, 65 insertions(+), 3 deletions(-) diff --git a/examples/docs/en-US/tree.md b/examples/docs/en-US/tree.md index c467d0030..261bf1fe5 100644 --- a/examples/docs/en-US/tree.md +++ b/examples/docs/en-US/tree.md @@ -230,6 +230,7 @@ Used for node selection. In the following example, data for each layer is acquir | show-checkbox | whether node is selectable | boolean | — | false | | check-strictly | whether checked state of a node not affects its father and child nodes when `show-checkbox` is `true` | boolean | — | false | | default-checked-keys | array of keys of initially checked nodes | array | — | — | +| filter-node-method | this function will be executed on each node when use filter method. if return `false`, tree node will be hidden. | Function(value, data, node) | - | - | ### props | Attribute | Description | Type | Accepted Values | Default | @@ -241,6 +242,7 @@ Used for node selection. In the following example, data for each layer is acquir `Tree` has the following method, which returns the currently selected array of nodes. | Method | Description | Parameters | |---------- |-------- |---------- | +| filter | filter all tree nodes, filtered nodes will be hidden | Accept a parameter which will be used as first parameter for filter-node-method | | getCheckedNodes | If the node can be selected (`show-checkbox` is `true`), it returns the currently selected array of nodes | Accept a boolean type parameter whose default value is `false`.
If the parameter is `true`, it only returns the currently selected array of sub-nodes.| | setCheckedNodes | set certain nodes to be checked, only works when `node-key` is assigned | an array of nodes to be checked | | getCheckedKeys | If the node can be selected (`show-checkbox` is `true`), it returns the currently selected array of node's keys | (leafOnly) Accept a boolean type parameter whose default value is `true`.
If the parameter is `true`, it only returns the currently selected array of sub-nodes.| diff --git a/examples/docs/zh-CN/tree.md b/examples/docs/zh-CN/tree.md index ababe2052..f9a880065 100644 --- a/examples/docs/zh-CN/tree.md +++ b/examples/docs/zh-CN/tree.md @@ -242,6 +242,7 @@ | show-checkbox | 节点是否可被选择 | boolean | — | false | | check-strictly | 在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false | boolean | — | false | | default-checked-keys | 默认勾选的节点的 key 的数组 | array | — | — | +| filter-node-method | 对树节点进行筛选时执行的方法，返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏 | Function(value, data, node) | - | - | ### props | 参数 | 说明 | 类型 | 可选值 | 默认值 | @@ -253,6 +254,7 @@ `Tree` 拥有如下方法，返回目前被选中的节点数组： | 方法名 | 说明 | 参数 | |------|--------|------| +| filter | 对树节点进行筛选操作 | 接收一个任意类型的参数，该参数会在 filter-node-method 中作为第一个参数 | | getCheckedNodes | 若节点可被选择（即 `show-checkbox` 为 `true`），
则返回目前被选中的节点所组成的数组 | (leafOnly) 接收一个 boolean 类型的参数，若为 `true` 则
仅返回被选中的叶子节点，默认值为 `false` | | setCheckedNodes | 设置目前勾选的节点，使用此方法必须设置 node-key 属性 | (nodes) 接收勾选节点数据的数组 | | getCheckedKeys | 若节点可被选择（即 `show-checkbox` 为 `true`），
则返回目前被选中的节点所组成的数组 | (leafOnly) 接收一个 boolean 类型的参数，若为 `true` 则仅返回被选中的叶子节点的 keys，默认值为 `true` | diff --git a/packages/tree/src/model/node.js b/packages/tree/src/model/node.js index 9c4eb06f4..6d3bca470 100644 --- a/packages/tree/src/model/node.js +++ b/packages/tree/src/model/node.js @@ -50,6 +50,7 @@ export default class Node { this.data = null; this.expanded = false; this.parent = null; + this.visible = true; for (let name in options) { if (options.hasOwnProperty(name)) { diff --git a/packages/tree/src/model/tree.js b/packages/tree/src/model/tree.js index 414e8a132..7a0010860 100644 --- a/packages/tree/src/model/tree.js +++ b/packages/tree/src/model/tree.js @@ -26,6 +26,37 @@ export default class Tree { } } + filter(value) { + const filterNodeMethod = this.filterNodeMethod; + const traverse = function(node) { + const childNodes = node.root ? node.root.childNodes : node.childNodes; + + childNodes.forEach((child) => { + child.visible = filterNodeMethod.call(child, value, child.data, child); + + traverse(child); + }); + + if (!node.visible && childNodes.length) { + let allHidden = true; + + childNodes.forEach((child) => { + if (child.visible) allHidden = false; + }); + + if (node.root) { + node.root.visible = allHidden === false; + } else { + node.visible = allHidden === false; + } + } + + if (node.visible && !node.isLeaf) node.expand(); + }; + + traverse(this); + } + setData(newVal) { const instanceChanged = newVal !== this.root.data; this.root.setData(newVal); diff --git a/packages/tree/src/tree-node.vue b/packages/tree/src/tree-node.vue index 003228829..52874c6c0 100644 --- a/packages/tree/src/tree-node.vue +++ b/packages/tree/src/tree-node.vue @@ -1,7 +1,8 @@