DOJO:LazyTreeGrid中的Lazy加载节点-查找示例代码
DOJO: Lazy loading nodes in LazyTreeGrid - looking for example code
我正在寻找一个如何将QueryReadStore(或其他存储)与dojox.grid.LazyTreeGrid一起使用的示例?
我希望能够显示大型结构,并从服务器上只加载必要的必需数据。应仅从专用服务器脚本加载打开节点的子节点。
我已经在dojox.grid.DataGrid中使用QueryReadStore了,它工作得很好:)
救命,谢谢。
这里有一个基于我目前正在做的一些事情的冗长解释/示例。这假设Dojo1.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).
该处理程序可以用您喜欢的服务器端语言(即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
}
网格将显示这两种水果。apple
将具有expando,但不具有watermelon
(由于children
属性)。假设用户单击了apple
expando。网格将请求其子级:
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
行下显示一个子项。
我想我有你想要的东西。一些关于将QueryReadStore与dojox.grid.LazyTreeGrid一起使用的优秀示例代码,也一步一步地进行了充分的解释。
请参见此处:http://livedocs.dojotoolkit.org/dojox/grid/LazyTreeGrid
我希望这能促进你的工作,你能够实现你的目标。
问候
弗兰克。
- 查找将 onclick 事件分配给节点的代码
- javascript代码查找最接近零的tescase
- 正在查找这些JQuery代码行的Javascript
- 用于查找JS代码中引用的DOM元素的工具
- ace编辑器查找代码片段
- 使用javascript查找并删除所有出现的短代码
- 代码在shell中运行,但提供'可以't查找变量'从文件运行时出错
- 什么'用这个代码查找高度英寸是错误的
- 在代码块中查找并替换为jQuery
- 在IE8中查找复选框时,我的代码有什么区别
- 用于查找在 jQuery 元素集中具有特定类的元素的索引的单行代码
- 为什么我的代码不能用于查找 JavaScript 中的数组中是否存在值
- 如何在整个文件夹中查找一行代码
- 如何查找 Angular.js 中已经在进行中的哪一行代码触发器$digest
- [代码播放器]当 iframe 内容从文本区域使用 JavaScript 动态加载时,如何在 iframe 内查找元素
- JavaScript尝试查找兔子代码
- 如何获取解析云代码查找结果
- 用于查找和连接子字符串的代码
- 从头开始从_underscore.js中查找代码
- 是否有可能使用Javascript来搜索Javascript代码,以查找代码将尝试访问的所有url