Skip to content

Commit

Permalink
#4273 Add support for dataKey on TreeTable (#4936)
Browse files Browse the repository at this point in the history
  • Loading branch information
@tengju
tengju authored Dec 19, 2023
1 parent f39b351 commit 435de17
Show file tree
Hide file tree
Showing 6 changed files with 59 additions and 29 deletions.
6 changes: 6 additions & 0 deletions api-generator/components/treetable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,12 @@ const TreeTableProps = [
default: 'null',
description: 'An array of treenodes.'
},
{
name: 'dataKey',
type: 'string|function',
default: 'null',
description: 'Name of the field that uniquely identifies the a record in the data.'
},
{
name: 'expandedKeys',
type: 'array',
Expand Down
4 changes: 4 additions & 0 deletions components/lib/treetable/BaseTreeTable.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,10 @@ export default {
type: null,
default: null
},
dataKey: {
type: [String, Function],
default: 'key'
},
expandedKeys: {
type: null,
default: null
Expand Down
5 changes: 5 additions & 0 deletions components/lib/treetable/TreeTable.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -395,6 +395,11 @@ export interface TreeTableProps {
* An array of treenodes.
*/
value?: TreeNode[] | undefined;
/**
* Name of the field that uniquely identifies the a record in the data.
* @defaultValue "key"
*/
dataKey?: string | ((item: any) => string) | undefined;
/**
* A map of keys to represent the state of the tree expansion state in controlled mode.
* @see TreeTableExpandedKeys
Expand Down
23 changes: 14 additions & 9 deletions components/lib/treetable/TreeTable.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,8 @@
<template v-if="!empty">
<TTRow
v-for="(node, index) of dataToRender"
:key="node.key"
:key="nodeKey(node)"
:dataKey="dataKey"
:columns="columns"
:node="node"
:level="0"
Expand Down Expand Up @@ -252,8 +253,7 @@ export default {
};
},
onNodeToggle(node) {
const key = node.key;
const key = this.nodeKey(node);
if (this.d_expandedKeys[key]) {

Check failure on line 257 in components/lib/treetable/TreeTable.vue

View workflow job for this annotation

GitHub Actions / build (16.x) 

Expected blank line before this statement

Check failure on line 257 in components/lib/treetable/TreeTable.vue

View workflow job for this annotation

GitHub Actions / build (18.x) 

Expected blank line before this statement
delete this.d_expandedKeys[key];
this.$emit('node-collapse', node);
Expand All @@ -273,9 +273,13 @@ export default {
this.$emit('update:selectionKeys', _selectionKeys);
}
},
nodeKey(node) {
return ObjectUtils.resolveFieldData(node, this.dataKey);
},
handleSelectionWithMetaKey(event) {
const originalEvent = event.originalEvent;
const node = event.node;
const nodeKey = this.nodeKey(node);
const metaKey = originalEvent.metaKey || originalEvent.ctrlKey;
const selected = this.isNodeSelected(node);
let _selectionKeys;
Expand All @@ -285,7 +289,7 @@ export default {
_selectionKeys = {};
} else {
_selectionKeys = { ...this.selectionKeys };
delete _selectionKeys[node.key];
delete _selectionKeys[nodeKey];
}
this.$emit('node-unselect', node);
Expand All @@ -296,14 +300,15 @@ export default {
_selectionKeys = !metaKey ? {} : this.selectionKeys ? { ...this.selectionKeys } : {};
}
_selectionKeys[node.key] = true;
_selectionKeys[nodeKey] = true;
this.$emit('node-select', node);
}
return _selectionKeys;
},
handleSelectionWithoutMetaKey(event) {
const node = event.node;
const nodeKey = this.nodeKey(node);
const selected = this.isNodeSelected(node);
let _selectionKeys;
Expand All @@ -313,18 +318,18 @@ export default {
this.$emit('node-unselect', node);
} else {
_selectionKeys = {};
_selectionKeys[node.key] = true;
_selectionKeys[nodeKey] = true;
this.$emit('node-select', node);
}
} else {
if (selected) {
_selectionKeys = { ...this.selectionKeys };
delete _selectionKeys[node.key];
delete _selectionKeys[nodeKey];
this.$emit('node-unselect', node);
} else {
_selectionKeys = this.selectionKeys ? { ...this.selectionKeys } : {};
_selectionKeys[node.key] = true;
_selectionKeys[nodeKey] = true;
this.$emit('node-select', node);
}
Expand Down Expand Up @@ -572,7 +577,7 @@ export default {
return matched;
},
isNodeSelected(node) {
return this.selectionMode && this.selectionKeys ? this.selectionKeys[node.key] === true : false;
return this.selectionMode && this.selectionKeys ? this.selectionKeys[this.nodeKey(node)] === true : false;
},
isNodeLeaf(node) {
return node.leaf === false ? false : !(node.children && node.children.length);
Expand Down
46 changes: 27 additions & 19 deletions components/lib/treetable/TreeTableRow.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,8 @@
<template v-if="expanded && node.children && node.children.length">
<TreeTableRow
v-for="childNode of node.children"
:key="childNode.key"
:key="nodeKey(childNode)"
:dataKey="dataKey"
:columns="columns"
:node="childNode"
:parentNode="node"
Expand Down Expand Up @@ -76,6 +77,10 @@ export default {
type: null,
default: null
},
dataKey: {
type: [String, Function],
default: 'key'
},
parentNode: {
type: null,
default: null
Expand Down Expand Up @@ -150,6 +155,9 @@ export default {
onTouchEnd() {
this.nodeTouched = true;
},
nodeKey(node) {
return ObjectUtils.resolveFieldData(node, this.dataKey);
},
onKeyDown(event, item) {
switch (event.code) {
case 'ArrowDown':
Expand Down Expand Up @@ -320,8 +328,8 @@ export default {
});
},
propagateDown(node, check, selectionKeys) {
if (check) selectionKeys[node.key] = { checked: true, partialChecked: false };
else delete selectionKeys[node.key];
if (check) selectionKeys[this.nodeKey(node)] = { checked: true, partialChecked: false };
else delete selectionKeys[this.nodeKey(node)];
if (node.children && node.children.length) {
for (let child of node.children) {
Expand All @@ -336,19 +344,19 @@ export default {
let childPartialSelected = false;
for (let child of this.node.children) {
if (_selectionKeys[child.key] && _selectionKeys[child.key].checked) checkedChildCount++;
else if (_selectionKeys[child.key] && _selectionKeys[child.key].partialChecked) childPartialSelected = true;
if (_selectionKeys[this.nodeKey(child)] && _selectionKeys[this.nodeKey(child)].checked) checkedChildCount++;
else if (_selectionKeys[this.nodeKey(child)] && _selectionKeys[this.nodeKey(child)].partialChecked) childPartialSelected = true;
}
if (check && checkedChildCount === this.node.children.length) {
_selectionKeys[this.node.key] = { checked: true, partialChecked: false };
_selectionKeys[this.nodeKey(this.node)] = { checked: true, partialChecked: false };
} else {
if (!check) {
delete _selectionKeys[this.node.key];
delete _selectionKeys[this.nodeKey(this.node)];
}
if (childPartialSelected || (checkedChildCount > 0 && checkedChildCount !== this.node.children.length)) _selectionKeys[this.node.key] = { checked: false, partialChecked: true };
else _selectionKeys[this.node.key] = { checked: false, partialChecked: false };
if (childPartialSelected || (checkedChildCount > 0 && checkedChildCount !== this.node.children.length)) _selectionKeys[this.nodeKey(this.node)] = { checked: false, partialChecked: true };
else _selectionKeys[this.nodeKey(this.node)] = { checked: false, partialChecked: false };
}
this.$emit('checkbox-change', {
Expand All @@ -364,19 +372,19 @@ export default {
let childPartialSelected = false;
for (let child of this.node.children) {
if (_selectionKeys[child.key] && _selectionKeys[child.key].checked) checkedChildCount++;
else if (_selectionKeys[child.key] && _selectionKeys[child.key].partialChecked) childPartialSelected = true;
if (_selectionKeys[this.nodeKey(child)] && _selectionKeys[this.nodeKey(child)].checked) checkedChildCount++;
else if (_selectionKeys[this.nodeKey(child)] && _selectionKeys[this.nodeKey(child)].partialChecked) childPartialSelected = true;
}
if (check && checkedChildCount === this.node.children.length) {
_selectionKeys[this.node.key] = { checked: true, partialChecked: false };
_selectionKeys[this.nodeKey(this.node)] = { checked: true, partialChecked: false };
} else {
if (!check) {
delete _selectionKeys[this.node.key];
delete _selectionKeys[this.nodeKey(this.node)];
}
if (childPartialSelected || (checkedChildCount > 0 && checkedChildCount !== this.node.children.length)) _selectionKeys[this.node.key] = { checked: false, partialChecked: true };
else _selectionKeys[this.node.key] = { checked: false, partialChecked: false };
if (childPartialSelected || (checkedChildCount > 0 && checkedChildCount !== this.node.children.length)) _selectionKeys[this.nodeKey(this.node)] = { checked: false, partialChecked: true };
else _selectionKeys[this.nodeKey(this.node)] = { checked: false, partialChecked: false };
}
this.$emit('checkbox-change', {
Expand All @@ -402,19 +410,19 @@ export default {
return [this.node.styleClass, this.cx('row')];
},
expanded() {
return this.expandedKeys && this.expandedKeys[this.node.key] === true;
return this.expandedKeys && this.expandedKeys[this.nodeKey(this.node)] === true;
},
leaf() {
return this.node.leaf === false ? false : !(this.node.children && this.node.children.length);
},
selected() {
return this.selectionMode && this.selectionKeys ? this.selectionKeys[this.node.key] === true : false;
return this.selectionMode && this.selectionKeys ? this.selectionKeys[this.nodeKey(this.node)] === true : false;
},
checked() {
return this.selectionKeys ? this.selectionKeys[this.node.key] && this.selectionKeys[this.node.key].checked : false;
return this.selectionKeys ? this.selectionKeys[this.nodeKey(this.node)] && this.selectionKeys[this.nodeKey(this.node)].checked : false;
},
partialChecked() {
return this.selectionKeys ? this.selectionKeys[this.node.key] && this.selectionKeys[this.node.key].partialChecked : false;
return this.selectionKeys ? this.selectionKeys[this.nodeKey(this.node)] && this.selectionKeys[this.nodeKey(this.node)].partialChecked : false;
},
getAriaSelected() {
return this.selectionMode === 'single' || this.selectionMode === 'multiple' ? this.selected : null;
Expand Down
4 changes: 3 additions & 1 deletion doc/treetable/selection/CheckboxRowSelectionDoc.vue
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Selection of multiple nodes via checkboxes is enabled by configuring <i>selectionMode</i> as <i>checkbox</i>.</p>
<p>In checkbox selection mode, value binding should be a key-value pair where key is the node key and value is an object that has <i>checked</i> and <i>partialChecked</i> properties to represent the checked state of a node.</p>
<p>
In checkbox selection mode, value binding should be a key-value pair where key (or the dataKey) is the node key and value is an object that has <i>checked</i> and <i>partialChecked</i> properties to represent the checked state of a node.
</p>
</DocSectionText>
<DocSectionCode :code="introCode" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
<div class="card">
Expand Down

0 comments on commit 435de17

Please sign in to comment.