Ext Grid是一款功能強大,靈活易用的JavaScript表格插件,它允許你以流暢、快速和自然的方式顯示和編輯大量數據。
要在Ext Grid中加載JSON數據,需要使用Ajax請求從服務器獲取數據。可以使用以下代碼片段加載JSON:
//創建數據存儲 var store = new Ext.data.Store({ proxy: new Ext.data.HttpProxy({ url: 'data.json', //JSON數據的URL地址 method: 'GET' //請求方式是GET }), reader: new Ext.data.JsonReader({ root: 'data', //JSON數據中的根節點 totalProperty: 'totalCount', //JSON數據總數 idProperty: 'id', //JSON數據中的ID屬性 fields: ['name', 'age', 'gender', 'email'] //定義表格字段 }) }); //創建表格 var grid = new Ext.grid.GridPanel({ title: 'JSON數據表格', store: store, columns: [{ header: '姓名', dataIndex: 'name' }, { header: '年齡', dataIndex: 'age' }, { header: '性別', dataIndex: 'gender' }, { header: '郵箱', dataIndex: 'email', width: 150 }], renderTo: Ext.getBody() }); //加載數據 store.load();
在上述代碼中,首先需要創建一個數據存儲對象,它定義了如何從服務器加載數據以及如何解析返回的JSON數據。然后,創建一個表格對象,它使用上述數據存儲對象作為數據源,并定義表格列的格式和顯示方式。最后,調用數據存儲對象的load方法從服務器加載數據并顯示在表格中。
總而言之,使用Ext Grid加載JSON數據非常簡單,只需幾行代碼就可以實現。此外,Ext Grid還具有豐富的功能和擴展性,可以滿足各種Web應用的需求。
上一篇css+table+占滿
下一篇css3旋轉特效教程