我想要一个连接到服务器URL的dojo网格,该URL输出以下json:{identifier:“ id” items:[{id:“ 1”,name:“ John”,大学:{name:“ XXX “,地址:” YYY“}}]。
基本上我有一个嵌套的json。我想将大学名称和大学地址表示为网格中的单独列。
我尝试使用dojox.grid.DataGrid对象并创建网格布局,但不知道如何引用嵌套的要素,而university.name和university.address似乎不起作用。我正在使用dojo 1.6.1。
有人有指针吗?
这是我使用的js代码:
dojo.require("dojox.grid.DataGrid"); dojo.require("dojo.data.ItemFileReadStore"); dojo.addOnLoad(function(){ // our test data store for this example: var jsonStore = new dojo.data.ItemFileReadStore({ url: '/MainDeployer/ajax/users/get.json' }); var layoutUsers = [ [{ field: "name", name: "Name", width: 10 }, { field: "university.name", name: "University Name", width: 10 }, { field: "university.address", name: "University Address", width: 'auto' }]]; // create a new grid: var grid = new dojox.grid.DataGrid({ query: {}, store: jsonStore, clientSort: true, rowSelector: '20px', structure: layoutUsers }, document.createElement('div')); dojo.byId("usersTable").appendChild(grid.domNode); grid.startup(); });
谢谢,克里斯蒂安
您正在使用哪种商店?看一下dojo.data.ItemFileReadStore文档,这里有一个类似您的情况的示例:http : //dojotoolkit.org/reference-guide/dojo/data/ItemFileReadStore.html#item- structure
这将帮助您通过一次调用方法“ fetch”来获取所有项目。如果由于某些原因由于不同的json结构而无法使用,则可以继续使用ItemFileReadStore,并创建一个循环遍历json中所有对象的函数,并使用loadItem方法以此方式逐项添加项目(它不漂亮,但是可以正常工作):
var myData = {"items" : []}; var myStore = new dojo.data.ItemFileWriteStore({data: myData}); var myLayout = [{ field: 'name', name: 'Name', width: '200px' }, { field: 'universityName', name: 'University Name', width: '100px' }, { field: 'universityAddress', name: 'University Address', width: '60px' }]; var myGrid; dojo.addOnLoad(function(){ myGrid = new dojox.grid.DataGrid({ store: myStore, structure: myLayout }, document.createElement('div')); dojo.byId("myGridContainer").appendChild(myGrid.domNode); myGrid.startup(); dojo.xhrGet({ url: myURL, handleAs: "json", headers: { "Content-Type": "application/json; charset=uft-8", "Accept" : "application/json" }, load: function(responseObject, ioArgs) { myList = responseObject; dojo.forEach(myList.items, function(element) { myStore.newItem({"name": element.name, "universityName": element.university.name, "universityAddress": element.university.address}); }); }) }); }