0

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

我想使用从 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>

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

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

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

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

有没有人做过这样的事情？任何意见或建议将不胜感激。

谢谢

4

1 回答 1

0

Look into dojo's JsonRest and see if that helps. Your getChildren method would look like this:

store.getChildren = function(item) {
    return this.query(item.childId);
};
于 2015-03-21T23:53:58.677 回答