Tree: add getCheckedKeys & setCheckedKeys API.

pull/1257/head
Furybean 2016-11-21 21:53:55 +08:00 committed by 杨奕
parent 71b0606823
commit 2c764d13fa
5 changed files with 74 additions and 11 deletions

View File

@ -243,6 +243,8 @@ Used for node selection. In the following example, data for each layer is acquir
|---------- |-------- |---------- |
| 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`. <br>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`. <br>If the parameter is `true`, it only returns the currently selected array of sub-nodes.|
| setCheckedKeys | set certain nodes to be checked, only works when `node-key` is assigned | (keys, leafOnly) Accept two parameters: 1. an array of node's keys to be checked 2. a boolean type parameter whose default value is `true`. <br>If the parameter is `true`, it only returns the currently selected array of sub-nodes. |
### Events
| Event Name | Description | Parameters |

View File

@ -253,8 +253,10 @@
`Tree` 拥有如下方法,返回目前被选中的节点数组:
| 方法名 | 说明 | 参数 |
|------|--------|------|
| getCheckedNodes | 若节点可被选择(即 `show-checkbox``true`<br>则返回目前被选中的节点所组成的数组 | 接收一个 boolean 类型的参数,若为 `true`<br>仅返回被选中的叶子节点,默认值为 `false` |
| setCheckedNodes | 设置目前勾选的节点,使用此方法必须设置 node-keys 属性 | 接收勾选节点数据的数组 |
| getCheckedNodes | 若节点可被选择(即 `show-checkbox``true`<br>则返回目前被选中的节点所组成的数组 | (leafOnly) 接收一个 boolean 类型的参数,若为 `true`<br>仅返回被选中的叶子节点,默认值为 `false` |
| setCheckedNodes | 设置目前勾选的节点,使用此方法必须设置 node-key 属性 | (nodes) 接收勾选节点数据的数组 |
| getCheckedKeys | 若节点可被选择(即 `show-checkbox``true`<br>则返回目前被选中的节点所组成的数组 | (leafOnly) 接收一个 boolean 类型的参数,若为 `true` 则仅返回被选中的叶子节点的 keys默认值为 `true` |
| setCheckedKeys | 通过 keys 设置目前勾选的节点,使用此方法必须设置 node-key 属性 | (keys, leafOnly) 接收两个参数1. 勾选节点的 key 的数组 2. boolean 类型的参数,<br>若为 `true` 则仅设置叶子节点的选中状态,默认值为 `true` |
### Events
| 事件名称 | 说明 | 回调参数 |

View File

@ -66,7 +66,8 @@ export default class Tree {
const key = this.key;
if (!key || !node || !node.data) return;
this.nodesMap[node.key] = node;
const nodeKey = node.key;
if (nodeKey) this.nodesMap[node.key] = node;
}
deregisterNode(node) {
@ -95,13 +96,21 @@ export default class Tree {
return checkedNodes;
}
setCheckedNodes(array) {
getCheckedKeys(leafOnly) {
const key = this.key;
const checkedKeys = {};
array.forEach((item) => {
checkedKeys[(item || {})[key]] = true;
const allNodes = this._getAllNodes();
const keys = [];
allNodes.forEach((node) => {
if (!leafOnly || (leafOnly && node.isLeaf)) {
if (node.checked) {
keys.push((node.data || {})[key]);
}
}
});
return keys;
}
_getAllNodes() {
const allNodes = [];
const nodesMap = this.nodesMap;
for (let nodeKey in nodesMap) {
@ -110,9 +119,37 @@ export default class Tree {
}
}
return allNodes;
}
_setCheckedKeys(key, leafOnly, checkedKeys) {
const allNodes = this._getAllNodes();
allNodes.sort((a, b) => a.level > b.level ? -1 : 1);
allNodes.forEach((node) => {
if (!leafOnly || (leafOnly && node.isLeaf)) {
node.setChecked(!!checkedKeys[(node.data || {})[key]], !this.checkStrictly);
}
});
}
setCheckedNodes(array, leafOnly = true) {
const key = this.key;
const checkedKeys = {};
array.forEach((item) => {
checkedKeys[(item || {})[key]] = true;
});
this._setCheckedKeys(key, leafOnly, checkedKeys);
}
setCheckedKeys(keys, leafOnly = true) {
const key = this.key;
const checkedKeys = {};
keys.forEach((key) => {
checkedKeys[key] = true;
});
this._setCheckedKeys(key, leafOnly, checkedKeys);
}
};

View File

@ -112,9 +112,16 @@
getCheckedNodes(leafOnly) {
return this.tree.getCheckedNodes(leafOnly);
},
setCheckedNodes(nodes) {
getCheckedKeys(leafOnly) {
return this.tree.getCheckedKeys(leafOnly);
},
setCheckedNodes(nodes, leafOnly) {
if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in setCheckedNodes');
this.tree.setCheckedNodes(nodes);
this.tree.setCheckedNodes(nodes, leafOnly);
},
setCheckedKeys(keys, leafOnly) {
if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in setCheckedNodes');
this.tree.setCheckedKeys(keys, leafOnly);
}
}
};

View File

@ -186,7 +186,6 @@ describe('Tree', () => {
const tree = vm.$children[0];
const secondNode = document.querySelectorAll('.el-tree-node__content')[3];
const nodeCheckbox = secondNode.querySelector('.el-checkbox');
expect(nodeCheckbox).to.be.exist;
nodeCheckbox.click();
expect(tree.getCheckedNodes().length).to.equal(3);
expect(tree.getCheckedNodes(true).length).to.equal(2);
@ -197,6 +196,22 @@ describe('Tree', () => {
});
});
it('setCheckedKeys', () => {
vm = getTreeVm(':props="defaultProps" show-checkbox node-key="id"');
const tree = vm.$children[0];
tree.setCheckedKeys([111]);
expect(tree.getCheckedNodes().length).to.equal(3);
expect(tree.getCheckedKeys().length).to.equal(3);
});
it('setCheckedKeys with leafOnly=false', () => {
vm = getTreeVm(':props="defaultProps" show-checkbox node-key="id"');
const tree = vm.$children[0];
tree.setCheckedKeys([1, 11, 111, 2], false);
expect(tree.getCheckedNodes().length).to.equal(6);
expect(tree.getCheckedKeys().length).to.equal(6);
});
it('check strictly', (done) => {
vm = getTreeVm(':props="defaultProps" show-checkbox check-strictly');
const tree = vm.$children[0];