mirror of https://github.com/ElemeFE/element
Tree: add getCheckedKeys & setCheckedKeys API.
parent
71b0606823
commit
2c764d13fa
|
@ -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.|
|
| 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 |
|
| 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
|
### Events
|
||||||
| Event Name | Description | Parameters |
|
| Event Name | Description | Parameters |
|
||||||
|
|
|
@ -253,8 +253,10 @@
|
||||||
`Tree` 拥有如下方法,返回目前被选中的节点数组:
|
`Tree` 拥有如下方法,返回目前被选中的节点数组:
|
||||||
| 方法名 | 说明 | 参数 |
|
| 方法名 | 说明 | 参数 |
|
||||||
|------|--------|------|
|
|------|--------|------|
|
||||||
| getCheckedNodes | 若节点可被选择(即 `show-checkbox` 为 `true`),<br>则返回目前被选中的节点所组成的数组 | 接收一个 boolean 类型的参数,若为 `true` 则<br>仅返回被选中的叶子节点,默认值为 `false` |
|
| getCheckedNodes | 若节点可被选择(即 `show-checkbox` 为 `true`),<br>则返回目前被选中的节点所组成的数组 | (leafOnly) 接收一个 boolean 类型的参数,若为 `true` 则<br>仅返回被选中的叶子节点,默认值为 `false` |
|
||||||
| setCheckedNodes | 设置目前勾选的节点,使用此方法必须设置 node-keys 属性 | 接收勾选节点数据的数组 |
|
| 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
|
### Events
|
||||||
| 事件名称 | 说明 | 回调参数 |
|
| 事件名称 | 说明 | 回调参数 |
|
||||||
|
|
|
@ -66,7 +66,8 @@ export default class Tree {
|
||||||
const key = this.key;
|
const key = this.key;
|
||||||
if (!key || !node || !node.data) return;
|
if (!key || !node || !node.data) return;
|
||||||
|
|
||||||
this.nodesMap[node.key] = node;
|
const nodeKey = node.key;
|
||||||
|
if (nodeKey) this.nodesMap[node.key] = node;
|
||||||
}
|
}
|
||||||
|
|
||||||
deregisterNode(node) {
|
deregisterNode(node) {
|
||||||
|
@ -95,13 +96,21 @@ export default class Tree {
|
||||||
return checkedNodes;
|
return checkedNodes;
|
||||||
}
|
}
|
||||||
|
|
||||||
setCheckedNodes(array) {
|
getCheckedKeys(leafOnly) {
|
||||||
const key = this.key;
|
const key = this.key;
|
||||||
const checkedKeys = {};
|
const allNodes = this._getAllNodes();
|
||||||
array.forEach((item) => {
|
const keys = [];
|
||||||
checkedKeys[(item || {})[key]] = true;
|
allNodes.forEach((node) => {
|
||||||
|
if (!leafOnly || (leafOnly && node.isLeaf)) {
|
||||||
|
if (node.checked) {
|
||||||
|
keys.push((node.data || {})[key]);
|
||||||
|
}
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
return keys;
|
||||||
|
}
|
||||||
|
|
||||||
|
_getAllNodes() {
|
||||||
const allNodes = [];
|
const allNodes = [];
|
||||||
const nodesMap = this.nodesMap;
|
const nodesMap = this.nodesMap;
|
||||||
for (let nodeKey in 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.sort((a, b) => a.level > b.level ? -1 : 1);
|
||||||
allNodes.forEach((node) => {
|
allNodes.forEach((node) => {
|
||||||
|
if (!leafOnly || (leafOnly && node.isLeaf)) {
|
||||||
node.setChecked(!!checkedKeys[(node.data || {})[key]], !this.checkStrictly);
|
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);
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
|
@ -112,9 +112,16 @@
|
||||||
getCheckedNodes(leafOnly) {
|
getCheckedNodes(leafOnly) {
|
||||||
return this.tree.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');
|
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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
@ -186,7 +186,6 @@ describe('Tree', () => {
|
||||||
const tree = vm.$children[0];
|
const tree = vm.$children[0];
|
||||||
const secondNode = document.querySelectorAll('.el-tree-node__content')[3];
|
const secondNode = document.querySelectorAll('.el-tree-node__content')[3];
|
||||||
const nodeCheckbox = secondNode.querySelector('.el-checkbox');
|
const nodeCheckbox = secondNode.querySelector('.el-checkbox');
|
||||||
expect(nodeCheckbox).to.be.exist;
|
|
||||||
nodeCheckbox.click();
|
nodeCheckbox.click();
|
||||||
expect(tree.getCheckedNodes().length).to.equal(3);
|
expect(tree.getCheckedNodes().length).to.equal(3);
|
||||||
expect(tree.getCheckedNodes(true).length).to.equal(2);
|
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) => {
|
it('check strictly', (done) => {
|
||||||
vm = getTreeVm(':props="defaultProps" show-checkbox check-strictly');
|
vm = getTreeVm(':props="defaultProps" show-checkbox check-strictly');
|
||||||
const tree = vm.$children[0];
|
const tree = vm.$children[0];
|
||||||
|
|
Loading…
Reference in New Issue