javascript - DOJO：LazyTreeGrid 中的延迟加载节点 - 寻找示例代码

Question

我正在寻找如何将 QueryReadStore （或其他一些商店）与 dojox.grid.LazyTreeGrid 一起使用的示例？

我希望能够显示大结构并仅从服务器加载必要的必需数据。仅应从专用服务器脚本加载开放节点的子节点。

我已经在使用 QueryReadStore 和 dojox.grid.DataGrid 并且效果很好:)

帮助，谢谢。

Answer 1

Here is a long-winded explanation/sample based on some stuff I am currently doing. This assumes basic comfort with Dojo 1.7-style packages (for instance, we assume the default Dojo packages are correctly set-up).

Client-side (js file)

require(["dojo/ready",
    "dojox/grid/LazyTreeGridStoreModel",
    "dojox/data/QueryReadStore",
    "dojox/grid/LazyTreeGrid"], function(ready, LazyTreeGridStoreModel, QueryReadStore, LazyTreeGrid) {
        ready(function() {
            var cellLayout = [
                {name: 'Name of fruit', field: 'name', width: '300px', defaultValue: ""},
                {name: 'Color of fruit', field: 'color', width: '100px', defaultValue: ""},
                {name: 'Size of fruit', field: 'size', width: '100px', defaultValue: ""}
            ];

            // This is the url on which your server will listen for GET requests
            var dataStore = new QueryReadStore({url: "url/to/load/rows"});
            var treeModel = new LazyTreeGridStoreModel({store: dataStore, childrenAttrs: ['children'], serverStore: true});

            var grid = new LazyTreeGrid({
                treeModel: treeModel,
                structure: cellLayout,
                autoHeight: 20}, "gridContainerId"); // you need to have a DOM element by that id
            grid.startup();
        }
    });

Server-side:

You need a server-side handler that will listen to GET requests on url/to/load/rows. Those requests will have up to 3 parameters:

start    - 0-based index of the first item to return
count    - number of items to return
parentId - Id of the parent of the children items that are requested.
           Optional, not present for 1st call (because 1st-level objects have no parents).

That handler can be written in your favorite server-side language (i.e. C# with ASP.Net MVC, Ruby, etc.)

The job of your server handler will be to return a json structure containing the following 3 attributes:

items       - Array containing the items you want to display.
              Each item represents a row in the grid. Each item should
              have at least some of the fields you specified in your layout
              and must have the 2 following characteristics:
                - Must have a "children" attribute. That is a bool value.
                  If true, the row is assumed to have children and will have
                  an expando left of it. The grid query the server for children when you expand it.
                  If false, the row is considered terminal, no expando is shown.

                - Must have a unique id. This will be the id that will be set in the "parentId"
                  param when querying the server for the children of that row. It must be stored
                  in the field referred to by the "identifier" attribute (see below).

identifier  - The name of the attribute of each item that contains its unique id.
numRows     - The number of total items existing on this level (not just the number of items you sent back).
              This is used to set the grid & scrollbar size and other UI things.

Client/Server communication

To build upon my previous example, as soon as the grid is started-up (client-side), it will request something like:

GET url/to/load/rows?start=0&count=25

The server would return the following:

{
    "items":[
        {"name": "apple", "color": "red", "size": "small", "uniqueId":"a1", "children": true},
        {"name": "watermelon", "color": "green", "size": "big", "uniqueId":"b1", "children": false}
    ],
    "identifier": "uniqueId",
    "numRows":2
}

The grid will display the 2 fruits. apple will have an expando, but not watermelon (due to the children attribute). Assume the user clicked on the apple expando. The grid will request its children:

GET url/to/load/rows?parentId=a1&start=0&count=25

The server could return something like:

{
    "items":[
        {"name": "mcintosh", "color": "red-green", "size": "small", "uniqueId":"a2", "children": false}
    ],
    "identifier": "uniqueId",
    "numRows":1
}

The grid will then display a single child under the apple row.

Answer 2

我想我有你在这里寻找的东西。一些关于使用 QueryReadStore 和 dojox.grid.LazyTreeGrid 的优秀示例代码，它也被一步一步地完整解释。

请看这里： http: //livedocs.dojotoolkit.org/dojox/grid/LazyTreeGrid

我希望这会促进您的工作，并且您能够实现自己的目标。

问候

坦率。