先上一個easyui-datagrid的資料。

而我們要實現的功能是1.對三條記錄進行批量的刪除和批量的修改狀態。

1.批量的刪除

我們選擇傳入三條記錄的id值，並利用service層的deleteByid方法進行刪除。

具體程式碼如下所示。

先上service層程式碼：

public interface OaSuitService {
public String deleteById(String Ids[]);
}

public class OaSuitServiceImpl implements OaSuitService{
	@Override
	public String deleteById(String[] Ids) {
		for (String id : Ids) {
			int suitId = Integer.parseInt(id);

			this.doDelete(suitId);

			System.out.println("刪除：" + id);
		}
		return "success";
	}

	public boolean doDelete(int suitId) {

		return oaSuitMapper.deleteByPrimaryKey(suitId) > 0 ? true : false;
	}
}
 

public class OaSuitController{
	@Autowired
	private OaSuitService oaSuitService;
        	@RequestMapping(value = "/delete.do")
	public @ResponseBody
	Object delete(HttpServletRequest req) {
		String ids = req.getParameter("ids");
		String[] Ids = ids.split(",");
		return oaSuitService.deleteById(Ids);
	}
}
 

為求簡單，我不將easyui-datagrid整體都放上來了，只選取其中的刪除功能函式。

function remove() {
		//設定status為不可編輯
		var e = datagrid.datagrid('getColumnOption', 'status');
		e.editor = {};
		var received = datagrid.datagrid('getColumnOption', 'received');
		received.editor = {};
		
		if ($('.datagrid-row-editing').length > 0) {
			$.messager.show('提示', '存在未儲存資料，不能執行刪除操作，取消編輯請點選“取消”！');
			return;
		}
		var rows = datagrid.datagrid('getSelections');// 獲得選中項

		if (rows.length > 0) {
			$.messager.confirm('請確認', '您確定要刪除當前選擇的所有項嗎？', function(b) {
				if (b) {
					var ids = [];
					for (i = 0; i < rows.length; i++) {
						ids.push(rows[i].suitId);
					}
					console.info(ids.join(','));
					$.ajax({
						url : getContextPath() + '/oaSuit/delete.do',// pcbas-analysis/
						data : {
							ids : ids.join(',')
						},
						dataType : 'json',
						success : function(r) {
							datagrid.datagrid('load');
							datagrid.datagrid('unselectAll');
							$.messager.show({
								title : '提示',
								msg : '刪除成功'
							});
						}
					});
				}
			});
			// console.info(rows)
		} else {
			$.messager.alert('提示', '請選擇要刪除的記錄', 'error');
		}
	}
 

從批量刪除的JS程式碼中，我得到啟示，對於批量修改內容後，我們可以採用for迴圈儲存修改的內容，而不需要在後端重新寫一個儲存方法。

照例，先把後端的儲存功能放上來。

service層：

public interface OaSuitService {
public String insert(OaSuit oaSuit);
}

public class OaSuitServiceImpl implements OaSuitService{
@Override
public String insert(OaSuit oaSuit) {

// 插入投訴記錄
if (oaSuitMapper.insertSelective(oaSuit) != 1)
return "false";
else
return "success";
}
}

public class OaSuitController{
@RequestMapping(value = "/save.do")
public @ResponseBody
Object insert(HttpServletRequest req) {


try {
req.setCharacterEncoding("UTF-8");
} catch (UnsupportedEncodingException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}


String suitInfo = req.getParameter("inserted");
String updated = req.getParameter("updated");
if(suitInfo != null){System.out.println(suitInfo);
if (StringUtils.isEmpty(suitInfo))
return "false";


return oaSuitService.insert(this.convert(suitInfo));
}
if (updated != null){System.out.println(updated);
if (StringUtils.isEmpty(updated))
return "false";
OaSuit temp  = this.convert(updated);
System.out.println(temp.getAppraisedPerson()+temp.getApprasingPerson());
return oaSuitService.update(this.convert(updated));
}
//suitInfo = "["+suitInfo+"]";


return "false";


}
}

function changedStatus() {
		var rows = $('#suit_dg').datagrid('getSelections');
		if (rows.length > 0) {
			$.messager.confirm('請確認', '您確定要改變這些資料的狀態嗎', function(b) {
				if (b) {
					
					var ids = [];
					for (i = 0; i < rows.length; i++) {
						ids.push(rows[i].suitId);
						var index = datagrid.datagrid('getRowIndex', rows[i]);
				        console.log("id:"+index);
				        datagrid.datagrid('updateRow',{
					        index:index,
					        row:{
						        'status':'完成'
					        }
				        });
						var effectRow = new Object();
				        effectRow["updated"] = JSON.stringify([rows[i]]);//這裡是關鍵。只寫成rows[i]時會報錯“A JSONArray text must start with '['”
				        $.post(getContextPath() + "/oaSuit/save.do", effectRow,// pcbas-analysis/
				        function(data) {
					    if (data == 'success') {

						$.messager.show({
							title : '提示',
							msg : '確認成功'
						});
						datagrid.datagrid('reload', {});
					} /*else if (data == 'error 使用者手機號或郵箱已存在') {
						$.messager.alert('提示', '使用者手機號或郵箱已存在，請修改後重新儲存！', 'error');
					} else {
						$.messager.alert('提示', '2008系統員工編號已存在，請修改後重新儲存！', 'error');
					}*/
				     }, "JSON").error(function() {
					    $.messager.show({
						    title : '提示',
						    msg : '儲存失敗'
					});
				    });
			
					}
					/* console.info(ids.join(','));
					$.ajax({
						url : getContextPath() + '/oaSuit/delete.do',// pcbas-analysis/
						data : {
							ids : ids.join(',')
						},
						dataType : 'json',
						success : function(r) {
							datagrid.datagrid('load');
							datagrid.datagrid('unselectAll');
							$.messager.show({
								title : '提示',
								msg : '刪除成功'
							});
						}
					});*/
				} 
			});
			// console.info(rows)
		} else {
			$.messager.alert('提示', '請選擇要改變的記錄', 'error');
		}
		
		if ($('.validatebox-invalid').length != 0) {
			$.messager.alert('警告', '請按照提示輸入正確資訊！', 'error');
			return;
		}
		
	}