3

サーバー側からのJSON文字列があります：

{"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) を取得する方法を誰かに教えてもらえますか?

4

3 に答える 3

3

次の構造を使用しました。

モデル

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/を使用して視覚化）

リーフプロパティを使用して、任意のノードで拡張を停止します

{"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}
于 2012-10-25T14:57:15.340 に答える
1

ストアの定義から始めましょう。

Ext.define('app.store.Tasks', {

    extend: 'Ext.data.TreeStore',    
    model:  'app.model.Task',

    autoSync: true,
    autoLoad: true,

    root: {
        text: 'Root',
        id: 'NULL',
        expanded: true
    },
});

注意すべき重要なことは、ここで拡張していることTreeStoreです。Ext.data.NodeInterfaceしたがって、モデル レコードは、多くのツリー関連フィールド (たとえば、 など) を含むでラップされparentNodeます。

次に、モデル定義に:

Ext.define('app.model.Task', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'name'     , type: 'string'},

        {name: 'iconCls'  , type: 'string', defaultValue: 'treenode-no-icon'},
        {name: 'expanded' , type: 'boolean', defaultValue: true, persist: false},
        {name: 'index'     , type: 'int'},        
    ],

    proxy: {
        type: 'direct',

        api: {
            create:  Tasks.Create,
            read:    Tasks.Read,
            update:  Tasks.Update,
            destroy: Tasks.Destroy,
        },
    },

});

定義した唯一の「実際の」フィールドは ですname。他のすべてのフィールドは の一部ですNodeInterface。iconClsデフォルト値はアイコンなしです。ノードを折りたたんだり展開したりしても、更新サーバーの呼び出しが発生しないようexpandedに設定されています。が含まれているため、ユーザーが (ドラッグ アンド ドロップを使用して) ノードを並べ替えると、サーバー呼び出しが行われます。persist:falseindex

idモデルのデフォルトidPropertyはであるため、フィールドがないことに注意してくださいid。ExtJS は、JSON にidフィールドが含まれている場合、それがレコードの一意の ID を表すことを理解するのに十分スマートです。

また、フィールドがないことにも注意してくださいparentId- 正しい JSON を (childrenプロパティを持つノードと共に)提供することで、各ノードNodeInterfaceの正しい結果が得られます。parentNode

次に、JSON:

{
    "success":true,
    "children":[
     {
        "id":"1",
        "name":"Home",
        "children":[
           {
              "id":"6",
              "name":"Emails",
              "leaf":true
           },
           {
              "id":"7",
              "name":"Bath",
              "leaf":true
           }
        ],
        "leaf":false
     },         
    ]
}

それだけです！

于 2012-08-01T17:31:44.773 に答える
0

この主題に関する Izhaki からの最初の回答は素晴らしいものですが、ノードの説明を表示することを期待している場合、誤解を招くようであり、そのままでは機能しません。私はこれに数時間苦労しました。この説明を表示する唯一の方法は、「名前」を「テキスト」に変更することです。下記参照。

Ext.define('app.model.Task', {
extend: 'Ext.data.Model',
fields: [
    {name: 'text'     , type: 'string'},

    {name: 'iconCls'  , type: 'string', defaultValue: 'treenode-no-icon'},
    {name: 'expanded' , type: 'boolean', defaultValue: true, persist: false},
    {name: 'index'     , type: 'int'},        
],
于 2014-01-24T21:55:48.467 に答える