如何从 json 创建表列和字段？ （动态网格）
Posted
技术标签:
【中文标题】如何从 json 创建表列和字段？ （动态网格）【英文标题】：How do you create table columns and fields from json? (Dynamic Grid) 【发布时间】：2012-06-11 11:34:32 【问题描述】：我有一个 json 文件，我假设我对内容一无所知。我不知道型号。然而，它在 json 文件中给出了模型、数据和有关网格的其他信息。我将如何以这种方式创建列等？
【问题讨论】：
如果你找到了一些解决方案，请更新这个，这对我也有帮助。为问题 +1 @Jomet，***.com/a/11017316/233286 它已经奏效了。阅读文档中的该部分，即“响应元数据”。 【参考方案1】：*** 中充斥着与此非常相似的问题。我研究了所有这些，但没有找到明确的解决方案。但是，提供的大多数答案都为我指明了正确的方向。我会尽我最大的努力将所有这些建议放在一起并向其他人说明这一点：
模型：（仅显示将在所有 JSON 响应中出现的 2 个字段。仍将被覆盖）
Ext.define('RTS.model.TestsModel',
extend: 'Ext.data.Model',
alias: 'model.TestsModel',
fields: [
name: 'poll_date'
,
name: 'poller'
]
);
商店：
Ext.define('RTS.store.TestsStore',
extend: 'Ext.data.Store',
alias: 'store.TestsStore',
model: 'RTS.model.TestsModel',
constructor: function(cfg)
var me = this;
cfg = cfg || ;
me.callParent([Ext.apply(
autoLoad: false,
proxy :
type : 'ajax',
url : 'tests.php',
reader :
type : 'json',
root : 'tests',
successProperty : 'success'
,
storeId: 'tests-store'
, cfg)]);
);
查看：（列将在每个 JSON 响应中定义）
Ext.define('RTS.view.TestsView',
extend: 'Ext.grid.Panel',
alias: 'widget.TestsView',
id: 'tests-view',
title: 'Tests',
emptyText: '',
store: 'TestsStore',
initComponent: function()
var me = this;
Ext.applyIf(me,
viewConfig:
,
columns: [
]
);
me.callParent(arguments);
);
控制器：（控制器会根据 JSON 响应执行所有强制视图和模型更改的工作）。
Ext.define('RTS.controller.TestsController',
extend: 'Ext.app.Controller',
alias: 'controller.TestsController',
stores: [
'TestsStore'
],
models: [
'TestsModel'
],
views: [
'TestsView'
],
init: function(application)
// When store changes, trigger an event on grid
// to be handled in 'this.control'.
// NOTE : Ext JS does not allow control of
// non-component events.
// Ext JS 4.2 beta will allow the controller
// to detect non-component changes and handle them
var testsStore = this.getStore('TestsStore');
testsStore.on("metachange", metaChanged, this);
function metaChanged(store, meta)
var grid = Ext.ComponentQuery.query('TestsView')[0];
grid.fireEvent('metaChanged', store, meta);
;
this.control(
"TestsView":
metaChanged: this.handleStoreMetaChange
);
,
/**
* Will update the model with the metaData and
* will reconfigure the grid to use the
* new model and columns.
*/
handleStoreMetaChange: function(store, meta)
var testsGrids = Ext.ComponentQuery.query('TestsView')[0];
testsGrids.reconfigure(store, meta.columns);
);
JSON 响应： 您的 json 响应必须包含“元数据”属性。它应该像在静态模型和通常定义为显示字段的视图上一样定义字段。
"success": true,
"msg": "",
"metaData":
"fields": [
"name": "poller"
,
"name": "poll_date"
,
"name": "PING",
"type": "int"
,
"name": "SNMP",
"type": "int"
,
"name": "TELNET",
"type": "int"
,
"name": "SSH",
"type": "int"
,
"name": "all_passed"
],
"columns": [
"dataIndex": "poller",
"flex": 1,
"sortable": false,
"hideable": false,
"text": "Poller"
,
"dataIndex": "poll_date",
"flex": 1,
"sortable": false,
"hideable": false,
"text": "Poll Date"
,
"dataIndex": "PING",
"flex": 1,
"sortable": false,
"hideable": false,
"text": "PING",
"renderer": "RenderFailedTests"
,
"dataIndex": "SNMP",
"flex": 1,
"sortable": false,
"hideable": false,
"text": "SNMP",
"renderer": "RenderFailedTests"
,
"dataIndex": "TELNET",
"flex": 1,
"sortable": false,
"hideable": false,
"text": "TELNET",
"renderer": "RenderFailedTests"
,
"dataIndex": "SSH",
"flex": 1,
"sortable": false,
"hideable": false,
"text": "SSH",
"renderer": "RenderFailedTests"
,
"dataIndex": "all_passed",
"flex": 1,
"sortable": false,
"hideable": false,
"text": "All Passed",
"renderer": "RenderFailedTests"
]
,
"tests": [
"poller": "CHI",
"poll_date": "2013-03-06",
"PING": "1",
"SNMP": "0",
"TELNET": "1",
"SSH": "0",
"all_passed": "0"
,
"poller": "DAL",
"poll_date": "2013-03-06",
"PING": "1",
"SNMP": "0",
"TELNET": "1",
"SSH": "0",
"all_passed": "0"
,
"poller": "CHI",
"poll_date": "2013-03-04",
"PING": "1",
"SNMP": "0",
"TELNET": "1",
"SSH": "0",
"all_passed": "0"
,
"poller": "DAL",
"poll_date": "2013-03-04",
"PING": "1",
"SNMP": "0",
"TELNET": "1",
"SSH": "0",
"all_passed": "0"
,
"poller": "CHI",
"poll_date": "2013-03-01",
"PING": "1",
"SNMP": "0",
"TELNET": "1",
"SSH": "0",
"all_passed": "0"
]
【讨论】：
我不明白为什么在你的例子中应该调用metaChanged。好像少了点什么。
在 Ajax url 中我们调用 `url : 'tests.php',` 那个 php 在哪里。【参考方案2】：
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.reader.Json -> 响应元数据部分
在网格中不要忘记添加这个columns: [], 然后在商店listeners: 'metachange': function(store, meta) myGrid.reconfigure(store, meta.columns); 下，响应json 文件应该有带有字段和列的元数据。阅读文档中的响应元数据部分了解更多信息。
【讨论】：
【参考方案3】：您可以在运行时创建网格定义。看reconfigure方法：http://docs.sencha.com/ext-js/4-0/#!/api/Ext.grid.Panel-method-reconfigure
【讨论】：
以上是关于如何从 json 创建表列和字段？ （动态网格）的主要内容，如果未能解决你的问题，请参考以下文章
如何检索所有表列、数据类型、数据长度、约束类型以及引用的列和表