Question

我是dojo的新手，我正在尝试使用lazytreegrid，我在文档中找到了这个示例代码

http://dojotoolkit.org/reference-guide/1.7/dojox/grid/LazyTreeGrid.html

但我想从servlet / portlet /从java加载树数据，子节点应该是延迟加载的。无法找到任何显示可以完成的简单示例

Answer 1

我修改了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();

Answer 2

<强> FIRST：

您的Servlet必须以json / xml格式输出内容并将其作为weburl提供。

例如网址http://api.geonames.org/citiesJSON

输出：

{“status”：{“message”：“请为每次通话添加用户名 geonames能够识别调用应用程序并计算学分使用。“，”“值”：10}}

当您访问webbrowser中的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(); }); });

来自服务器的dojo lazytreegrid数据

2 个答案: