給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指定行的前面或後面。