DOJO: отложенная загрузка узлов в LazyTreeGrid - поиск примера кода - PullRequest
Новая
       4

DOJO: отложенная загрузка узлов в LazyTreeGrid - поиск примера кода

4 голосов
/ 04 февраля 2012

Я ищу пример использования QueryReadStore (или другого магазина) с dojox.grid.LazyTreeGrid?

Я хочу отображать большие структуры и загружать с сервера только необходимые данные. Из сценария выделенного сервера следует загружать только потомки открытых узлов.

Я уже использую QueryReadStore с dojox.grid.DataGrid, и он прекрасно работает:)

Помогите, спасибо.

Ответы [ 2 ]

1 голос
/ 27 июля 2012

Вот длинное объяснение / пример, основанный на некоторых вещах, которые я сейчас делаю. Это предполагает базовый комфорт с пакетами в стиле 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();
        }
    });

Серверные:

Вам нужен обработчик на стороне сервера, который будет прослушивать запросы GET на url/to/load/rows. Эти запросы будут иметь до 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).

Этот обработчик может быть написан на вашем любимом серверном языке (например, C # с ASP.Net MVC, Ruby и т. Д.)

Задачей вашего обработчика сервера будет возвращение структуры 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 будет иметь расширение, но не 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.

0 голосов
/ 12 февраля 2012

Я думаю, у меня есть то, что вы ищете здесь. Отличный пример кода об использовании QueryReadStore с dojox.grid.LazyTreeGrid, который также подробно объясняется шаг за шагом.

Пожалуйста, смотрите здесь: http://livedocs.dojotoolkit.org/dojox/grid/LazyTreeGrid

Я надеюсь, что это продвинет вашу работу, и вы сможете достичь своих целей.

Привет

Франк.

...