DOJO：LazyTreeGrid中的Lazy加载节点 - 寻找示例代码 [英] DOJO: Lazy loading nodes in LazyTreeGrid - looking for example code

问题描述

我正在寻找一个如何使用具有dojox.grid.LazyTreeGrid的QueryReadStore（或其他商店）的示例？

I'm looking for an example of how to use QueryReadStore (or some other store) with dojox.grid.LazyTreeGrid ?

我想要能够显示大型结构和负载仅需要服务器所需的数据。
只有打开节点的子节点才能从专用服务器脚本加载。

I want to be able to display big structures and load only necessary required data from server. Only children of open nodes should be loaded from dedicated server script.

我已经在使用QueryReadStore与dojox.grid.DataGrid，它的工作很好:)

I'm already using QueryReadStore with dojox.grid.DataGrid and it works great :)

帮助，谢谢。

推荐答案

基于我目前正在做的一些事情的解释/样本。
这假定了Dojo 1.7风格的套餐的基本舒适度（例如，我们假设默认的Dojo包是正确设置的）。

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

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请求的服务器端处理程序。这些请求最多可以有三个参数：

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

该处理程序可以用您最喜欢的服务器端语言（即C＃与ASP.Net MVC， Ruby等）

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

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

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

服务器将返回以下：

{
    "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 expando。网格将请求其子项：

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
}

网格将在 apple下显示一个孩子行。

这篇关于DOJO：LazyTreeGrid中的Lazy加载节点 - 寻找示例代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！