This content originally appeared on DEV Community and was authored by Ray
Question title
How to progressively load sub-nodes in a pivot table using the VTable component?
Problem description
Using the VTable table component, how to gradually load sub-nodes in the pivot table, click the expand button of the parent node, and then dynamically load the information of the sub-node
Solution
VTable provides setTreeNodeChildrenAPI, which is used to update the sub-node status of a node in the pivot structure and can be used to implement progressive loading function
- Dimension tree configuration
Normally, in the dimension tree (columnTree/rowTree), the childrenattribute is an array, which is the sub-node information of the node
{
dimensionKey: 'name',
value: 'a',
children: [
{
dimensionKey: 'name-1',
value: 'a-1',
children: [
// ......
]
},
// ......
]
}
How to dynamically load sub-node information, you can configure the childrenproperty to true. At this time, the node will be displayed as the parent node in the table, but clicking the expand button in the cell will trigger relevant events, but the table will not have any active changes.
- Monitoring events
After the expand button is clicked, the VTable. ListTable.EVENT_TYPEevent will be triggered. You need to listen to this event and use the setTreeNodeChildrenAPI to update the sub-node information and the corresponding increased data
const { TREE_HIERARCHY_STATE_CHANGE } = VTable.ListTable.EVENT_TYPE;
instance.on(TREE_HIERARCHY_STATE_CHANGE, args => {
if (args.hierarchyState === VTable.TYPES.HierarchyState.expand && !Array.isArray(args.originData.children)) {
setTimeout(() => {
const newData = [
// ......
];
const children = [
{
dimensionKey: 'name-1',
value: 'a-1',
},
{
dimensionKey: 'name-1',
value: 'a-2'
}
];
instance.setTreeNodeChildren(children, newData, args.col, args.row);
}, 200);
}
});
Code example
demo：https://visactor.io/vtable/demo/table-type/pivot-table-tree-lazy-load
Related Documents
Related api: https://visactor.io/vtable/option/PivotTable#rowHierarchyType ('grid'% 20% 7C% 20'tree ')
Tutorial: https://visactor.io/vtable/guide/table_type/Pivot_table/pivot_table_tree
github：https://github.com/VisActor/VTable
This content originally appeared on DEV Community and was authored by Ray
Ray | Sciencx (2024-07-04T03:31:58+00:00) How the VTable component progressively loads sub-nodes in pivot tables. Retrieved from https://www.scien.cx/2024/07/04/how-the-vtable-component-progressively-loads-sub-nodes-in-pivot-tables/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.