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" : "<input name='checkPersonName'   placeholder='请输入检查人员' type='text' >",
        "rainfall" : '<input name="rainfall"   type="text" placeholder="请输入雨量"    >',
        "alertLevel" : '<select name="alertLevel" ><option>出巡</option><option>限速</option><option>封锁</option> </select>',
        "checkRequirement" : '<input  name="checkRequirement" type="text" placeholder="请输入检查时限要求"  />',
    };
    //使用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指定行的前面或后面。