Dojo 网格嵌套 json

Posted 2023-02-16

【中文标题】Dojo 网格嵌套 json

【英文标题】：Dojo grid nested json

【发布时间】：2011-08-05 10:10:29

【问题描述】：

我想要一个连接到输出以下 json 的服务器 url 的 dojo 网格： 标识符：“id” 项目：[id：“1”，姓名：“John”，大学：姓名：“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();
);

谢谢， 克里斯蒂安

【参考方案1】：

您使用的是什么类型的商店？看看 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);
            );
        )
    );

【讨论】：

我在文档中阅读了该部分，并尝试使用具有我第一篇文章中给定 json 结构的 ItemFileReadStore，但我不起作用（在网格中给出“抱歉，遇到错误”）。我认为我的主要问题是在gridlayout中我应该给出一个字段值，以映射嵌套的元素，我以“university.name”的形式进行映射，但我不认为这是映射的方式他们

它应该确实有效。您可以隔离这部分代码并发布吗？

在开头的帖子中添加了它。

知道了。由于没有适用于这种情况的工作示例，我通过制作 xhrGet 并逐个读取对象并使用 loadItem 方法将它们添加到商店来解决类似的问题

优秀。请在我的答案左侧打勾，这样它就不会出现在未回答的列表中

【参考方案2】：

一个格式化程序：

    var nameFormatter = function(value, rowIdx)
        return value.name;
    ;
    var addressFormatter = function(value, rowIdx)
        return value.address;
    ;

    var layoutUsers = [
       [
               field: "name",
               name: "Name",
               width: 10
           ,
           
               field: "university",
               name: "University Name",
               width: 10,
               formatter: nameFormatter 
           ,
           
               field: "university",
               name: "University Address",
               width: 'auto',
               formatter: addressFormatter 
           ]];