pqGrid使用笔记

最新推荐文章于 2024-06-02 07:49:42 发布

原创最新推荐文章于 2024-06-02 07:49:42 发布 · 643 阅读 ·

本内容遵循CC 4.0 BY-SA版权协议

journey_IT

关注

分类前端开发

这篇博客详细记录了pqGrid的使用，包括属性配置如行选择、行号显示、隔行变色等，以及方法操作如选择行数据、获取colModel信息、数据刷新等操作。

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 ) {})