首页  »   Web前端

easyui-editing datagrid 批量保存数据 1

网友分享于:2015-04-28  浏览:0次
easyui-editing datagrid 批量保存数据 一

    这篇博客是分享给大家使用easyUI 框架从界面向后台传值的两种方法。使用easyui 已经有一段时间,没有很深入的学习过,只是停留在可以简单使用的层面上,这次由于项目需要,前台界面的需求比较多,所以对easyui的使用,在这段时间,从量上,使用的深度上有了一个大的跨越,特别是datagrid 。然后回顾以前使用的一些经验,整理了这篇博客。   

     先看效果图:我需要将表格中数据如红色框中的数据,统一编辑修改之后,一起保存。

      

这里有两种方法,咱们先来看第一种:

       一、——使用getChanges

       可以使用easyui 提供的便捷的方法getchanges();

     getChanges:从上一次的提交获取改变的所有行。类型参数指明用哪些类型改变的行,可以使用的值有:inserted,deleted,updated等。当类型参数未配置的时候返回所有改变的行。我们来看看具体是如何使用的。

<span style="font-family:KaiTi_GB2312;font-size:18px;">function save(){
    		if ($('#dg').datagrid('getChanges').length) {
    	        var inserted = $('#dg').datagrid('getChanges', "inserted");
    	        var updated = $('#dg').datagrid('getChanges', "updated");</span>
<span style="font-family:KaiTi_GB2312;font-size:18px;"><span style="white-space:pre">		</span>var deleted = $('#dg').datagrid('getChanges', "deleted");<span style="background-color: rgb(255, 255, 255);"> </span><span style="background-color: rgb(255, 255, 255);">	</span></span>
<span style="white-space:pre">		</span>// 统一放到一个json中传递 
<span style="white-space:pre">		</span>var effectRow = new Object(); 
<span style="white-space:pre">		</span>if (inserted.length) 
<span style="white-space:pre">		</span>{ 
<span style="white-space:pre">			</span>effectRow["inserted"] = JSON.stringify(inserted);
<span style="white-space:pre">		</span> } 
<span style="white-space:pre">		</span>if (updated.length) { 
<span style="white-space:pre">			</span>effectRow["updated"] = JSON.stringify(updated);
<span style="white-space:pre">		</span> }

if (deleted.length) {


<span style="font-family:KaiTi_GB2312;font-size:18px;">    	            effectRow["deleted"] = JSON.stringify(deleted);
    	        }</span>
<span style="font-family:KaiTi_GB2312;font-size:18px;"><span style="white-space:pre">	</span>// $.post jquery中简单的异步提交,如果需要错误处理,需使用$.ajax.</span>

$.post(getRootPath()+"/labour/update.do", effectRow, function(data) 
	{ 
		if(data.success){ 
			$('#dg').datagrid('acceptChanges');
		$('#dg').datagrid('reload');
	} }, "JSON").error(function() { alert('error'); }); }; }


      后台的接收: 从后台接收到对应的json ,可以做对应的增,删,改操作。

<span style="font-family:KaiTi_GB2312;font-size:18px;">import net.sf.json.JSONArray;
import net.sf.json.JSONObject;</span>

<span style="font-family:KaiTi_GB2312;font-size:18px;">@RequestMapping("/update.do")
@ResponseBody
public Object save(HttpServletRequest request) {
	//获取编辑数据 这里获取到的是json字符串
	String inserted = request.getParameter("inserted");
	String updated = request.getParameter("updated");
	List<JobContentDetail> listUpdated = new ArrayList<JobContentDetail>();
	List<JobContentDetail> listInserted = new ArrayList<JobContentDetail>();
	if(inserted != null){
	//把json字符串转换成对象
	JSONArray jsonArr = JSONArray.fromObject(inserted); 
	for (int i = 0; i < jsonArr.size(); i++) { 		listInserted.add((JobContentDetail)JSONObject.toBean(jsonArr.getJSONObject(i), JobContentDetail.class)); 
	} 
	try {
	labourservice.saveEntities(listInserted);
	} catch (Exception e) {
		e.printStackTrace();
	return createErrorMessage(e.getMessage()).toString();
	}}
	if(updated != null){ 
	//把json字符串转换成对象
	JSONArray jsonArr = JSONArray.fromObject(updated); 
	for (int i = 0; i < jsonArr.size(); i++) { 		listUpdated.add((JobContentDetail)JSONObject.toBean(jsonArr.getJSONObject(i), JobContentDetail.class));
	} 
	try {
		labourservice.saveEntities(listUpdated);
	} catch (Exception e) {
		e.printStackTrace();
		return createErrorMessage(e.getMessage()).toString();
	}}
	return createSuccessMessage("操作成功!").toString();
	}</span>


     第一种方法固然好,但是发现有一个问题就是,假如,我在datagrid中使用了“updaterow”方法,那么,easyui的getchanges方法,是拿不到这些updateRow 改变的数据,如下所示:        

<span style="font-family:KaiTi_GB2312;font-size:18px;">function rowsave() {
    var drow = snl.datagrid('getSelected');
    var index = snl.datagrid('getRowIndex', drow);
    snl.datagrid('updateRow', {
        index: index,
        row: {
            SeriesNumber: "电话号码",
            SeriesName: "姓名"
        }
    });
    });</span>
   保存数据的时候能正常保存到表单里面去,但是用: var rows =snl.datagrid('getChanges'); 读取数据,读取到的rows为0

      那么怎么办,如何拿到表格中既有删除,又有添加,还有被“updateRow”更新的数据呢?  

     下篇博客继续。

   

相关解决方案

最新解决方案