我是dojo的新手,我正在尝试使用lazytreegrid,我在文档中找到了这个示例代码
http://dojotoolkit.org/reference-guide/1.7/dojox/grid/LazyTreeGrid.html
但我想从java的servlet/portlet/加载树数据,子节点应该是延迟加载的。找不到任何简单的例子来表明可以做到这一点
我是dojo的新手,我正在尝试使用lazytreegrid,我在文档中找到了这个示例代码
http://dojotoolkit.org/reference-guide/1.7/dojox/grid/LazyTreeGrid.html
但我想从java的servlet/portlet/加载树数据,子节点应该是延迟加载的。找不到任何简单的例子来表明可以做到这一点
我已经修改了http://dojotoolkit.org/reference-guide/1.9/dojox/grid/LazyTreeGrid.html上提供的示例,以使其与 QueryReadStore 一起使用,后者以 JSON 格式从后端服务获取数据。
我的示例服务以以下格式返回数据:
{"identifier":"id","label":"name","items":[{"name":"Africa","id":1,"type":"CONTINENT","population":null,"area":null,"hasChildren":true},{"name":"Asia","id":8,"type":"CONTINENT","population":null,"area":null,"hasChildren":true}]}
请注意,与 ItemFileWriteStore 示例不同,子元素不是内联填充的。
现在网页代码:
// Dependencies
dojo.require("dojox.grid.LazyTreeGrid");
dojo.require("dojox.grid.LazyTreeGridStoreModel");
dojo.require("dojox.data.QueryReadStore");
.
.
.
// Use QueryReadStore instead of ItemFileWriteStore.
// The URL points to a service that returns root nodes of the tree in JSON format.
// When a node is expanded, the same URL gets called with an extra parameter
// called parentId=<id> where id is identifier of the clicked row. The service
// should return children of the specified id.
var store = new dojox.data.QueryReadStore({url: "./admin/getRootNodes.json",
requestMethod: "get" });
// hasChildren field in the JSON response should be boolean (true - has children, false otherwise)
var model = new dojox.grid.LazyTreeGridStoreModel({
store: store,
serverStore: true,
childrenAttrs: ['hasChildren']
});
/* set up layout */
var layout = [
{name: 'Name', field: 'name', width: '30%'},
{name: 'Type', field: 'type', width: '30%'},
{name: 'Area', field: 'area', width: '20%'},
{name: 'Population', field: 'population', width: '20%'}
];
/* create a new grid: */
var grid = new dojox.grid.LazyTreeGrid({
id: 'grid',
treeModel: model,
structure: layout,
rowSelector: '20px',
}, document.createElement('div'));
/* append the new grid to the div */
dojo.byId("gridDiv").appendChild(grid.domNode);
/* Call startup() to render the grid */
grid.startup();
第一的:
您的 Servlet 必须以 json / xml 格式输出某些内容并将其作为 weburl 提供。
例如网址http://api.geonames.org/citiesJSON
输出:
{"status":{"message":"请为每次调用添加用户名,以便地理名称能够识别调用应用程序并计算信用使用量。","value":10}}
当您在网络浏览器中访问 url 时,您的 servlet 应该具有相同的行为(当然不是相同的数据)。
下一个:
将网格与 JsonRestStore 一起用作存储,而不是与 ItemFileWriteStore 一起使用。我的示例使用 DataGrid,但 LazyTreeGrid 应该以与 JsonRestStore 相同的方式工作......
require(["dojo/ready","dojo/aspect",'dojo/_base/lang', 'dojo/topic', 'dojox/grid/DataGrid' ,'dojo/store/JsonRest','dojo/data/ObjectStore'],
function(ready,aspect,lang,topic, DataGrid, JsonRest,ObjectStore){
ready(1,function() {
var store = new JsonRest({
target: "http://yourUrl",
sortParam: "sortby"
});
var layout = [[
{'name': ' ', 'field': 'extension', 'width': '20px',noresize:true} // Adapt field to json data
]];
var dataStore=ObjectStore({objectStore: store});
var grid = new DataGrid({
store:dataStore,
queryTarget:"objectId",
structure: layout});
grid.setQuery({objectId:"1"}); // First QUERY !
grid.placeAt("myDivId");
grid.startup();
});
});