jqgrid比较使用频繁但偏冷门的知识点

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

1、在你的jqgrid表格tfoot处加合计 开启属性：

footerrow: true,
userDataOnFooter: true,

后台传过来的json格式如下，记得对应上字段名

{
    ...
    userData:{
        id: "合计", 
        un_covered_area: "159580.84", un_inside_area: "161331.22", dis_area: "-1750.38",…
    }
}

2、固定了列宽后，如何设置横向滚动条？开启属性：

shrinkToFit:false,  // 设置滚动条

3、jqgrid增加行号列（两种方法） 第一种是jqgird自带的序号，打开属性开启：

rownumbers: true,

第二种是自己从后台拼装，我这里用的是php：

$current = 0;
#组装序号
$page = ((int)$map['start'] / (int)$map['length']) + 1;
foreach($result as $key => $value) {
    #组装序号
    ++$current;
    $result[$key]['nowcur'] = $v['nowcur'] = ($page - 1) * $map['length'] + $current;
}

4、jqgrid如何去除分页，也仅仅是设置一个选项（后台怎么处理打印便知）：

rowNum: 'all',

5、jqgrid开启多选属性：

multiselect: true,

6、jqgrid自适应父容器宽属性：

autowidth: true,

7、Jqgrid类似datatables的render功能(cellvalue是当前值，rowObject是当前行数据对象)：

{   
    name: 'id', 
    index: 'id',
    width:"20px",
    sortable: false,  //禁止排序
    formatter:function(cellvalue, options, rowObject){  
        return "<input type='checkbox' name='checkbox[]' value='"+rowObject.id+"' />";  
    }
},  //序号

8、Jqgrid单行选择事件配置（rowid为gridcomplete方法中封装的主键id，而status表示当前行选没选中，您打印下便知啦）：

onSelectRow: function (rowid, status){
    ...
}

9、jqgrid开启多选时如何触发多选事件 如果开启了多选

multiselect: true,

则会触发下面多选事件

onSelectAll: function (rowid, status)｛
    ...
｝

10、jqGrid重载（参数可重置）

var data = {
    search: decodeURIComponent($(this).serialize())
};

$("#list").setGridParam({
    postData: data
}).trigger("reloadGrid"); // 重载jqgrid

里面可以设置新的多种配置参数

如果仅仅是刷新表格，那么用下面则会自动带上以前条件重新刷新一遍

$("#list").trigger("reloadGrid");//重载jqgrid

11、jqgrid获取取选中行的值：

第一种（可取出任意单击行字段值）

//得到jqgrid单行选择的行的数据
function getGridId(id, sql_name) {
    var ids = $("#" + id).jqGrid('getGridParam', 'selrow');
    var rets = jQuery("#" + id).jqGrid('getRowData', ids);
    if (rets) {
        return rets[sql_name]
    } else {
        return false;
    }
}

调用如：

console.log(getGridId('list', 'id'));

第二种（取出选定的全部值）

/**
 * [jqgrip 获取一行信息]
 * @param param jqgrip表格id
 * @returns 返回单行表信息
 */
function jqgrip_get_Row(param){
    var model = '#'+param;
    var rowId = $(model).jqGrid('getGridParam', 'selrow'); // 获取信息的id
    var rowData = $(model).jqGrid('getRowData', rowId);
    return rowData;
}

开启多选时，取出多行选中值

/**
 * jqgrip 获取多行信息
 * @param param jqgrip表格id
 * @returns 返回多行表信息
 */
function jqgrip_get_multiRow(param){
    var model = '#'+param;
    var rowId = $(model).jqGrid('getGridParam', 'selarrrow'); // 获取信息的id
    var multiRow =[];
    for (var i = 0; i < rowId.length; i++) {
        var res = $(model).jqGrid('getRowData', rowId[i]);
        multiRow.push(res);
    }
    return multiRow;
}

转载于:https://my.oschina.net/cxgphper/blog/871197