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;");