mirror of https://github.com/ElemeFE/element
Tree: fix setCheckedKeys() not work on node that has childNodes (#2967)
parent
ce8c869292
commit
ae8ab4b56c
|
@ -777,8 +777,8 @@ Only one node among the same level can be expanded at one time.
|
||||||
| filter | filter all tree nodes, filtered nodes will be hidden | Accept a parameter which will be used as first parameter for filter-node-method |
|
| 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. |
|
| 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 |
|
| 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. |
|
| 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 `false`. 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`. 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 `false`. If the parameter is `true`, it only returns the currently selected array of sub-nodes. |
|
||||||
| setChecked | set node to be checked or not, only works when `node-key` is assigned | (key/data, checked, deep) Accept three parameters: 1. node's key or data to be checked 2. a boolean typed parameter indicating checked or not. 3. a boolean typed parameter indicating deep or not. |
|
| setChecked | set node to be checked or not, only works when `node-key` is assigned | (key/data, checked, deep) Accept three parameters: 1. node's key or data to be checked 2. a boolean typed parameter indicating checked or not. 3. a boolean typed parameter indicating deep or not. |
|
||||||
|
|
||||||
### Events
|
### Events
|
||||||
|
@ -789,4 +789,3 @@ Only one node among the same level can be expanded at one time.
|
||||||
| current-change | triggers when current node changes | two parameters: node object corresponding to the current node, `node` property of TreeNode |
|
| current-change | triggers when current node changes | two parameters: node object corresponding to the current node, `node` property of TreeNode |
|
||||||
| node-expand | triggers when current node open | three parameters: node object corresponding to the node opened, `node` property of TreeNode, TreeNode itself |
|
| node-expand | triggers when current node open | three parameters: node object corresponding to the node opened, `node` property of TreeNode, TreeNode itself |
|
||||||
| node-collapse | triggers when current node close | three parameters: node object corresponding to the node closed, `node` property of TreeNode, TreeNode itself |
|
| node-collapse | triggers when current node close | three parameters: node object corresponding to the node closed, `node` property of TreeNode, TreeNode itself |
|
||||||
|
|
||||||
|
|
|
@ -799,8 +799,8 @@
|
||||||
| filter | 对树节点进行筛选操作 | 接收一个任意类型的参数,该参数会在 filter-node-method 中作为第一个参数 |
|
| filter | 对树节点进行筛选操作 | 接收一个任意类型的参数,该参数会在 filter-node-method 中作为第一个参数 |
|
||||||
| getCheckedNodes | 若节点可被选择(即 `show-checkbox` 为 `true`),则返回目前被选中的节点所组成的数组 | (leafOnly) 接收一个 boolean 类型的参数,若为 `true` 则仅返回被选中的叶子节点,默认值为 `false` |
|
| getCheckedNodes | 若节点可被选择(即 `show-checkbox` 为 `true`),则返回目前被选中的节点所组成的数组 | (leafOnly) 接收一个 boolean 类型的参数,若为 `true` 则仅返回被选中的叶子节点,默认值为 `false` |
|
||||||
| setCheckedNodes | 设置目前勾选的节点,使用此方法必须设置 node-key 属性 | (nodes) 接收勾选节点数据的数组 |
|
| setCheckedNodes | 设置目前勾选的节点,使用此方法必须设置 node-key 属性 | (nodes) 接收勾选节点数据的数组 |
|
||||||
| getCheckedKeys | 若节点可被选择(即 `show-checkbox` 为 `true`),则返回目前被选中的节点所组成的数组 | (leafOnly) 接收一个 boolean 类型的参数,若为 `true` 则仅返回被选中的叶子节点的 keys,默认值为 `true` |
|
| getCheckedKeys | 若节点可被选择(即 `show-checkbox` 为 `true`),则返回目前被选中的节点所组成的数组 | (leafOnly) 接收一个 boolean 类型的参数,若为 `true` 则仅返回被选中的叶子节点的 keys,默认值为 `false` |
|
||||||
| setCheckedKeys | 通过 keys 设置目前勾选的节点,使用此方法必须设置 node-key 属性 | (keys, leafOnly) 接收两个参数,1. 勾选节点的 key 的数组 2. boolean 类型的参数,若为 `true` 则仅设置叶子节点的选中状态,默认值为 `true` |
|
| setCheckedKeys | 通过 keys 设置目前勾选的节点,使用此方法必须设置 node-key 属性 | (keys, leafOnly) 接收两个参数,1. 勾选节点的 key 的数组 2. boolean 类型的参数,若为 `true` 则仅设置叶子节点的选中状态,默认值为 `false` |
|
||||||
| setChecked | 通过 key / data 设置某个节点的勾选状态,使用此方法必须设置 node-key 属性 | (key/data, checked, deep) 接收三个参数,1. 勾选节点的 key 或者 data 2. boolean 类型,节点是否选中 3. boolean 类型,是否设置子节点 ,默认为 false |
|
| setChecked | 通过 key / data 设置某个节点的勾选状态,使用此方法必须设置 node-key 属性 | (key/data, checked, deep) 接收三个参数,1. 勾选节点的 key 或者 data 2. boolean 类型,节点是否选中 3. boolean 类型,是否设置子节点 ,默认为 false |
|
||||||
|
|
||||||
### Events
|
### Events
|
||||||
|
@ -811,4 +811,3 @@
|
||||||
| current-change | 当前选中节点变化时触发的事件 | 共两个参数,依次为:当前节点的数据,当前节点的 Node 对象 |
|
| current-change | 当前选中节点变化时触发的事件 | 共两个参数,依次为:当前节点的数据,当前节点的 Node 对象 |
|
||||||
| node-expand | 节点被展开时触发的事件 | 共三个参数,依次为:传递给 `data` 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。 |
|
| node-expand | 节点被展开时触发的事件 | 共三个参数,依次为:传递给 `data` 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。 |
|
||||||
| node-collapse | 节点被关闭时触发的事件 | 共三个参数,依次为:传递给 `data` 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。 |
|
| node-collapse | 节点被关闭时触发的事件 | 共三个参数,依次为:传递给 `data` 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。 |
|
||||||
|
|
||||||
|
|
|
@ -142,7 +142,7 @@ export default class TreeStore {
|
||||||
delete this.nodesMap[node.key];
|
delete this.nodesMap[node.key];
|
||||||
}
|
}
|
||||||
|
|
||||||
getCheckedNodes(leafOnly) {
|
getCheckedNodes(leafOnly = false) {
|
||||||
const checkedNodes = [];
|
const checkedNodes = [];
|
||||||
const traverse = function(node) {
|
const traverse = function(node) {
|
||||||
const childNodes = node.root ? node.root.childNodes : node.childNodes;
|
const childNodes = node.root ? node.root.childNodes : node.childNodes;
|
||||||
|
@ -161,7 +161,7 @@ export default class TreeStore {
|
||||||
return checkedNodes;
|
return checkedNodes;
|
||||||
}
|
}
|
||||||
|
|
||||||
getCheckedKeys(leafOnly) {
|
getCheckedKeys(leafOnly = false) {
|
||||||
const key = this.key;
|
const key = this.key;
|
||||||
const allNodes = this._getAllNodes();
|
const allNodes = this._getAllNodes();
|
||||||
const keys = [];
|
const keys = [];
|
||||||
|
@ -187,18 +187,65 @@ export default class TreeStore {
|
||||||
return allNodes;
|
return allNodes;
|
||||||
}
|
}
|
||||||
|
|
||||||
_setCheckedKeys(key, leafOnly, checkedKeys) {
|
_setCheckedKeys(key, leafOnly = false, checkedKeys) {
|
||||||
const allNodes = this._getAllNodes();
|
const allNodes = this._getAllNodes();
|
||||||
|
allNodes.sort((a, b) => a.level < b.level);
|
||||||
|
|
||||||
allNodes.sort((a, b) => a.level > b.level ? -1 : 1);
|
const keys = Object.keys(checkedKeys);
|
||||||
allNodes.forEach((node) => {
|
allNodes.forEach((node) => {
|
||||||
if (!leafOnly || (leafOnly && node.isLeaf)) {
|
let checked = keys.indexOf(node.data[key] + '') > -1;
|
||||||
node.setChecked(!!checkedKeys[(node.data || {})[key]], !this.checkStrictly);
|
|
||||||
|
if (!node.isLeaf) {
|
||||||
|
if (!this.checkStrictly) {
|
||||||
|
const childNodes = node.childNodes;
|
||||||
|
|
||||||
|
let all = true;
|
||||||
|
let none = true;
|
||||||
|
|
||||||
|
for (let i = 0, j = childNodes.length; i < j; i++) {
|
||||||
|
const child = childNodes[i];
|
||||||
|
if (child.checked !== true || child.indeterminate) {
|
||||||
|
all = false;
|
||||||
|
}
|
||||||
|
if (child.checked !== false || child.indeterminate) {
|
||||||
|
none = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (all) {
|
||||||
|
node.setChecked(true, !this.checkStrictly);
|
||||||
|
} else if (!all && !none) {
|
||||||
|
checked = checked ? true : 'half';
|
||||||
|
node.setChecked(checked, !this.checkStrictly && checked === true);
|
||||||
|
} else if (none) {
|
||||||
|
node.setChecked(checked, !this.checkStrictly);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
node.setChecked(checked, false);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (leafOnly) {
|
||||||
|
node.setChecked(false, false);
|
||||||
|
const traverse = function(node) {
|
||||||
|
const childNodes = node.childNodes;
|
||||||
|
|
||||||
|
childNodes.forEach((child) => {
|
||||||
|
if (!child.isLeaf) {
|
||||||
|
child.setChecked(false, false);
|
||||||
|
}
|
||||||
|
traverse(child);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
traverse(node);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
node.setChecked(checked, false);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
setCheckedNodes(array, leafOnly = true) {
|
setCheckedNodes(array, leafOnly = false) {
|
||||||
const key = this.key;
|
const key = this.key;
|
||||||
const checkedKeys = {};
|
const checkedKeys = {};
|
||||||
array.forEach((item) => {
|
array.forEach((item) => {
|
||||||
|
@ -208,7 +255,7 @@ export default class TreeStore {
|
||||||
this._setCheckedKeys(key, leafOnly, checkedKeys);
|
this._setCheckedKeys(key, leafOnly, checkedKeys);
|
||||||
}
|
}
|
||||||
|
|
||||||
setCheckedKeys(keys, leafOnly = true) {
|
setCheckedKeys(keys, leafOnly = false) {
|
||||||
this.defaultCheckedKeys = keys;
|
this.defaultCheckedKeys = keys;
|
||||||
const key = this.key;
|
const key = this.key;
|
||||||
const checkedKeys = {};
|
const checkedKeys = {};
|
||||||
|
|
|
@ -270,6 +270,46 @@ describe('Tree', () => {
|
||||||
tree.setCheckedKeys([111]);
|
tree.setCheckedKeys([111]);
|
||||||
expect(tree.getCheckedNodes().length).to.equal(3);
|
expect(tree.getCheckedNodes().length).to.equal(3);
|
||||||
expect(tree.getCheckedKeys().length).to.equal(3);
|
expect(tree.getCheckedKeys().length).to.equal(3);
|
||||||
|
|
||||||
|
tree.setCheckedKeys([1]);
|
||||||
|
setTimeout(function() {
|
||||||
|
expect(tree.getCheckedNodes().length).to.equal(3);
|
||||||
|
expect(tree.getCheckedKeys().length).to.equal(3);
|
||||||
|
}, 0);
|
||||||
|
|
||||||
|
tree.setCheckedKeys([2]);
|
||||||
|
setTimeout(function() {
|
||||||
|
expect(tree.getCheckedNodes().length).to.equal(3);
|
||||||
|
expect(tree.getCheckedKeys().length).to.equal(3);
|
||||||
|
}, 0);
|
||||||
|
|
||||||
|
tree.setCheckedKeys([21]);
|
||||||
|
expect(tree.getCheckedNodes().length).to.equal(1);
|
||||||
|
expect(tree.getCheckedKeys().length).to.equal(1);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('setCheckedKeys with checkStrictly', () => {
|
||||||
|
vm = getTreeVm(':props="defaultProps" checkStrictly show-checkbox node-key="id"');
|
||||||
|
const tree = vm.$children[0];
|
||||||
|
tree.setCheckedKeys([111]);
|
||||||
|
expect(tree.getCheckedNodes().length).to.equal(1);
|
||||||
|
expect(tree.getCheckedKeys().length).to.equal(1);
|
||||||
|
|
||||||
|
tree.setCheckedKeys([1]);
|
||||||
|
setTimeout(function() {
|
||||||
|
expect(tree.getCheckedNodes().length).to.equal(1);
|
||||||
|
expect(tree.getCheckedKeys().length).to.equal(1);
|
||||||
|
}, 0);
|
||||||
|
|
||||||
|
tree.setCheckedKeys([2]);
|
||||||
|
setTimeout(function() {
|
||||||
|
expect(tree.getCheckedNodes().length).to.equal(1);
|
||||||
|
expect(tree.getCheckedKeys().length).to.equal(1);
|
||||||
|
}, 0);
|
||||||
|
|
||||||
|
tree.setCheckedKeys([21, 22]);
|
||||||
|
expect(tree.getCheckedNodes().length).to.equal(2);
|
||||||
|
expect(tree.getCheckedKeys().length).to.equal(2);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('method setChecked', () => {
|
it('method setChecked', () => {
|
||||||
|
@ -288,8 +328,20 @@ describe('Tree', () => {
|
||||||
vm = getTreeVm(':props="defaultProps" show-checkbox node-key="id"');
|
vm = getTreeVm(':props="defaultProps" show-checkbox node-key="id"');
|
||||||
const tree = vm.$children[0];
|
const tree = vm.$children[0];
|
||||||
tree.setCheckedKeys([1, 11, 111, 2], false);
|
tree.setCheckedKeys([1, 11, 111, 2], false);
|
||||||
|
setTimeout(function() {
|
||||||
expect(tree.getCheckedNodes().length).to.equal(6);
|
expect(tree.getCheckedNodes().length).to.equal(6);
|
||||||
expect(tree.getCheckedKeys().length).to.equal(6);
|
expect(tree.getCheckedKeys().length).to.equal(6);
|
||||||
|
}, 0);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('setCheckedKeys with leafOnly=true', () => {
|
||||||
|
vm = getTreeVm(':props="defaultProps" show-checkbox node-key="id"');
|
||||||
|
const tree = vm.$children[0];
|
||||||
|
tree.setCheckedKeys([2], true);
|
||||||
|
setTimeout(function() {
|
||||||
|
expect(tree.getCheckedNodes().length).to.equal(2);
|
||||||
|
expect(tree.getCheckedKeys().length).to.equal(2);
|
||||||
|
}, 0);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('check strictly', (done) => {
|
it('check strictly', (done) => {
|
||||||
|
|
Loading…
Reference in New Issue