Dojo 如何将分层Json映射到ItemFileWriteStore？

我有包含子元素的Json数据。我需要将存储绑定到可编辑的网格，并将编辑填充到存储。 数据树确实会填充到ItemFileWriteStore中。datagrid只显示父数据，不显示子数据

SAMPLE.TXT

    {
    "items": [
        {
            "profileId": "1",
            "profileName": "ABC",
            "profileType": "EmailProfile",
            "profilePreferences": [
                {
                    "profilePreferenceId": "1",
                    "displayText": "Bob",
                    "address": "primary@some.com"
                },
                {
                    "profilePreferenceId": "2",
                    "displayText": "Sally",
                    "address": "secondary@some.com"
                },
                {
                    "profilePreferenceId": "3",
                    "displayText": "Joe",
                    "address": "alternate@some.com"
                }
            ]
        }
    ]
}

javascript

var sampleLayout = [
  [
  { field: 'profileName', name: 'profileName', width: '100px' },
  { field: 'profilePreferences.displayText', name: 'displayText', width: '100px' },
  { field: 'profilePreferences.address', name: 'address', width: '100px' }      
  ]];


function populateGrid() {
    var url = "sample.txt"; //Will be replaced with endpoint URL

    dojo.xhrGet({
        handleAs: 'json',
        url: url,
        error: function (e) {
            alert("Error: " + e.message);
        },
        load: showJsonData
    });
}


function showJsonData(response, ioArgs) {
    var profileStore = new dojo.data.ItemFileWriteStore({
        data: {
            items: response.items
        }
    });

    var sampleGrid = dijit.byId("sampleGrid");
    sampleGrid.store = profileStore;
    sampleGrid.startup();
}

---

您需要使用dojox.grid.TreeGrid或“伪造”JSON来为每一个偶数行显示一个空白的profileName。下面是两个示例，一个用于TreeGrid，另一个用于DataGrid，但未在工作环境中测试

给定分层JSON：

{
  identifier: 'id' // a good custom to make an id pr item, note spaces and odd chars are invalid

      items: [{
         id: '1',
         profileName: 'Admin',
         profilePreferences: [
           { id: '1_1', displayText: 'John Doe', address: 'Big Apple' }
           { id: '1_2', displayText: 'Jane Doe', address: 'Hollywood' }
         ]

      }, {
         id: '2',
         profileName: 'Visitor',
         profilePreferences: [
           { id: '2_1', displayText: 'Foo', address: 'Texas' }
           { id: '2_2', displayText: 'Bar', address: 'Indiana' }
         ]

      }]
    }

{
    cells: [
      [
        { field: "profileName", name: "profileName", width: "100px" },
        { field: "profilePreferences",
          children: [
            { field: "displayText" name: "displayText", width: "100px" },
            { field: "address" name: "address", width: "100px" }
          ]
      ]
    ]
  }

{
  identifier: 'id' // a good custom to make an id pr item, note spaces and odd chars are invalid

      items: [{
         id: '1',
         profileName: 'Admin', preferenceText: '', preferenceAddr: ''
     }, {
        id: '2', 
        profileName: '',      preferenceText: 'John', preferenceAddr: 'NY'
     }, {
         id: '3',
         profileName: 'Visitor', preferenceText: '', preferenceAddr: ''
     }, {

         id: '4',         // Not with '.' dot seperator like so
         profileName: '',    preference.Text: 'Jane Doe', preference.Addr: 'Hollywood'
     } ]

[[
  {'name': 'Profilename', 'field': 'profileName', 'width': '100px'},
  {'name': 'User name', 'field': 'preferenceText', 'width': '100px'},
  {'name': 'Address', 'field': 'preferenceAddr', 'width': '200px'}
]]

树状结构：

{
  identifier: 'id' // a good custom to make an id pr item, note spaces and odd chars are invalid

      items: [{
         id: '1',
         profileName: 'Admin',
         profilePreferences: [
           { id: '1_1', displayText: 'John Doe', address: 'Big Apple' }
           { id: '1_2', displayText: 'Jane Doe', address: 'Hollywood' }
         ]

      }, {
         id: '2',
         profileName: 'Visitor',
         profilePreferences: [
           { id: '2_1', displayText: 'Foo', address: 'Texas' }
           { id: '2_2', displayText: 'Bar', address: 'Indiana' }
         ]

      }]
    }

{
    cells: [
      [
        { field: "profileName", name: "profileName", width: "100px" },
        { field: "profilePreferences",
          children: [
            { field: "displayText" name: "displayText", width: "100px" },
            { field: "address" name: "address", width: "100px" }
          ]
      ]
    ]
  }

{
  identifier: 'id' // a good custom to make an id pr item, note spaces and odd chars are invalid

      items: [{
         id: '1',
         profileName: 'Admin', preferenceText: '', preferenceAddr: ''
     }, {
        id: '2', 
        profileName: '',      preferenceText: 'John', preferenceAddr: 'NY'
     }, {
         id: '3',
         profileName: 'Visitor', preferenceText: '', preferenceAddr: ''
     }, {

         id: '4',         // Not with '.' dot seperator like so
         profileName: '',    preference.Text: 'Jane Doe', preference.Addr: 'Hollywood'
     } ]

[[
  {'name': 'Profilename', 'field': 'profileName', 'width': '100px'},
  {'name': 'User name', 'field': 'preferenceText', 'width': '100px'},
  {'name': 'Address', 'field': 'preferenceAddr', 'width': '200px'}
]]

参考：

给定扁平化的“假孩子”JSON：

{
  identifier: 'id' // a good custom to make an id pr item, note spaces and odd chars are invalid

      items: [{
         id: '1',
         profileName: 'Admin',
         profilePreferences: [
           { id: '1_1', displayText: 'John Doe', address: 'Big Apple' }
           { id: '1_2', displayText: 'Jane Doe', address: 'Hollywood' }
         ]

      }, {
         id: '2',
         profileName: 'Visitor',
         profilePreferences: [
           { id: '2_1', displayText: 'Foo', address: 'Texas' }
           { id: '2_2', displayText: 'Bar', address: 'Indiana' }
         ]

      }]
    }

{
    cells: [
      [
        { field: "profileName", name: "profileName", width: "100px" },
        { field: "profilePreferences",
          children: [
            { field: "displayText" name: "displayText", width: "100px" },
            { field: "address" name: "address", width: "100px" }
          ]
      ]
    ]
  }

{
  identifier: 'id' // a good custom to make an id pr item, note spaces and odd chars are invalid

      items: [{
         id: '1',
         profileName: 'Admin', preferenceText: '', preferenceAddr: ''
     }, {
        id: '2', 
        profileName: '',      preferenceText: 'John', preferenceAddr: 'NY'
     }, {
         id: '3',
         profileName: 'Visitor', preferenceText: '', preferenceAddr: ''
     }, {

         id: '4',         // Not with '.' dot seperator like so
         profileName: '',    preference.Text: 'Jane Doe', preference.Addr: 'Hollywood'
     } ]

[[
  {'name': 'Profilename', 'field': 'profileName', 'width': '100px'},
  {'name': 'User name', 'field': 'preferenceText', 'width': '100px'},
  {'name': 'Address', 'field': 'preferenceAddr', 'width': '200px'}
]]

数据网格结构：

{
  identifier: 'id' // a good custom to make an id pr item, note spaces and odd chars are invalid

      items: [{
         id: '1',
         profileName: 'Admin',
         profilePreferences: [
           { id: '1_1', displayText: 'John Doe', address: 'Big Apple' }
           { id: '1_2', displayText: 'Jane Doe', address: 'Hollywood' }
         ]

      }, {
         id: '2',
         profileName: 'Visitor',
         profilePreferences: [
           { id: '2_1', displayText: 'Foo', address: 'Texas' }
           { id: '2_2', displayText: 'Bar', address: 'Indiana' }
         ]

      }]
    }

{
    cells: [
      [
        { field: "profileName", name: "profileName", width: "100px" },
        { field: "profilePreferences",
          children: [
            { field: "displayText" name: "displayText", width: "100px" },
            { field: "address" name: "address", width: "100px" }
          ]
      ]
    ]
  }

{
  identifier: 'id' // a good custom to make an id pr item, note spaces and odd chars are invalid

      items: [{
         id: '1',
         profileName: 'Admin', preferenceText: '', preferenceAddr: ''
     }, {
        id: '2', 
        profileName: '',      preferenceText: 'John', preferenceAddr: 'NY'
     }, {
         id: '3',
         profileName: 'Visitor', preferenceText: '', preferenceAddr: ''
     }, {

         id: '4',         // Not with '.' dot seperator like so
         profileName: '',    preference.Text: 'Jane Doe', preference.Addr: 'Hollywood'
     } ]

[[
  {'name': 'Profilename', 'field': 'profileName', 'width': '100px'},
  {'name': 'User name', 'field': 'preferenceText', 'width': '100px'},
  {'name': 'Address', 'field': 'preferenceAddr', 'width': '200px'}
]]

---

reference

您需要使用dojox.grid.TreeGrid或“假”JSON来为每一个偶数行显示一个空白profileName。下面是两个示例，一个用于TreeGrid，另一个用于DataGrid，但未在工作环境中测试

给定分层JSON：

{
  identifier: 'id' // a good custom to make an id pr item, note spaces and odd chars are invalid

      items: [{
         id: '1',
         profileName: 'Admin',
         profilePreferences: [
           { id: '1_1', displayText: 'John Doe', address: 'Big Apple' }
           { id: '1_2', displayText: 'Jane Doe', address: 'Hollywood' }
         ]

      }, {
         id: '2',
         profileName: 'Visitor',
         profilePreferences: [
           { id: '2_1', displayText: 'Foo', address: 'Texas' }
           { id: '2_2', displayText: 'Bar', address: 'Indiana' }
         ]

      }]
    }

{
    cells: [
      [
        { field: "profileName", name: "profileName", width: "100px" },
        { field: "profilePreferences",
          children: [
            { field: "displayText" name: "displayText", width: "100px" },
            { field: "address" name: "address", width: "100px" }
          ]
      ]
    ]
  }

{
  identifier: 'id' // a good custom to make an id pr item, note spaces and odd chars are invalid

      items: [{
         id: '1',
         profileName: 'Admin', preferenceText: '', preferenceAddr: ''
     }, {
        id: '2', 
        profileName: '',      preferenceText: 'John', preferenceAddr: 'NY'
     }, {
         id: '3',
         profileName: 'Visitor', preferenceText: '', preferenceAddr: ''
     }, {

         id: '4',         // Not with '.' dot seperator like so
         profileName: '',    preference.Text: 'Jane Doe', preference.Addr: 'Hollywood'
     } ]

[[
  {'name': 'Profilename', 'field': 'profileName', 'width': '100px'},
  {'name': 'User name', 'field': 'preferenceText', 'width': '100px'},
  {'name': 'Address', 'field': 'preferenceAddr', 'width': '200px'}
]]

树状结构：

{
  identifier: 'id' // a good custom to make an id pr item, note spaces and odd chars are invalid

      items: [{
         id: '1',
         profileName: 'Admin',
         profilePreferences: [
           { id: '1_1', displayText: 'John Doe', address: 'Big Apple' }
           { id: '1_2', displayText: 'Jane Doe', address: 'Hollywood' }
         ]

      }, {
         id: '2',
         profileName: 'Visitor',
         profilePreferences: [
           { id: '2_1', displayText: 'Foo', address: 'Texas' }
           { id: '2_2', displayText: 'Bar', address: 'Indiana' }
         ]

      }]
    }

{
    cells: [
      [
        { field: "profileName", name: "profileName", width: "100px" },
        { field: "profilePreferences",
          children: [
            { field: "displayText" name: "displayText", width: "100px" },
            { field: "address" name: "address", width: "100px" }
          ]
      ]
    ]
  }

{
  identifier: 'id' // a good custom to make an id pr item, note spaces and odd chars are invalid

      items: [{
         id: '1',
         profileName: 'Admin', preferenceText: '', preferenceAddr: ''
     }, {
        id: '2', 
        profileName: '',      preferenceText: 'John', preferenceAddr: 'NY'
     }, {
         id: '3',
         profileName: 'Visitor', preferenceText: '', preferenceAddr: ''
     }, {

         id: '4',         // Not with '.' dot seperator like so
         profileName: '',    preference.Text: 'Jane Doe', preference.Addr: 'Hollywood'
     } ]

[[
  {'name': 'Profilename', 'field': 'profileName', 'width': '100px'},
  {'name': 'User name', 'field': 'preferenceText', 'width': '100px'},
  {'name': 'Address', 'field': 'preferenceAddr', 'width': '200px'}
]]

参考：

给定扁平化的“假孩子”JSON：

{
  identifier: 'id' // a good custom to make an id pr item, note spaces and odd chars are invalid

      items: [{
         id: '1',
         profileName: 'Admin',
         profilePreferences: [
           { id: '1_1', displayText: 'John Doe', address: 'Big Apple' }
           { id: '1_2', displayText: 'Jane Doe', address: 'Hollywood' }
         ]

      }, {
         id: '2',
         profileName: 'Visitor',
         profilePreferences: [
           { id: '2_1', displayText: 'Foo', address: 'Texas' }
           { id: '2_2', displayText: 'Bar', address: 'Indiana' }
         ]

      }]
    }

{
    cells: [
      [
        { field: "profileName", name: "profileName", width: "100px" },
        { field: "profilePreferences",
          children: [
            { field: "displayText" name: "displayText", width: "100px" },
            { field: "address" name: "address", width: "100px" }
          ]
      ]
    ]
  }

{
  identifier: 'id' // a good custom to make an id pr item, note spaces and odd chars are invalid

      items: [{
         id: '1',
         profileName: 'Admin', preferenceText: '', preferenceAddr: ''
     }, {
        id: '2', 
        profileName: '',      preferenceText: 'John', preferenceAddr: 'NY'
     }, {
         id: '3',
         profileName: 'Visitor', preferenceText: '', preferenceAddr: ''
     }, {

         id: '4',         // Not with '.' dot seperator like so
         profileName: '',    preference.Text: 'Jane Doe', preference.Addr: 'Hollywood'
     } ]

[[
  {'name': 'Profilename', 'field': 'profileName', 'width': '100px'},
  {'name': 'User name', 'field': 'preferenceText', 'width': '100px'},
  {'name': 'Address', 'field': 'preferenceAddr', 'width': '200px'}
]]

数据网格结构：

{
  identifier: 'id' // a good custom to make an id pr item, note spaces and odd chars are invalid

      items: [{
         id: '1',
         profileName: 'Admin',
         profilePreferences: [
           { id: '1_1', displayText: 'John Doe', address: 'Big Apple' }
           { id: '1_2', displayText: 'Jane Doe', address: 'Hollywood' }
         ]

      }, {
         id: '2',
         profileName: 'Visitor',
         profilePreferences: [
           { id: '2_1', displayText: 'Foo', address: 'Texas' }
           { id: '2_2', displayText: 'Bar', address: 'Indiana' }
         ]

      }]
    }

{
    cells: [
      [
        { field: "profileName", name: "profileName", width: "100px" },
        { field: "profilePreferences",
          children: [
            { field: "displayText" name: "displayText", width: "100px" },
            { field: "address" name: "address", width: "100px" }
          ]
      ]
    ]
  }

{
  identifier: 'id' // a good custom to make an id pr item, note spaces and odd chars are invalid

      items: [{
         id: '1',
         profileName: 'Admin', preferenceText: '', preferenceAddr: ''
     }, {
        id: '2', 
        profileName: '',      preferenceText: 'John', preferenceAddr: 'NY'
     }, {
         id: '3',
         profileName: 'Visitor', preferenceText: '', preferenceAddr: ''
     }, {

         id: '4',         // Not with '.' dot seperator like so
         profileName: '',    preference.Text: 'Jane Doe', preference.Addr: 'Hollywood'
     } ]

[[
  {'name': 'Profilename', 'field': 'profileName', 'width': '100px'},
  {'name': 'User name', 'field': 'preferenceText', 'width': '100px'},
  {'name': 'Address', 'field': 'preferenceAddr', 'width': '200px'}
]]

---

参考

显示器应该是什么样子？（例如，嵌套行，使用不同的类名展平。）显示应展平为具有三列（profileName、displayText、address）的网格。网格将有三行；每个profilePreferences对应一个。显示应该是什么样子？（例如，嵌套行，使用不同的类名展平。）显示应展平为具有三列（profileName、displayText、address）的网格。网格将有三行；每个profilePreferences对应一个。我将显示为展开视图。另外，我收到的json结构灵活性有限。我很好奇，子元素是否总是需要命名为“childred”才能与TreeGrid兼容？如果是这样，它将如何处理多个不同名称的子节点？这取决于模型。。如果不控制json，请查看ForestStoreModel配置（ctor）参数“childrenAttrs”。但是，标准网格是无模型的，直接在附加的存储上运行，所以您的问题是'preferences.displayText'键，要正确处理它，它必须是{field:'preferences'，children:[{field:'displayText'..}]}。但是，如果你想实现一个平面网格，那么“children”不是一个选项，我会在Yes中放两个例子，否则商店不会构造，相信你会有一个例外，商店只在ID上运行，那么子映射就是简单的引用。请参见，注意每个子对象是如何引用“identifier”值的。我将以展开视图的形式呈现。另外，我收到的json结构灵活性有限。我很好奇，子元素是否总是需要命名为“childred”才能与TreeGrid兼容？如果是这样，它将如何处理多个不同名称的子节点？这取决于模型。。如果不控制json，请查看ForestStoreModel配置（ctor）参数“childrenAttrs”。但是，标准网格是无模型的，直接在附加的存储上运行，所以您的问题是'preferences.displayText'键，要正确处理它，它必须是{field:'preferences'，children:[{field:'displayText'..}]}。但是，如果你想实现一个平面网格，那么“children”不是一个选项，我会在Yes中放两个例子，否则商店不会构造，相信你会有一个例外，商店只在ID上运行，那么子映射就是简单的引用。请参见，注意每个子对象是如何引用“identifier”值的