【Ext】EditorGrid綁定後臺數據

很久沒有更新了……

 

在使用Ext JS作爲前端開發框架時，避免了寫原生態table之類的元素。現在有一需求是寫可編輯單元格的表格，並且需要和後臺數據動態綁定起來。下面就簡單記錄下過程，以便日後供自己和需要的同行參考~

 

前端部分（核心）：

1）先寫一個div容器

 

<div id="grid"></div>

 2）js部分：

 

 

Ext.onReady(function(){
var column = new Ext.grid.ColumnModel([
	    {header:'描述',dataIndex:'memo',width:200, align:'center'},
	    {header:'時間',dataIndex:'time',width:200, align:'center'},
	    {header:'滿意',align:'center', dataIndex:'satisfied',width:100,editor:new Ext.grid.GridEditor(
		        new Ext.form.TextField({
		            allowBlank:false
		        })
		    )},
	    {header:'一般',align:'center', dataIndex:'general',width:100,editor:new Ext.grid.GridEditor(
		        new Ext.form.TextField({
		            allowBlank:false
		        })
		    )},
	    {header:'不滿意',align:'center', dataIndex:'unsatisfied',width:100,editor:new Ext.grid.GridEditor(
		        new Ext.form.TextField({
		            allowBlank:false
		        })
		    )},
	]);
//這裏就是從後臺searchGrid方法獲取數據的部分，填充到store裏。
	var store= new Ext.data.JsonStore({
	    //proxy:new Ext.data.MemoryProxy(data),
	    proxy:new Ext.data.HttpProxy({
	    	//type:'ajax',
	    	url:'./setting.do?method=searchGrid'
	    }), 
	    fields:['id','memo','time','satisfied','general','unsatisfied']
	    //這些是要跟後臺數據Map的key要一一對應的。
	}); 
	store.load();

	var grid1=new Ext.grid.EditorGridPanel({
	    renderTo:"grid",
	    store: store,
	    height:200,
	    clicksToEdit:1,
	    cm:column       
	});
});

 

//---------------------------------------------------------------------------------------------------------------------------

數據寫死的話就是proxy:new Ext.data.MemoryProxy(data),其中data是類似以下這種數據結構：

var data = [

          ['新客戶工作時間', '8:30-17:30', 4, 2, -1],

          ['新客戶非工作時間', '17:30-8:30', 4, 2, -1],

          ['老客戶五星以上工作時間', '8:30-17:30', 4, 2, -1],

          ['老客戶五星以上非工作時間', '17:30-8:30', 4, 2, -1],

          ['老客戶五星以下工作時間', '8:30-17:30', 4, 2, -1],

          ['老客戶五星以下非工作時間', '17:30-8:30', 4, 2, -1]

          ]; 

//---------------------------------------------------------------------------------------------------------------------------

 

後臺部分

searchGrid方法獲取到的數據是一個List<Map<String, Object>> list結構的數據，而傳遞給前端的則是一個[{'id':1, 'name':'Lily', 'age':23, 'memo':'sssssssss'}, {'id':2, 'name':'Lily2', 'age':33, 'memo':'sssssssss'}, {'id':3, 'name':'Lily3', 'age':43, 'memo':'sssssssss'}, ...]形式的json，  即json串的數組。

JsonUtils.convertToString(list)

 

 

同樣，要將EditorGrid表格數據提交給後臺也需要提交一個類似結構的json串的數組，獲取方式如下：

 

var data = [];
 for(var i=0; i<store.getCount(); i++) {
	 var record = store.getAt(i);
	data.push(record.data);
}

 注意：一定要轉換成後臺能夠接收到的結構：使用Ext.util.JSON.encode(data)或JSON.stringify(data)將json數組對象轉換成字符串。此時後臺接收是通過JSONArray來進行的：

JSONArray arr = JSONArray.fromObject(datas);
for(int i=0; i<arr.size(); i++) {
     JSONObject obj = arr.getJSONObject(i);
//獲取各屬性值用obj.get(key), 轉換成int或double等數值用Integer.valueOf(obj.get(key).toStirng())或Double.valueOf(obj.get(key).toStirng())
}

 

 

至此，Ext的EditorGrid數據跟後臺的動態綁定就記錄完畢了。上一張效果圖：

 

 

 

• 大小: 6.9 KB

• 查看圖片附件