jqGrid常用增删改查Demo及常见问题

2019独角兽企业重金招聘Python工程师标准>>>

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，常用的获取数据的方法

　　1、获取行id　

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

　　2，获取checkbox的多个行id

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

　　array=1,2,3...

　　3、获取rowId行的数据

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

　　4、获取单元格数据

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

转载于:https://my.oschina.net/u/1454202/blog/487952