jqGrid經常使用增刪改查Demo及常見問題

1,jqGrid 第一次加載方法，和查詢按鈕能夠執行的方法

方法1
jQuery("#tableId").jqGrid({
 url: "/jqGrid/select.html",
        //發送數據
        postData: {"stock": $("#stock").val(), "name": $("#lastSales").val()},
        //發送方式
        mtype: "get",
        datatype: "json",
        //表格高度
        height: 400,
        //列名
        colNames: [' ', 'ID', 'Last Sales', 'Name', 'Stock', 'Ship via', 'Notes','Amt'],
        ...
})
做爲最經常使用的jqGrid方法，它起到的是一個渲染頁面和初始化一些方法的做用，後續的效果都是在該方法渲染好table等html後，才起做用。
並且，此方法，只在第一次加載頁面時觸發。
可是咱們作頁面展現，通常都要有查詢按鈕，這個方法顯然不適用，若是將該方法包裝在$("#buttonId").click裏，
是不會觸發的。具體源碼不清楚。（我第一次作查詢按鈕的時候，就是這麼作的，debug發現，代碼是一步一步往下走，就是調不到後臺）

那麼查詢按鈕應該用什麼方法呢，仍是這個方法，只是帶上了參數。
這個方法就是jqGrid對應的按鈕能夠觸發的查詢方法（並且必須是方法1渲染好頁面後才能使用）
 $(grid_selector).jqGrid('setGridParam', {
        url: "/jqGrid/select.html",
        //發送數據
        postData: {"stock": $("#stock").val(), "name": $("#lastSales").val(), "note": $("#notes").val()},
        page: 1,
        //該方法是加載完
        loadComplete: function (xhr) {
            alert("查詢完成"+xhr.result);
        }
    }).trigger("reloadGrid");//從新載入

2，按鈕能夠觸發的增刪改方法，

若是你不想用jqGrid左下角的導航欄增刪改，那麼就能夠用這幾個方法

$("#buttonForEdit").click(function(){
    //gr是獲取 編輯行的id
    var gr = jQuery("#grid-table").jqGrid('getGridParam', 'selrow');
    if (gr != null) jQuery("#grid-table").jqGrid('editGridRow',
                                                  gr,
                                                { height: 300, reloadAfterSubmit: false

    

    });
    else alert("Please Select Row");
});

$("#buttonForInsert").click(function(){
    jQuery("#grid-table").jqGrid('editGridRow', "new", { height: 300, reloadAfterSubmit: false });
});

$("#buttonForDelete").click(function(){
        var gr = jQuery("#grid-table").jqGrid('getGridParam', 'selrow');
        if (gr != null){
            var result=jQuery("#grid-table").jqGrid('delGridRow', gr, { reloadAfterSubmit: false });
        alert(result);}
        else alert("Please Select Row to delete!");

});

對於增刪改，不少人會問，url在哪填寫，

其實jqGrid對於這三個的url，默認爲一個，就是渲染頁面的方法的一個參數，editUrl。

那怎麼區分呢。對此，jqGrid提交後臺的url中，他會默認增長一個叫oper的屬性

若是是edit，url就會是http://www.xx.com/edit.html?name=xxx&age=xxx&oper=edit

若是是update，url就會是http://www.xx.com/edit.html?name=xxx&age=xxx&oper=add

若是是delete，url就會是http://www.xx.com/edit.html?name=xxx&age=xxx&oper=del

因此後臺能夠根據oper去判斷是什麼操做。

不少人會問，導航欄自帶的小按鈕的add和edit，若是成功了，怎麼提示。

這個我也不知道，

可是我找到一個事件能夠起到這個效果。

afterComplete:function執行完add和edit後觸發的回調函數，能夠接收後臺返回的數據

  afterComplete:function(xhr){
               alert(xhr.responseText);
                },
                //成功後關閉此窗口
                closeAfterAdd: true

xhr={readyState=4,responseText="後臺返回的信息"  status=200 ...}

因此後臺須要返回 sunccess 或者error之類的信息。

3，經常使用的獲取數據的方法

　　一、獲取行id　

　　var rowid = $("#grid-table").jqGrid("getGridParam", "selrow");

　　2，獲取checkbox的多個行id

　　var array=$('#gridTable').jqGrid('getGridParam','selarrrow');

　　array=1,2,3...

　　三、獲取rowId行的數據

　　var rowData = $('#gridTable').jqGrid('getRowData',rowId);

　　四、獲取單元格數據

var celldata = $("jqgridtableid").jqGrid('getCell',id,colnum);