vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

#4273 Add support for dataKey on TreeTable (#4936)

pull/4987/head
proxyteng 2023-12-19 14:23:53 +01:00 committed by GitHub
parent f39b351f10
commit 435de17919
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 59 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
api-generator/components/treetable.js
View File

@ -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',

4
components/lib/treetable/BaseTreeTable.vue
View File

@ -10,6 +10,10 @@ export default {
type: null,
default: null
},
dataKey: {
type: [String, Function],
default: 'key'
},
expandedKeys: {
type: null,
default: null

5
components/lib/treetable/TreeTable.d.ts vendored
View File

@ -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

23
components/lib/treetable/TreeTable.vue
View File

@ -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"
@ -252,8 +253,7 @@ export default {
};
},
onNodeToggle(node) {
const key = node.key;
const key = this.nodeKey(node);
if (this.d_expandedKeys[key]) {
delete this.d_expandedKeys[key];
this.$emit('node-collapse', node);
@ -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;
@ -285,7 +289,7 @@ export default {
_selectionKeys = {};
} else {
_selectionKeys = { ...this.selectionKeys };
delete _selectionKeys[node.key];
delete _selectionKeys[nodeKey];
}
this.$emit('node-unselect', node);
@ -296,7 +300,7 @@ export default {
_selectionKeys = !metaKey ? {} : this.selectionKeys ? { ...this.selectionKeys } : {};
}
_selectionKeys[node.key] = true;
_selectionKeys[nodeKey] = true;
this.$emit('node-select', node);
}
@ -304,6 +308,7 @@ export default {
},
handleSelectionWithoutMetaKey(event) {
const node = event.node;
const nodeKey = this.nodeKey(node);
const selected = this.isNodeSelected(node);
let _selectionKeys;
@ -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);
}
@ -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);

46
components/lib/treetable/TreeTableRow.vue
View File

@ -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"
@ -76,6 +77,10 @@ export default {
type: null,
default: null
},
dataKey: {
type: [String, Function],
default: 'key'
},
parentNode: {
type: null,
default: null
@ -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':
@ -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) {
@ -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', {
@ -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', {
@ -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;

4
doc/treetable/selection/CheckboxRowSelectionDoc.vue
View File

@ -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">