ExtJS是一個用于構建跨平臺經驗的JavaScript框架。它具有可重用組件和模塊化體系結構,使開發者可以有效地創建Web應用程序。在ExtJS中,我們可以使用Grid來呈現數據列表。本文將介紹如何使用ExtJS實現選擇多行數據并將其轉換為JSON格式。
HTML頁面中,我們需要一個Grid來呈現數據。以下是一個簡單的Grid設置:
Ext.create('Ext.grid.Panel', { title: 'Data Grid', store: store, // 數據存儲 columns: columns, // 列定義 selModel: Ext.create('Ext.selection.CheckboxModel', {mode: 'SIMPLE'}), // 多行選擇模式 renderTo: Ext.getBody() });
通過使用CheckboxModel,我們可以啟用多行選擇模式。在Grid中選中多行后,我們需要通過以下代碼將選擇的行轉換為JSON格式:
var selected = []; grid.getSelectionModel().getSelection().forEach(function(record) { selected.push(record.getData()); }); var json = Ext.JSON.encode(selected); console.log(json);
在這個代碼片段中,我們使用getSelection()方法來獲取選中的行,然后將每行的數據對象添加到一個數組中。最后,我們使用Ext.JSON.encode()方法將整個數組轉換為JSON格式。
以上就是使用ExtJS選擇多行數據并將其轉換為JSON格式的全部過程,在實際應用中,我們可以將這些數據提交到后端進行處理。