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

Question

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

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

我已经将 QueryReadStore 与 dojox.grid.DataGrid 一起使用，效果很好:)

帮助，谢谢。

Answer 1

这是基于我目前正在做的一些事情的冗长解释/示例。
这假设您对 Dojo 1.7 风格的包有基本的了解（例如，我们假设默认的 Dojo 包已正确设置）。

客户端（js 文件）

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();
        }
    });

服务器端：

您需要一个服务器端处理程序来侦听 url/to/load/rows 上的 GET 请求。这些请求最多有 3 个参数：

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).

该处理程序可以用您最喜欢的服务器端语言（即带有 ASP.Net MVC、Ruby 等的 C#）编写。

您的服务器处理程序的工作将是返回一个 json 结构，其中包含以下 3 个属性：

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.

客户端/服务器通信

在我之前的示例的基础上，一旦网格启动（客户端），它将请求类似以下内容：

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

服务器将返回以下内容：

{
    "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
}

网格将显示 2 个水果。 apple 将有一个 Expando，但没有 watermelon（由于 children 属性）。
假设用户单击 apple 展开。网格将请求其子项：

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

服务器可能返回类似以下内容：

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

然后，网格将在 apple 行下显示一个子项。

Answer 2

我想我这里有你要找的东西。一些关于将 QueryReadStore 与 dojox.grid.LazyTreeGrid 一起使用的优秀示例代码，并且也一步一步地进行了充分解释。

请参阅此处：http://livedocs.dojotoolkit.org/dojox/grid/LazyTreeGrid

我希望这能促进您的工作并能够实现您的目标。

问候

弗兰克。