Aurelia Slickgrid树形网格是否支持节点展开时懒加载子节点?
关于Aurelia Slickgrid树形网格懒加载的疑问
我打算用Aurelia Slickgrid展示规模可能极大的树形数据结构,理想状态是在节点展开时通过调用后端接口按需懒加载子节点。之前我用Fancytree实现了这套UI,但不知道怎么把原Fancytree的逻辑迁移到Aurelia的Tree Data Grid上。
我不确定Tree Data Grid是否支持父节点展开时懒加载子节点。
我注意到文档里定义树形数据有两种方式:
- 扁平结构(通过
parentId属性关联层级):
this.dataset = [ { id: 0, file: 'documents', parentId: null, }, { id: 1, file: 'vacation.txt', parentId: 0, }, { id: 2, file: 'bills.txt', parentId: 0, }, { id: 55, file: 'music', parentId: null, }, { id: 60, file: 'favorite-song.mp3', parentId: 55, }, { id: 61, file: 'blues.mp3', parentId: 61, }, ];
- 层级结构(通过嵌套数组属性定义子节点):
this.datasetHierarchical = [ { id: 0, file: 'documents', files: [ { id: 1, file: 'vacation.txt', size: 12 }, { id: 2, file: 'bills.txt', size: 0.5 } ] }, { id: 55, file: 'music', files: [ { id: 60, file: 'favorite-song.mp3', size: 2.3 }, { id: 61, file: 'blues.mp3', size: 5.5 } ] }, ];
我看到文档里有一节讲如何给网格提供数据,提到可以通过实现getLength()、getItem(index)和getItemMetadata(index)等方法自定义数据提供者,但不确定这是不是只适用于扁平表格网格,而非树形网格?
我想要找到和以下Fancytree逻辑等价的实现方式:
$("#tree").fancytree({ checkbox: true, selectMode: 3, source: fileSystemService.getRoots().then(roots => { return roots.map((node) => ({ title: node.name, key: node.path, folder: true, lazy: true })); }), lazyLoad: function(event, data) { const node = data.node; data.result = fileSystemService.getChildren(node.key).then(nodes => { return nodes.map((node) => ({ title: node.name, key: node.path, folder: node.type !== FileSystemService.File, lazy: node.type !== FileSystemService.File })); }); }, loadChildren: function(event, data) { data.node.fixSelection3AfterClick(); }, ... }
在这个Fancytree配置里:
- 根节点通过异步请求初始化:
source: fileSystemService.getRoots().then(roots => { ... }),
- 所有根节点的子节点(以及更深层级的节点)都会在展开时通过异步请求懒加载:
data.result = fileSystemService.getChildren(node.key).then(nodes => { ... }),
请问Aurelia Slickgrid的Tree Data Grid是否有与之等价的懒加载行为?
内容的提问来源于stack exchange,提问作者wcmatthysen
相关产品推荐
相关产品推荐

