jqGrid 新增行 保存新增的行到数据库
给jqGrid新增行，并且把jqgrid中的数据保存到数据库
html代码
把jqgrid定义到一个form表单中
<form method="post" id="addBatchForm">
<div >
<table id="addlist">table>
<div id="addpager">div>
div>
<div class="new-guard">
<input type="submit" class="btn save-btn" onclick="submitForm()"
value="保存"> <input type="button" class="btn back-btn"
onclick="afterLoad('checkAfterRain/init')" value="返回">
div>
form>js代码
1.定义jqgrid
2.addRowData方法 给jqgrid新增一行或多行（for循环）
3.提交表单到后台
jQuery("#addlist").jqGrid(
{
datatype : "json",
autowidth : true,
height : 'auto',
shrinkToFit : true,
pgbuttons : false,
pginput : false,
colNames : [ '线路', '区间', '起讫里程', '责任车间', '责任班组', '责任人', '检查人员',
'24h雨量', '警戒情况', '检查时限要求', '专业检查要求', '注意事项', '备注' ],
colModel : [
{
name : 'railway',
index : 'railway',
width : 100,
align : "left"
}, {
name : 'section',
index : 'section',
width : 100,
align : "left"
}, {
name : 'rangeMileage',
index : 'rangeMileage',
width : 100,
align : "left"
}, {
name : 'responsibleWorkshopName',
index : 'responsibleWorkshopName',
width : 100,
sortable : false,
align : "left"
}, {
name : 'responsibleTeamName',
index : 'responsibleTeamName',
width : 100,
align : "left"
}, {
name : 'responsiblePersonName',
index : 'responsiblePersonName',
width : 100,
align : "left"
}, {
name : 'checkPersonName',
index : 'checkPersonName',
width : 100,
align : "left"
}, {
name : 'rainfall',
index : 'rainfall',
width : 100,
align : "left"
}, {
name : 'alertLevel',
index : 'alertLevel',
width : 80,
}, {
name : 'checkRequirement',
index : 'checkRequirement',
width : 120,
align : "left"
}, {
name : 'majorRequirement',
index : 'majorRequirement',
width : 120,
align : "left"
}, {
name : 'attention',
index : 'attention',
width : 120,
}, {
name : 'remark',
index : 'remark',
width : 80,
} ],
rowNum : 0,//一页显示多少条 传后台
pager : '#addpager',//表格页脚的占位符(一般是div)的id
sortname : 'id',//初始化的时候排序的字段 默认的排序列 传后台
sortorder : "desc",//排序方式,可选desc,asc
mtype : "post",//向后台请求数据的ajax的类型。可选post,get
viewrecords : true,
jsonReader : {
root : "content", //数据
page : "", //*当前页，这样才能实现翻页*
total : "totalPages", // 总页数
records : "totalElements",//从服务器端返回的记录数
repeatitems : false,
id : "id"
},
gridComplete : function() { // 数据加载完成后 执行的操作
},//end gridComplete
});
jQuery("#addlist").jqGrid('navGrid', '#addpager', {
edit : false,
add : false,
del : false,
search : false
});
/*2.把dataRow添加到表格中*/
function addRowData(){
//要添加的jqgrid中的行数据
var dataRow = {
"railway" : "a",
"section" : "b",
"rangeMileage" : "c",
"checkPersonName" : "",
"rainfall" : '',
"alertLevel" : '',
"checkRequirement" : '',
};
//使用addRowData方法把dataRow添加到表格中
$("#addlist").jqGrid("addRowData", i + 1, dataRow, "first");
}
/*3.提交表单*/
$("#addBatchForm").validate({
submitHandler : function(form) {
$.ajax({
async : false,
cache : false,
type : 'POST',
data : $("#addBatchForm").serialize(),
url : "checkAfterRain/create",//请求的action路径
error : function() {//请求失败处理函数
alert('失败');
},
success : function(data) { //请求成功后处理函数。
var jsonData = JSON.parse(data);
alert(jsonData.msg);
if (jsonData.flag == 0) {
afterLoad('checkAfterRain/init');
}
}
});
}
});后台java代码
后台接收参数的，参数名称和input的name值保持一致
@ResponseBody
@RequiresPermissions("checkAfterRain:create")
@RequestMapping("checkAfterRain/create")
public AjaxResponseMsg create(
@RequestParam(value = "checkPersonName", defaultValue = "") String checkPersonName[],
@RequestParam(value = "rainfall", defaultValue = "") String rainfall[],
@RequestParam(value = "alertLevel", defaultValue = "") String alertLevel[],
@RequestParam(value = "checkRequirement", defaultValue = "") String checkRequirement[]) throws ParseException {
//处理接收得到的数据，保存到数据库
}
addRowData方法 用于向Grid中插入新的一行。执行成功返回true，否则返回false。它具有4个参数：
$(“#jqgrid_id”).jqGrid(“addRowData”, rowid , data , position,srcrowid );
例如： $(“#addlist”).jqGrid(“addRowData”, 1, dataRow, “first”);
rowid ：新行的id号；
data ：新行的数据对象，形式为{name1:value1,name2: value2…}，其中name为colModel中定义的列名称name；
position ：插入的位置（first：表格顶端；last：表格底端；before：srcrowid之前；after：srcrowid之后）；
srcrowid ：新行将插入到srcrowid指定行的前面或后面。