jqgrid增、删、改之后将多条数据一次性提交到后台

  第一、在jsp定义一个json对象 和一个数组、每增加一行数据,就把数据保存到数组中,通过array.push(json)方法,同时,json对象里要定义一个索引,以区别每一行;修改时,先解析改数组,通过eval()方法:var obj = eval(arr);;然后用splice()进行修改和删除(参数个数不一样)数组中的json对象:obj.splice(i, 1, str);;最后使用json = JSON.stringify(obj);再把该数组序列化;


第二、前端页面的删除行:$("#gridTable").jqGrid("delRowData", selectRow);


第三、把增加的所有行数据放到数组中后付给一个<hidden>用ajax提交到后台;


第四、后台通过String类的相关方法解析该数组、split()、susbend();



前台代码:<input type="hidden" id="allJson" name="str">


<script type="text/javascript">
var $modal = $("#ajax-modal");
var lastrow;
var selectRow;
var arr = new Array();
var str = "";
var count = 1;
var json;
var firstAdd = false;
$(function() {
jqgridInit();
$(window).on("resize.jQgrid", resize);//调用表格自适应
//新增一行
$("#add_template_addbtn").bind("click",function() {
if (lastrow == null) {//第一次点添加行的时候
$("#gridTable_template").jqGrid('addRow', {
rowID : "new_row_" + count,
initdata : {},
role:"new_row_" + count,
position : "last",
useDefValues : true,
//useFormatter : true,  
addRowParams : {
extraparam : {}
}
});
firstAdd = true;
} else {//从添加第二行开始执行此处
$("#gridTable_template").jqGrid("saveRow", lastrow);
var rowDatas = $("#gridTable_template").jqGrid("getRowData", lastrow);
if (rowDatas["itemName"] == "" && rowDatas["dateType"] == "" && rowDatas["fieldName"] == "" && rowDatas["itemOrder"] == "" && rowDatas["dataLength"] == "" && rowDatas["whetherDelete"] == "") {
alert("请填写数据!");
$("#gridTable_template").jqGrid('editRow',lastrow, false);
return;
}
//如果arr的长度为零,此时是作增
if(arr.length==0) {
str = {
"rowid" : "new_row_" + (count - 1),
"itemName" : rowDatas["itemName"],
"dateType" : rowDatas["dateType"],
"fieldName" : rowDatas["fieldName"],
"itemOrder" : rowDatas["itemOrder"],
"dataLength" : rowDatas["dataLength"],
"whetherDelete" : rowDatas["whetherDelete"]
};
arr.push(str);
json = JSON.stringify(arr);
$("#allJson").val(json);
}
//把最后编辑的一行可能为修改,也可能为新增
var obj = eval(arr);
for ( var i = 0; i < arr.length; i++) {
if(obj[i].rowid==lastrow) {//修改
str = {
"rowid" : lastrow,
"itemName" : rowDatas["itemName"],
"dateType" : rowDatas["dateType"],
"fieldName" : rowDatas["fieldName"],
"itemOrder" : rowDatas["itemOrder"],
"dataLength" : rowDatas["dataLength"],
"whetherDelete" : rowDatas["whetherDelete"]
};
obj.splice(i,1,str);
json = JSON.stringify(arr);
$("#allJson").val(json);
break;
}
if(i==arr.length-1) {//作增
str = {
"rowid" : "new_row_" + (count - 1),
"itemName" : rowDatas["itemName"],
"dateType" : rowDatas["dateType"],
"fieldName" : rowDatas["fieldName"],
"itemOrder" : rowDatas["itemOrder"],
"dataLength" : rowDatas["dataLength"],
"whetherDelete" : rowDatas["whetherDelete"]
};
arr.push(str);//每点击一次 添加; 组合一个放在数组中   
json = JSON.stringify(arr);
$("#allJson").val(json);
}
}
//保存之后添加新行
$("#gridTable_template").jqGrid('addRow', {
rowID : "new_row_" + count,
initdata : {},
position : "last",
useDefValues : true,
role:"new_row_" + count,
//useFormatter : true,  
addRowParams : {
extraparam : {


}
}


});
}


});


//新增行的提交按钮
$modal.on('click', '#save_template', function() {
if(lastrow != null) {
$("#gridTable_template").jqGrid("saveRow", lastrow);
var rowDatas = $("#gridTable_template").jqGrid("getRowData", lastrow);
   if (rowDatas["itemName"] == "" && rowDatas["dateType"] == "" && rowDatas["fieldName"] == ""&& rowDatas["itemOrder"] == ""&& rowDatas["dataLength"] == ""&& rowDatas["whetherDelete"] == "") {
    alert("不能添加空的数据!");
$("#gridTable_template").jqGrid('editRow',lastrow,true);
return false;
}
 //如果arr的长度为零,此时是作增
if(arr.length==0) {
str = {
"rowid" : "new_row_" + (count - 1),
"itemName" : rowDatas["itemName"],
"dateType" : rowDatas["dateType"],
"fieldName" : rowDatas["fieldName"],
"itemOrder" : rowDatas["itemOrder"],
"dataLength" : rowDatas["dataLength"],
"whetherDelete" : rowDatas["whetherDelete"]
};
arr.push(str);//每点击一次 添加; 组合一个放在数组中   
json = JSON.stringify(arr);
$("#allJson").val(json);
}
   var obj = eval(arr);
for ( var i = 0; i < arr.length; i++) {
if(obj[i].itemName=="" &&obj[i].dateType==""&&obj[i].fieldName==""&&obj[i].itemOrder==""&&obj[i].dataLength==""&&obj[i].whetherDelete==""){
if(obj[i].rowid==lastrow) {
if (rowDatas["itemName"] != "" || rowDatas["dateType"] != "" || rowDatas["fieldName"] != ""|| rowDatas["itemOrder"] != ""|| rowDatas["dataLength"] != ""|| rowDatas["whetherDelete"] != "") {
break;

}
alert("不能添加空数据!");
lastrow = obj[i].rowid;
alert("if--"+lastrow);
$("#gridTable_template").setSelection(lastrow);
$("#gridTable_template").jqGrid('editRow',lastrow,false);
return false;
}

 }
if ($("#tempalte_name").val() == ""&& $("#tem_tab_name").val() == ""&& $("#tempalte_type").val() == ""&& $("#tempalte_order").val() == "") {
alert("请添加模板类型");
return false;
} else {
if (confirm("确定添加吗?")) {
for ( var i = 0; i < arr.length; i++) {
if(obj[i].rowid==lastrow) {
str = {
"rowid" : lastrow,
"itemName" : rowDatas["itemName"],
"dateType" : rowDatas["dateType"],
"fieldName" : rowDatas["fieldName"],
"itemOrder" : rowDatas["itemOrder"],
"dataLength" : rowDatas["dataLength"],
"whetherDelete" : rowDatas["whetherDelete"]
};
obj.splice(i,1,str);
json = JSON.stringify(arr);
$("#allJson").val(json);
break;
}
if(i==arr.length-1) {
str = {
"rowid" : "new_row_" + (count - 1),
"itemName" : rowDatas["itemName"],
"dateType" : rowDatas["dateType"],
"fieldName" : rowDatas["fieldName"],
"itemOrder" : rowDatas["itemOrder"],
"dataLength" : rowDatas["dataLength"],
"whetherDelete" : rowDatas["whetherDelete"]
};

arr.push(str);
json = JSON.stringify(arr);
$("#allJson").val(json);
}
}

alert("提交:---" + $("[name=str]").val());
$modal.modal('loading');
$.ajax({
type : "post",
url : '../rmTemplateManager/addRmTemManager.do',
data : {
"str" : $("[name=str]").val(),
"rtp.templateName" : $("#tempalte_name").val(),
"rtp.tableName" : $("#tem_tab_name").val(),
"rtp.templateType" : $("#tempalte_type").val(),
"rtp.dispalyOrder" : $("#tempalte_order").val()
},
cache : false,
dataType : "json",
success : function(data) {
//$(gridTable_template).trigger('reloadGrid');
arr = new Array();
setTimeout(function() {
$modal.modal('loading');
$modal.load('../type/addTemplate.jsp','',function(){
$modal.modal();
});
}, 1000);


}
});
}else {
return false;
}

}
return false;
}else {
var obj = eval(arr);
for ( var j = 0; j < arr.length; j++) {
if(obj[j].itemName=="" &&obj[j].dateType==""&&obj[j].fieldName==""&&obj[j].itemOrder==""&&obj[j].dataLength==""&&obj[j].whetherDelete==""){
lastrow = obj[j].rowid;
alert("不能添加空数据!");
$("#gridTable_template").setSelection(lastrow);
$("#gridTable_template").jqGrid('editRow',lastrow,false);
alert(lastrow);
return;
}

 }
alert("提交:---" + $("[name=str]").val());
//非空验证及数据验证

$modal.modal('loading');
$.ajax({
type : "post",
url : '../rmTemplateManager/addRmTemManager.do',
data : {
"str" : $("[name=str]").val(),
"rtp.templateName" : $("#tempalte_name").val(),
"rtp.tableName" : $("#tem_tab_name").val(),
"rtp.templateType" : $("#tempalte_type").val(),
"rtp.dispalyOrder" : $("#tempalte_order").val()
},
cache : false,
dataType : "json",
success : function(data) {
//$(gridTable_template).trigger('reloadGrid');
arr = new Array();
setTimeout(function() {
$modal.modal('loading');
$modal.load('../type/addTemplate.jsp','',function(){
$modal.modal();
});
}, 1000);


}
});
}
});


});
//删除数据的方法
$("#del_template_delbtn").click(function() {
$("#gridTable_template").jqGrid("saveRow", lastrow);
var rowDatas = $("#gridTable_template").jqGrid("getRowData", lastrow);
if (confirm("确定删除吗?")) {
$("#gridTable_template").jqGrid("delRowData", lastrow);
for ( var i = 0; i < arr.length; i++) {
var obj = eval(arr);
//如果找到数组中的该rowid删除之
if (obj[i].rowid == lastrow) {
obj.splice(i,1);
}
json = JSON.stringify(obj);
$("#allJson").val(json);
}
lastrow = null;
} else {
$("#gridTable_template").jqGrid('editRow', lastrow, false);
return false;
}
});
function jqgridInit() {
$(gridTable_template).jqGrid({
url : "",
datatype : "json",
mtype : "POST",
width : 745,
inlineEdit : true,
//cellEdit:true,
autowidth : true,
colModel : [ {
name : "itemName",
index : "itemName",
label : "控件名称",
width : 124,
align : "center",
editable : true,
sortable : false
}, {
name : "dateType",
index : "dateType",
label : "数据类型",
width : 124,
editable : true,
align : "center"
}, {
name : "fieldName",
index : "fieldName",
label : "对应数据列表",
width : 124,
editable : true,
align : "center"
}, {
name : "itemOrder",
index : "itemOrder",
label : "控件位置",
width : 124,
editable : true,

align : "center"

}, {
name : "dataLength",
index : "dataLength",
label : "数据长度",
width : 124,
editable : true,
align : "center"
}, {
name : "whetherDelete",
index : "whetherDelete",
label : "是否删除",
width : 124,
editable : true,
align : "center"
}, {
name : "pk",
index : "pk",
label : "pk",
hidden : true


} ],


viewrecords : true,
rowNum : rowNumDefatut,
rowList : rowListDefatut,
prmNames : {
search : "search"
},
jsonReader : {
root : "root",
},
rownumbers : true,
hidegrid : false,
altRows : true,
editurl:'',
loadComplete : function() {
var table = this;
setTimeout(function() {
updatePagerIcons(table);
}, 0);


},
afterInsertRow : function(rowid, rowdata) {
count++;
},
onSelectRow : function(selectRow) {
if(selectRow && selectRow!= lastrow) {
$("#gridTable_template").jqGrid('editRow',selectRow,true);
}
$("#gridTable_template").jqGrid("saveRow",lastrow);
var rowDatas = $("#gridTable_template").jqGrid('getRowData',lastrow);
if(selectRow== lastrow) {
$("#gridTable_template").jqGrid('editRow',selectRow,true);
}
//对最后一行可编辑行的操作分两种情况
for ( var i = 0; i < arr.length; i++) {
var obj = eval(arr);
if(obj[i].rowid==selectRow) {
for ( var j = 0; j < arr.length; j++) {
if(obj[j].rowid == lastrow) {//lastrow存在
//修改
str = {
"rowid" : lastrow,
"itemName" : rowDatas["itemName"],
"dateType" : rowDatas["dateType"],
"fieldName" : rowDatas["fieldName"],
"itemOrder" : rowDatas["itemOrder"],
"dataLength" : rowDatas["dataLength"],
"whetherDelete" : rowDatas["whetherDelete"]
};
obj.splice(j,1,str);
json = JSON.stringify(arr);
$("#allJson").val(json);
firstAdd = false;
lastrow = selectRow;
return;
}if(j==arr.length-1 && lastrow != null){//做新增
str = {
"rowid" : lastrow,
"itemName" : rowDatas["itemName"],
"dateType" : rowDatas["dateType"],
"fieldName" : rowDatas["fieldName"],
"itemOrder" : rowDatas["itemOrder"],
"dataLength" : rowDatas["dataLength"],
"whetherDelete" : rowDatas["whetherDelete"]
};
arr.push(str);
json = JSON.stringify(arr);
$("#allJson").val(json);
firstAdd = false;
lastrow = selectRow;
count++;
return;

}
if(lastrow != null) {
//把最后编辑的行保存并加入数组
str = {
"rowid" : lastrow,
"itemName" : rowDatas["itemName"],
"dateType" : rowDatas["dateType"],
"fieldName" : rowDatas["fieldName"],
"itemOrder" : rowDatas["itemOrder"],
"dataLength" : rowDatas["dataLength"],
"whetherDelete" : rowDatas["whetherDelete"]
};
arr.push(str);
json = JSON.stringify(arr);
$("#allJson").val(json);
firstAdd = false;
lastrow = selectRow;
count++;
return;
}
}
}
lastrow = selectRow;
},
})
};
//调整表格宽度
function resize() {
$(gridTable).jqGrid('setGridWidth', $(".tabDiv_template").width());
}
</script>



后台代码:

package com.pms.trm.rm.action;


import java.util.ArrayList;
import java.util.List;


import org.apache.struts2.convention.annotation.Action;
import org.apache.struts2.convention.annotation.Namespace;
import org.apache.struts2.convention.annotation.ParentPackage;
import org.apache.struts2.json.JSONException;
import org.apache.struts2.json.annotations.JSON;


import com.dota.framework.action.BaseAction;
import com.dota.framework.utils.CommonUtils;
import com.pms.trm.rm.domain.RmTemplate;
import com.pms.trm.rm.domain.RmTemplateManager;
import com.pms.trm.rm.service.RmTemplateManagerService;


@Namespace("/rmTemplateManager")
@ParentPackage("pubResult")
@SuppressWarnings({"rawtypes","serial","unchecked"})
public class RmTemplateManagerAction<T>  extends BaseAction{
private RmTemplate rtp;
private RmTemplateManager rtm;
private List<RmTemplateManager> list = new ArrayList<RmTemplateManager>();
private RmTemplateManagerService rmTemManService;
private String str;


public String getStr() {
return str;
}
public void setStr(String str) {
this.str = str;
}
public RmTemplate getRtp() {
return rtp;
}
@JSON(serialize=false)
public void setRtp(RmTemplate rtp) {
this.rtp = rtp;
}


public RmTemplateManagerService getRmTemManService() {
return rmTemManService;
}

@JSON(serialize=false)
public void setRmTemManService(RmTemplateManagerService rmTemManService) {
this.rmTemManService = rmTemManService;
}




public RmTemplateManager getRtm() {
return rtm;
}


@JSON(serialize=false)
public void setRtm(RmTemplateManager rtm) {
this.rtm = rtm;
}




public List<RmTemplateManager> getList() {
return list;
}




public void setList(List<RmTemplateManager> list) {
this.list = list;
}



//增加数据
@Action("/addRmTemManager")
public String addRmTemManager() throws JSONException, Exception {
System.out.println("-----------"+str);
//新增RmTemplate
rmTemManService.addRmTemPlate(rtp);
rtm = new RmTemplateManager(); 
//[{"rowid":"new_row_1","rtm.itemName":"aa","rtm.dateType":"aa","rtm.fieldName":"aa","rtm.itemOrder":"2","rtm.dataLength":"2","rtm.whetherDelete":"1"},{"rowid":"new_row_3","rtm.itemName":"cc","rtm.dateType":"cc","rtm.fieldName":"cc","rtm.itemOrder":"33","rtm.dataLength":"33","rtm.whetherDelete":"1"},{"rowid":"new_row_4","rtm.itemName":"dd","rtm.dateType":"dd","rtm.fieldName":"dd","rtm.itemOrder":"33","rtm.dataLength":"33","rtm.whetherDelete":"1"},{"rowid":"new_row_4","rtm.itemName":"dd","rtm.dateType":"dd","rtm.fieldName":"dd","rtm.itemOrder":"33","rtm.dataLength":"33","rtm.whetherDelete":"1"}]
String jsons[] = str.split("}");//把每一个json对象拆分到数组里

for (int i = 0; i < jsons.length-1; i++) {
jsons[i] = jsons[i].substring(1)+"}";
//jsons[i]={"rowid":"new_row_1","rtm.itemName":"a","rtm.dateType":"b","rtm.fieldName":"c","rtm.itemOrder":"1","rtm.dataLength":"2","rtm.whetherDelete":"1"}
String json[] = jsons[i].split(",");
//解析单个的json对象
for (int j = 1; j < json.length; j++) {
String data[] = json[j].split(":");
for (int k = 1; k < data.length; k++) {
if(j==1) {
rtm.setItemName(data[k].substring(1, data[k].length()-1));
}
if(j==2) {
rtm.setDateType(data[k].substring(1, data[k].length()-1));
}
if(j==3) {
rtm.setFieldName(data[k].substring(1, data[k].length()-1));
}
if(j==4) {
rtm.setItemOrder(CommonUtils.ObjectTOLong(data[k].substring(1, data[k].length()-1)));
}
if(j==5) {
rtm.setDataLength(CommonUtils.ObjectTOLong(data[k].substring(1, data[k].length()-1)));
}
if(j==6) {
rtm.setWhetherDelete(CommonUtils.ObjectTOLong(data[k].substring(1, data[k].length()-2)));

}
}

}
//增加RmTemplateManager
rmTemManService.add(rtm);
}

return "forjson";
}
/*public <T> List<T> getList(String str,T t){

  JsonArray array = JSONArray.fromObject(str);//将str转换成json对象  
    jsonConfig jsonConfig = new JsonConfig();//参数设置  
    jsonConfig.setRootClass(t.getClass());//设置array中的对象类型  
    List<T> list = (List<T>)JSONArray.toCollection(array, jsonConfig);//将数组转换成T类型的集合  
    return list;  
}*/
@Action("/updateRmtemManager")
public String updateRmtemManager() {
System.out.println("进action了");
return "forjson";
}
}



你可能感兴趣的:(jqgrid增、删、改之后将多条数据一次性提交到后台)