色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

extjs json table

錢衛國2年前8瀏覽0評論

ExtJS是一個強大的前端框架,它提供了很多組件和工具來簡化開發過程。其中,JSON table可以幫助我們快速地將JSON數據呈現為表格形式。

// 定義數據模型
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{ name: 'name', type: 'string' },
{ name: 'age', type: 'int' },
{ name: 'gender', type: 'string' },
{ name: 'address', type: 'string' },
]
});
// 創建store
var userStore = Ext.create('Ext.data.Store', {
model: 'User',
proxy: {
type: 'ajax',
url: 'users.json',
reader: {
type: 'json',
rootProperty: 'users'
}
},
autoLoad: true
});
// 創建表格
var userTable = Ext.create('Ext.grid.Panel', {
store: userStore,
columns: [
{ text: '姓名', dataIndex: 'name' },
{ text: '年齡', dataIndex: 'age' },
{ text: '性別', dataIndex: 'gender' },
{ text: '地址', dataIndex: 'address' }
]
});
// 渲染表格
Ext.onReady(function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [userTable]
});
});

在上面的代碼中,我們首先定義了數據模型,包括姓名、年齡、性別、地址等字段。然后創建store,使用ajax代理來加載JSON數據。接著創建表格,設置表格的數據源和列信息。最后在頁面加載完成后將表格渲染到容器中。

使用這種方式,我們可以輕松地將后端返回的JSON數據呈現為表格形式,同時也支持排序、篩選等功能。