0

次のような形式の JSON データがあります。

{
 key1: val1,
 key2: val2,
 key3: val3,
 key4: val4,
 ..
}

次のように表示するテーブルまたはグリッドを作成したいと思います。

_______________
|keys | values|
|-------------|
|key1 | val1  |
|key2 | val2  |
|key3 | val3  |
|key4 | val4  |
---------------

Extjs または jQuery のどのコンポーネントを使用すればよいですか? そして、私のjsonデータをこのテーブルに一致させる方法は?

サンプルとしてコードを教えていただけますか？

4

4 に答える 4

2

Ext js で例を見つけてください

            Ext.onReady(function(){
            var Grid1Store = new Ext.data.JsonStore({
              fields: ['keys', 'values' ],
              autoLoad: true,
              data:  [ 
                {  "keys":"Key1", "values":"Value1"},
                {  "keys":"Key2", "values":"Value2"},
                {  "keys":"Key3", "values":"Value3"},
                {  "keys":"Key4", "values":"Value4"}

              ]
            });   

                          var grid = new Ext.grid.GridPanel({
                      renderTo: Ext.getBody(),
                      frame: true,
                      title: 'Database',
                      width:300,              
                      store: Grid1Store,
                          columns: [
                               {text: "Keys", dataIndex: 'keys'},
                              {text: "Values", dataIndex: 'values'}
                          ]
                                  });

            });

json ファイルをロードする場合は、次のようなグリッド ストア コードを変更します

    var Grid1Store = new Ext.data.JsonStore({
    fields: ['keys', 'values' ],
   autoLoad: true,
  proxy:{
     type:'ajax',
          url:'something.json',
          reader:{
           root:'users'
           }
    }

   });
于 2013-11-11T08:58:19.913 に答える
0

Json Call でこのように実装します。

参照

 $.getJSON( "ajax/test.json", function( data ) {
     var items = [];
     $.each( data, function( key, val ) {
        alert ( " key=" + key + " and val = " + val + "" );
     });

 });
于 2013-11-11T08:49:05.870 に答える
0

多くの JQuery プラグインまたは単純なものが見つかります

var data = {
 key1: 'val1',
 key2: 'val2',
 key3: 'val3',
 key4: 'val4' 
};

for(var i in data){
    $('#datatable').append('<tr><td> '+ i +' </td> <td> '+data[i]+' </td></tr>');       
 }

http://jsfiddle.net/kVdZG/370/

于 2013-11-11T08:51:00.250 に答える