javascript - 如何在 extjs 或 jquery 中显示 JSON 数据？

Question

我有一个格式如下的 JSON 数据：

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

我想建立一个表格或网格来显示它：

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

我应该使用 Extjs 或 jQuery 中的哪个组件？以及如何将我的 json 数据匹配到这个表中？

你能给我一些代码作为示例吗？

Answer 1

请在 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'
           }
    }

   });   

Answer 2

jQuery Grid Plugin 似乎是您需要的工具。http://www.trirand.com/blog/。

在此页面的“加载数据”部分，您应该找到一个将 JSON 对象显示为网格的工作示例。

希望我有所帮助！

Answer 3

在您的 Json 调用中像这样实现。

参考

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

 });

Answer 4

你会发现很多 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/