1. 程式人生 > >JS處理EasyUI DataGrid獲取到的資料

JS處理EasyUI DataGrid獲取到的資料

在EasyUI DataGrid的使用中,通過後臺java springMVC程式碼返回一個List<Map<String,Object>>型別的值,給前臺javascript,針對返回的資料,我們還需要進行處理或操作。檢視EasyUI 的API中文文件,簡單使用方式如下:
$("#TableID").datagrid({url:Url, params, onLoadSuccess: function(data) {
		//省略你要進行的操作程式碼
    }});

剛開始,直觀的想通過data,進行資料操作處理,發現各種呼叫基本失效,比如data.length、data.size等等,更別說遍歷data了、後來發現,採用的方式不對,應該重新獲取該資料集,再進行操作,而不是操作執行成功返回的data。上面程式碼通過datagrid方法,實際已經將資料載入到了$("#TableID")節點元素中,再次獲取就可以了。獲取的方式為$("#TableID").datagrid("具體方式"),這裡的具體方式引數可以是getData、getRows、getChecked、getSelected等,具體參考API文件。


這裡,採用的getData方式,它獲取到的資料是一個List集合,要遍歷的話,還需要使用.rows得到行資料。如果採用的getRows,就是直接獲取當前頁的行資料,下面的程式碼就無需使用.rows。所以,最後程式碼是:

$("#TableID").datagrid({url:Url, params, , onLoadSuccess: function(data) {
		var info=$("#operatorTable").datagrid("getData");
		//這裡舉例獲取某列所有資料的和,當然你也可以進行其它處理或遍歷操作
		var total=0;
		for(var i=0;i<info.rows.length;i++){
			total=total+info.rows[i].number;  //假設Table中有列名number
		}
		$("#AllAmount").text("total");
    }});