带有异步数据存储的 GridX Tree Expando REST 调用（大型数据集）

Posted 2023-02-26

【中文标题】带有异步数据存储的 GridX Tree Expando REST 调用（大型数据集）

【英文标题】：GridX Tree Expando REST call (large dataset) with Async datastore

【发布时间】：2015-03-03 14:35:06

【问题描述】：

我正在使用 GridX，我希望创建一个带有类似于 http://oria.github.io/gridx/demos/tree.html 的“expandoes”的网格以及示例“一列中的所有扩展，异步存储”

我想使用从 REST 调用返回的 JSON 填充网格。

但是，JSON 太大（50MB），所以我想分解它。

我希望能够使用用户需要查看的最少数据量来填充网格，然后当单击扩展时，会进行另一个 REST 调用，并将该行的子项返回并添加到网格中。

require([
'dojo/parser',
'dojo/_base/Deferred',
'gridx/tests/support/data/TreeColumnarTestData',
'gridx/tests/support/data/TreeNestedTestData',
'gridx/tests/support/stores/ItemFileWriteStore',
'gridx/allModules',
'gridx/Grid',
'gridx/core/model/cache/Sync',
'gridx/core/model/cache/Async',
'dijit/ProgressBar',
'dijit/form/NumberTextBox',
'dojo/domReady!'
], function(parser, Deferred, dataSource, nestedDataSource, storeFactory, modules)

store = storeFactory(
    dataSource: dataSource, 
    maxLevel: 4,
    maxChildrenCount: 10
);
store.hasChildren = function(id, item)
    return item && store.getValues(item, 'children').length;
;
store.getChildren = function(item)
    return store.getValues(item, 'children');
;

storeAsync = storeFactory(
    isAsync: true,
    dataSource: dataSource, 
    maxLevel: 4,
    maxChildrenCount: 10
);
storeAsync.hasChildren = function(id, item)
    return item && storeAsync.getValues(item, 'children').length;
;
storeAsync.getChildren = function(item)
    var d = new Deferred();
    console.log('getChildren: ', storeAsync.getIdentity(item));
    setTimeout(function()
        var children = storeAsync.getValues(item, 'children');
        d.callback(children);
    , 1000);
    return d;
;

storeNested = storeFactory(
    dataSource: nestedDataSource, 
    maxLevel: 4,
    maxChildrenCount: 10
);
storeNested.hasChildren = function(id, item)
    return item && storeNested.getValues(item, 'children').length;
;
storeNested.getChildren = function(item)
    var d = new Deferred();
    setTimeout(function()
        var children = storeNested.getValues(item, 'children');
        d.callback(children);
    , 1000);
    return d;
;

var progressDecorator = function()
    return [
        "<div data-dojo-type='dijit.ProgressBar' data-dojo-props='maximum: 10000' ",
        "class='gridxHasGridCellValue' style='width: 100%;'></div>"
    ].join('');
;

layout1 = [
    //Anything except natual number (1, 2, 3...) means all levels are expanded in this column.
    id: 'number', name: 'number', field: 'number',
        expandLevel: 'all',
        width: '200px',
        widgetsInCell: true,
        decorator: progressDecorator,
        editable: true,
        editor: 'dijit/form/NumberTextBox'
    ,
    id: 'id', name: 'id', field: 'id',
    id: 'string', name: 'string', field: 'string',
    id: 'date', name: 'date', field: 'date',
    id: 'time', name: 'time', field: 'time',
    id: 'bool', name: 'bool', field: 'bool'
];
layout2 = [
    //Expandable column defaults to the first one, if no expandLevel provided.
    id: 'id', name: 'id', field: 'id',
    id: 'number', name: 'number', field: 'number',
        widgetsInCell: true,
        decorator: progressDecorator
    ,
    id: 'string', name: 'string', field: 'string',
    id: 'date', name: 'date', field: 'date',
    id: 'time', name: 'time', field: 'time',
    id: 'bool', name: 'bool', field: 'bool'
];
layout3 = [
    id: 'number', name: 'number', field: 'number',
    id: 'string', name: 'string', field: 'string',
    id: 'date', name: 'date', field: 'date',
    id: 'time', name: 'time', field: 'time',
    id: 'bool', name: 'bool', field: 'bool',
    id: 'id', name: 'id', field: 'id'
];
layout4 = [
    id: 'id', name: 'id', field: 'id',
    id: 'number', name: 'number *', field: 'number', expandLevel: 1,
    id: 'string', name: 'string *', field: 'string', expandLevel: 2,
    id: 'date', name: 'date', field: 'date',
    id: 'time', name: 'time *', field: 'time', expandLevel: 3,
    id: 'bool', name: 'bool', field: 'bool'
];


mods = [
    modules.Tree,
    modules.Pagination,
    modules.PaginationBar,
    modules.ColumnResizer,
    // modules.SelectRow,
    modules.ExtendedSelectRow,
    modules.CellWidget,
    modules.Edit,
    modules.IndirectSelectColumn,
    modules.SingleSort,
    modules.VirtualVScroller
];

parser.parse();
);

    <div id='grid2' jsid='grid2' data-dojo-type='gridx.Grid' data-dojo-props='
    cacheClass: "gridx/core/model/cache/Async",
    store: storeAsync,
    structure: layout2,
    paginationBarSizes: [1, 2, 0],
    modules: mods
'></div>

这是示例中使用的代码。我已经从代码中删除了非异步存储和嵌套存储。我不确定如何创建：

A.原始数据存储。它必须是什么类型？ dojo.store.memory？还是应该是 jsonrest 商店？

B.我假设我需要对 getChildren 函数进行更改并在此处添加一些内容以负责获取附加数据（展开行的子项）？

我可以只回调孩子，他们会自动添加到异步存储中吗？

以前有人做过类似的事情吗？任何意见或建议将不胜感激。

谢谢

【参考方案1】：

查看道场的JsonRest 看看是否有帮助。 您的 getChildren 方法如下所示：

store.getChildren = function(item) 
    return this.query(item.childId);
;