jqGrid 对本地数据的增删改查(CRUD on Local Data)

刚接触jqGrid的时候，遇到个问题：

jqGrid能否实现在前台添加（或编辑、删除）多条记录后，点提交后，才一起提交至后台

没有满意的答案。

 

最近看jqGrid的Demo ,无意中找到了答案，其实很简单。

 

在 New in version 3.7 的 Add/edit/delete on local data 示例中：

 

... <table id="list4"><tr><td>&nbsp;</td></tr></table>

 

 

jQuery("#crud").jqGrid({ 
	url:'server.php?q=2', 
	datatype: "json", 
	colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'], 
	colModel:[ 
		{name:'id',index:'id', width:55, editable:true, editoptions:{readonly:true}, sorttype:'int'}, 
		{name:'invdate',index:'invdate', width:90, sorttype:'date', editable:true, editrules:{date:true},formatter:'date', datefmt:'d/m/Y'}, 
		{name:'name',index:'name asc, invdate', width:100,editable:true}, 
		{name:'amount',index:'amount', width:80, align:"right",editable:true,editrules:{number:true},sorttype:'number',formatter:'number'}, 
		{name:'tax',index:'tax', width:80, align:"right",editable:true,editrules:{number:true},sorttype:'number',formatter:'number'},
		{name:'total',index:'total', width:80,align:"right",editable:true,editrules:{number:true},sorttype:'number',formatter:'number'}, 
		{name:'note',index:'note', width:150, sortable:false,editable:true} 
	], 
	rowNum:10, 
	rowTotal: 50, 
	rowList:[10,20,30], 
	pager: '#pcrud', 
	sortname: 'id', 
	loadonce: true, 
	viewrecords: true, 
	sortorder: "desc", 
	editurl: 'server.php', // this is dummy existing url 
	caption:"CRUD on Local Data" 
}); 
jQuery("#crud").jqGrid('navGrid','#pcrud',{});

 

其实就是利用jqGrid自带的增删改按钮对grid中的数据进行操作，不同的是，每次操作后台不做任何事情。

所以要将editurl设为一个不作任何事情的url——比如一个空doGet/doPost方法的servlet。

但是不能不设置或者设置一个不存在的url，否则jqGrid会报一个404的错误提示。

 

那么如何获取grid中增删改之后的数据呢？

可以用：

$("#crud").getRowData(); 

 获取Local Data。

 

我们可以用jquery.json-2.2.min.js这个插件将Local Data对象转为json 字符串，传给后台处理：

var rowData =$.toJSON($("#crud").getRowData());