【问题标题】:Dojo grid nested jsonDojo 网格嵌套 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();
});

谢谢, 克里斯蒂安

【问题讨论】:

    标签: json dojo grid


    【解决方案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 
               }]];
    

    【讨论】:

      猜你喜欢
      • 2011-01-29
      • 1970-01-01
      • 1970-01-01
      • 2012-06-04
      • 2013-03-24
      • 1970-01-01
      • 2011-11-18
      • 2015-04-05
      • 2017-11-23
      相关资源
      最近更新 更多