jqGrid用到的那些事儿

jqGrid是我工作中接触到的一个前端基于jQuery的一个表格插件，在应用中遇到的一些问题想把它记录下来，方便于自己记忆复习。

jqGrid 对在编辑的单元格进行绑定事件

onCellSelect : function (rowid, iCol, cellcontent, event) {
            var columnName = $(grid_selector).jqGrid("getGridParam","colNames")[iCol];
            setTimeout(function(){
                //输入框键盘事件处理（只能输入正整数）
                $("#"+ rowid + "_" + columnName).on("keyup", function(){
                    var inputValue = $(this).val();
                    if(inputValue.length==1){
                        $(this).val(inputValue.replace(/[^1-9]/g,''));
                    }else{
                        $(this).val(inputValue.replace(/\D/g,''));
                    }
                });
                //输入框失去焦点事件处理
                $("#"+ rowid + "_" + columnName).on("blur", function(){
                    saveLastEditCellData();
                });
            },100);
        }

jqGrid去掉分页功能

jqGrid内部提供了一些分页的功能，但有时候我们又不需要分页
那么如何去掉分页功能呢？

1. 首先在HTML页面中去掉分页栏目的标记
2. 然后在jqGrid中去掉一些属性

rowList:[10,20,30]

//注意：rowNum 需要设置为-1, 表示要显示所有的数据

1. 最后后台要查询返回所有的数据

根据iRow获取rowId

iRow指的是行的索引顺序，而rowId，是每一行的唯一标识。就是从中间删除几行之后，删除行后面的rowid也不会变，但是iRow已经改变了。

根据行号（iRow）获取该行对应的标识（rowId）

//以下方法有待测试
var rowId =  $(grid_selector).rows[iRow].id;

//也可以使用以下方式获取
var rowId = $(grid_selector).find("tr:eq(iRow)").attr("id");

根据rowId获取iRow

var iRow = $('#' + rowId)[0].rowIndex;

jqGrid的行数据移动操作

原理：

1. 先获取到要移动的行数据，保存起来
2. 将要移动的行数据从表格中删除
3. 再将保存起来的数据重新插入到表格中

var Rid=$("#grid-table").find("tr:eq(iRow)").attr("id");
var rowData = jQuery("#grid-table").jqGrid("getRowData",id);
jQuery("#grid-table").jqGrid("delRowData",id);
jQuery("#grid-table").jqGrid("addRowData",id, rowData, "before",Rid);

jqGrid行拖拽功能

$(grid_selector).jqGrid('sortableRows', {  
    items : '.jqgrow:not(.unsortable)' 
});

修改列名及对应colModel

$("#grid-table").jqGrid( 'setLabel', 列名, 修改后的列名, 'labelstyle' );

$("#grid-table").setColProp(col_Name, { name : 修改后的值, index : 修改后的值 });

//给序号列设置标题
$("#grid-table").jqGrid( 'setLabel', 'rn', "序号", 'labelstyle' );

设置jqGrid的只在点击checkbox时，选中当前行

使用jqgrid时，设置multiselect: true, 支持多选。并且点击grid的任何一个td都会选中当前行。
如果想只在点击checkbox时，选中当前行。重写beforeSelectRow函数即可。

beforeSelectRow: function (rowid, e) {  
   var $myGrid = $(this),  
       i = $.jgrid.getCellIndex($(e.target).closest('td')[0]),  
       cm = $myGrid.jqGrid('getGridParam', 'colModel');  
   return (cm[i].name === 'cb');  

}

常用的方法

• 设定选中行，但是不触发onSelectRow 的事件，设定第三个参数为false

$("#grid_selector").jqGrid('setSelection',selectedId,false);

• 通过重置选择行的方式来解决这个问题，这个方法好用，比起上一个方法

$("#grid_selector").jqGrid('resetSelection');

getGridParam方法

getGridParam(“url”)： 获取当前的AJAX的URL

getGridParam(“sortname”)：排序的字段

getGridParam(“sortorder”)：排序的顺序

getGridParam(“selrow”)：得到选中行的ID

getGridParam(“page”)：当前的页数

getGridParam(“rowNum”)：当前有多少行

getGridParam(“datatype”)：得到当前的datatype

getGridParam(“records”)：得到总记录数

getGridParam(“selarrrow”)：可以多选时，返回选中行的ID

var ids = $("grid_selector").jqGrid('getGridParam','selarrrow');
//获取所有数据
$("grid_selector").getRowData()

//获取一行的数据
$("grid_selector").jqGrid('getRowData',1)

//获取grid,不带数据格式的（对于可编辑的表格需要用这种方法）
$("grid_selector").getLocalRow(1);

setGridParam方法：

setGridParam({url:newvalue})：可以设置一个grid的ajax url，可配合trigger(“reloadGrid”)使用

setGridParam({sortname:newvalue})：设置排序的字段

setGridParam({sortorder:newvalue})：设置排序的顺序asc or desc

setGridParam({page:newvalue})：设置翻到第几页

setGridParam({rowNum:newvalue})：设置当前每页显示的行数

setGridParam({datatype:newvalue})：设置新的datatype(xml,json)

jQuery('#tableID').jqGrid('getGridParam','url'))
jQuery("#tableID").jqGrid('setGridParam',{page:2}).trigger("reloadGrid")