jqGrid常用属性和方法介绍

　　jqGrid API中文手册：http://blog.mn886.net/jqGrid/

一、jqGrid属性：

width：
Grid的宽度，如果未设置，则宽度应为所有列宽的之和；如果设置了宽度，则每列的宽度将会根据shrinkToFit选项的设置，进行设置。

height ：

Grid的高度，可以接受数字、%值、auto，默认值为150。
shrinkToFit：
此选项用于根据width计算每列宽度的算法。默认值为true。如果shrinkToFit为true且设置了width值，则每列宽度会根据width成比例缩放；如果shrinkToFit为false且设置了width值，则每列的宽度不会成比例缩放，而是保持原有设置，而Grid将会有水平滚动条。　　
autowidth：
默认值为false。如果设为true，则Grid的宽度会根据父容器的宽度自动重算。重算仅发生在Grid初始化的阶段；如果当父容器尺寸变化了，同时也需要变化Grid的尺寸的话，则需要在自己的代码中调用setGridWidth方法来完成。

　　这些属性只能是保证第一次时的宽度，当浏览器大小变化如还想让表格宽度自适应，就需要用jqgrid的方法setGridWidth,它有两个参数：new_width、shr，当第二个参数不设置时会按照shrinkToFit的设置值或默认值，而第一个参数则要设置的新的宽度值，所以可用js实现对浏览器宽度变化的自适应：　　

$(function(){　　
    $(window).resize(function(){　　
        $("#analyDataTab").setGridWidth($(window).width()*0.99);
        $("#charDataTab").setGridWidth(document.body.clientWidth*0.99);　
    });　　
});

注：这里的百分比可按自己需要来设定，也可直接是浏览器的宽度大小。

rownumWidth：控制序号栏的宽度

rownumbers: true,//序号栏是否显示
rownumWidth: 50,//序号栏宽度

viewrecords: true,是否显示总记录数

rowNum：是jqgrid分页时每页记录数，默认是20；如果设置rownum设置为10，不管后台返回记录数是多少，最多只显示10条。如果设置为-1，则显示后台返回的所有记录。

二、jqGrid保持显示垂直滚动条

在IE中记录比较少的时候，默认情况下不显示垂直滚动条，会出现标题行与数据行位置对不齐的情况，通过保持显示垂直滚动条可以解决这个问题。

$( pGridId ).closest(".ui-jqgrid-bdiv").css({ 'overflow-y' : 'scroll' });

需要保持水平滚动条，则：

$( pGridId ).closest(".ui-jqgrid-bdiv").css({ 'overflow-x' : 'scroll' });

三、动态显示隐藏某一列

$("#grid_id").setGridParam().showCol("colname").trigger("reloadGrid");
$("#grid_id").setGridParam().hideCol("colname").trigger("reloadGrid");

三、常用方法：

$("#gridTable").jqGrid("getGridParam","selrow");//获取选中行的id

$.currentIframe().$("#gridTable").jqGrid("getRowData","4028f65d5d1bb627015d1c297ecf0006");//根据选中的行的id获取选中行的数据

//取消所有选中的行：
$("jqgridtableid").trigger("reloadGrid")；
//设定选中行,可设定多行选中：
$("jqgridtableid").jqGrid('setSelection',id1);
//获得选中行的ID数组：
var ids = $("jqgridtableid").jqGrid('getGridParam','selarrrow');
//获得某单元格的数据：
var celldata = $("jqgridtableid").jqGrid('getCell',id,colnum);
//获得所有行的ID数组：
var ids =  $("jqgridtableid").jqGrid('getDataIDs');

下面可以获取选择一行的id，如果你选择多行，那下面的id是最后选择的行的id：

var id=$(‘#gridTable’).jqGrid(‘getGridParam’,'selrow’);

如果想要获取选择多行的id，那这些id便封装成一个id数组，那可以使用以下：

var ids=$(‘#gridTable’).jqGrid(‘getGridParam’,'selarrrow’);

如果想获取选择的行的数据，只要传入rowId即可，如下：

var rowData = $(“#gridTable”).jqGrid(‘getRowData’,rowId);

而这个rowData是一个对象，如果要获取选择的行的这个对象的属性值，如name的值，需如下：

var rowName=rowData.name;

当然你这个对象得有name这个属性才行。

四、标题栏的checkbox，全选全不选

当在JqGrid表格属性中设置了 multiselect：true，这时会在每一行前面出现checkbox

而在点击栏的checkbox时，表格全选或全部选，这时触发的事件是onSelectAll。

onSelectAll:function(rowids,statue){

//函数里做自己的处理

};

rowids:表示表格的所有行Id，即设置了key=true的那一列的值，如果设置了多列的 key=true，那么只选取第一个

statue：true/false,如果全选则为true，全不选则为false

全选的时候需要注意的是，rowids是个数组，当从id再获取行数据时需要循环遍历：

onSelectAll:function (rowid,status) {
            if (status) {
                for(var i=0,l=rowid.length;i<l;i++){
                    getCheckedId(rowid[i]);
                }
            } else {
                for(var i=0,l=rowid.length;i<l;i++){
                    unCheckedId(rowid);
                }
            }
        },

var rowsObj = {},
    rowsId = [];
function getCheckedId(id) {
    rowsId.push(id);
    rowsObj[id] = $("#gridTable").getRowData(id);
}

function unCheckedId(id) {
    removeRowId(id,rowsId);
    rowsObj[id] = null;
}

五、前端分页：

pager: "#gridPager",  
rowNum:30,   
rowList: [30,50,100],  
loadonce:true,//关键所在

六、获取id数组

$("#gridTable").jqGrid('getDataIDs');//获取所有行的id数组

$("#gridTable").jqGrid('getGridParam','selarrrow');//获取所有选中行的id数组

七、重新设置高度

　　设置height和setGridHeight都是无效的。原因是因为css的height样式覆盖了设置的height样式。

　　正确的应该是再次强制important(优先权)：

var newHeight = $(window).height() - $(".gridPanel").offset().top - 66;
$(".ui-jqgrid .ui-jqgrid-bdiv").css("cssText","height: "+newHeight+"px!important;");