Как отобразить данные JSON в extjs или jquery?

0

У меня есть данные JSON с таким форматом:

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

Я хочу создать таблицу или сетку, чтобы отобразить ее так:

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

Какой компонент в Extjs или jQuery следует использовать? И как сопоставить мои данные json в этой таблице?

Не могли бы вы дать мне код в качестве образца?

  • 0
    Вы хотите создать HTML-код, который отображает таблицу на основе данных в объекте JSON?
Теги:
extjs
extjs4

4 ответа

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

   });   
  • 0
    Формат данных json, который вы используете, отличается от формата, который я использую. Как я могу перевести мой на ваш?
0

Yow найдет много плагина 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/

0

Реализуйте это в своем Json Call.

Справка

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

 });
0

Плагин JQuery Grid выглядит как инструмент, который вам нужен. http://www.trirand.com/blog/.

На этой странице в разделе "Загрузка данных" вы должны найти рабочий пример для отображения объекта JSON в виде сетки.

Надеюсь, я помог!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню