У меня есть данные JSON с таким форматом:
{
key1: val1,
key2: val2,
key3: val3,
key4: val4,
..
}
Я хочу создать таблицу или сетку, чтобы отобразить ее так:
_______________
|keys | values|
|-------------|
|key1 | val1 |
|key2 | val2 |
|key3 | val3 |
|key4 | val4 |
---------------
Какой компонент в Extjs или jQuery следует использовать? И как сопоставить мои данные json в этой таблице?
Не могли бы вы дать мне код в качестве образца?
Пример в 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'
}
}
});
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>');
}
Реализуйте это в своем Json Call.
$.getJSON( "ajax/test.json", function( data ) {
var items = [];
$.each( data, function( key, val ) {
alert ( " key=" + key + " and val = " + val + "" );
});
});
Плагин JQuery Grid выглядит как инструмент, который вам нужен. http://www.trirand.com/blog/.
На этой странице в разделе "Загрузка данных" вы должны найти рабочий пример для отображения объекта JSON в виде сетки.
Надеюсь, я помог!