Question

我正在使用GridX，我正在寻找创建一个类似于http://oria.github.io/gridx/demos/tree.html的'expandoes'网格和一个列中的所有扩展，async store'

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

然而，JSON太大了（50MB）所以我想把它分解。

我希望能够使用用户需要查看的最少量数据来填充网格，然后在单击expando时，进行另一个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>

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

一个。原始数据存储。它有什么类型？ dojo.store.memory？或者它应该是一个jsonrest商店？

B中。我假设我需要对getChildren函数进行更改并在此处添加一些内容来负责获取其他数据（扩展行的子节点）？

我是否可以回拨孩子，并将自动添加到异步存储中。

以前有人做过这样的事吗？任何建议或建议将不胜感激。

由于

Answer 1

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

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

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

1 个答案: