pqGrid使用笔记

• 1. 属性配置

1. 属性配置

单独选择一行属性设置

selectionModel: { type: 'row' , mode: 'single' },

选择多行属性设置

selectionModel: { type: 'row' , fireSelectChange: true },

显示行号配置

numberCell: {show: true},

表格隔行变色配置

stripeRows: true,

鼠标移入背景变色配置

hoverMode: 'row',

换行配置

wrap: true,

自定义单元格样式

$.extend(pqGridOptions.colModel[6], {
    render: function (ui) {
        var rowData = ui.rowData,
            dataIndx = ui.dataIndx;

        return "<span title='"+rowData['mtrl_prod_dsc']+"'>"+ rowData['mtrl_prod_dsc'] +"</span>";
    }
});

• 2. 方法操作

2. 方法操作

选择并获取行数据

$('#boxInfoGridTable').pqGrid('selection', { type: 'row', method: 'getSelection' });

获取pqgrid所有colModel信息

$( "#rsvInfoGrdTable" ).pqGrid( "getColModel" );

获取pqgrid所有行数据

$( "#rsvInfoGrdTable" ).pqGrid( "option" , "dataModel" ).data;

将数据添加到表格中并刷新渲染

$( "#rsvInfoGrdTable" ).pqGrid( { dataModel: { data: outObj }} );
$( "#rsvInfoGrdTable" ).pqGrid("refreshDataAndView");

将表格中的数据清空并刷新渲染

$( "#rsvInfoGrdTable" ).pqGrid( { dataModel: { data: [] }} );
$( "#rsvInfoGrdTable" ).pqGrid("refreshDataAndView");

双击行触发相应事件

$( "#rsvInfoGrdTable" ).on( "pqgridrowdblclick", function( event, ui ) {})