Ահա մի երկարաշունչ բացատրություն/նմուշ՝ հիմնված որոշ բաների վրա, որոնք ես այժմ անում եմ: Սա ենթադրում է հիմնական հարմարավետություն 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-ով և այլն)
Ձեր սերվերի մշակողի աշխատանքը կլինի հետևյալ 3 ատրիբուտները պարունակող json կառուցվածքը վերադարձնելը.
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
տողի տակ:
27.07.2012