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數據呈現為表格形式,同時也支持排序、篩選等功能。
下一篇css3畫太極