使用TreeStore和TreePanel更正JSON和模型 [英] Correct JSON and Model with TreeStore and TreePanel

问题描述

我有来自服务器端的JSON字符串：

I have a JSON String comes from the server side:

{"success":"true","total":"6","list":
  [{"id":"1","name":"folder1","parentid":"null","type":"0"},
   {"id":"2","name":"r1","parentid":"1","type":"1"},
   {"id":"3","name":"folder2","parentid":"1","type":"0"},
   {"id":"4","name":"r2","parentid":"3","type":"1"},
   {"id":"5","name":"r3","parentid":"null","type":"1"},
   {"id":"6","name":"folder3","parentid":"null","type":"0"}]}

如何将其转换为树？任何人都可以建议我如何获取列表中的元素（id，name，parentid，type）？

How do I turn that into a tree? Can anyone suggest me how to get the elements in the list (id, name, parentid, type)?

推荐答案

我用过以下结构：

模型

Ext.define('MyApp.model.MyTreeModel', {
    extend: 'Ext.data.Model',
    fields: [
         'someStringIdentifier',
         'children',
         'dataForThisNode',
    ],
});

商店

Ext.define('MyApp.store.MyTreeStore', {
    extend: 'Ext.data.TreeStore',
    model: 'MyApp.model.MyTreeModel',
    storeId: 'cubeDynamicStoreId',
    autoLoad: false,

    proxy: {
        type: 'ajax',
        api: {
            read : '/myapp/rest/myquery',
        },
        reader: {
            type: 'json',
            root: 'children',
            successProperty: 'success',
            idProperty: 'id',
        },
    },

    // bug in extjs4.1 autoLoad is ignored
    // specifying "loaded: true" resolves the problem
    root: {
        expanded: true,
        loaded: true,
    },
});

示例JSON（使用 http://jsonviewer.stack.hu/ 可视化）

Sample JSON ( use http://jsonviewer.stack.hu/ to visualize)

使用leaf属性停止任何节点的扩展

Use the leaf property to stop expansion at any node

{"children":{"leaf":false,"someStringIdentifier":"Total","dataForThisNode":{},"children":[{"leaf":true,"someStringIdentifier":"data1","dataForThisNode":{},"children":[{"leaf":false,"someStringIdentifier":"2012","dataForThisNode":{},"children":null},{"leaf":false,"someStringIdentifier":"2013","dataForThisNode":{},"children":null},{"leaf":false,"someStringIdentifier":"2014","dataForThisNode":{},"children":null},{"leaf":false,"someStringIdentifier":"2015","dataForThisNode":{},"children":null},{"leaf":false,"someStringIdentifier":"2016","dataForThisNode":{},"children":null},{"leaf":false,"someStringIdentifier":"2017","dataForThisNode":{},"children":null},{"leaf":false,"someStringIdentifier":"2018","dataForThisNode":{},"children":null}]},{"leaf":true,"someStringIdentifier":"data2","dataForThisNode":{},"children":[{"leaf":false,"someStringIdentifier":"2012","dataForThisNode":{},"children":null},{"leaf":false,"someStringIdentifier":"2013","dataForThisNode":{},"children":null},{"leaf":false,"someStringIdentifier":"2014","dataForThisNode":{},"children":null},{"leaf":false,"someStringIdentifier":"2015","dataForThisNode":{},"children":null},{"leaf":false,"someStringIdentifier":"2016","dataForThisNode":{},"children":null},{"leaf":false,"someStringIdentifier":"2017","dataForThisNode":{},"children":null},{"leaf":false,"someStringIdentifier":"2018","dataForThisNode":{},"children":null}]}]},"success":true}

这篇关于使用TreeStore和TreePanel更正JSON和模型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！