實現對easyui-datagrid的資料行批量修改(包括修改內容和刪除)
阿新 • • 發佈:2018-12-22
先上一個easyui-datagrid的資料。
而我們要實現的功能是1.對三條記錄進行批量的刪除和批量的修改狀態。
1.批量的刪除
我們選擇傳入三條記錄的id值,並利用service層的deleteByid方法進行刪除。
具體程式碼如下所示。
先上service層程式碼:
public interface OaSuitService {
public String deleteById(String Ids[]);
}
serviceImp:
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; } }
controller層:
接下來是前端的js程式碼: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);
}
serviceImp:
public class OaSuitServiceImpl implements OaSuitService{
@Override
public String insert(OaSuit oaSuit) {
// 插入投訴記錄
if (oaSuitMapper.insertSelective(oaSuit) != 1)
return "false";
else
return "success";
}
}
controller層:
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";
}
}
好了接下去,重點來啦~JS程式碼
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;
}
}