PQGrid商业化的表格组件

官网地址https://paramquery.com/pro/grid
右侧导航条有目录哟，看着更方便

• 快速入门
• 表格构建
• API简单介绍
• 主要研究功能介绍

快速入门

ParamQuery Grid Pro是ParamQuery Grid的商业级版本，相对于之前研究的Bootstrap Table组件，就一字字稳，商业化的东西就是好，不会出一些莫名其妙的Bug,虽然网上资料不多但是官方文档非常详细（本次基于6.x版本，只是入门使用版本应该关系不大）

需要导入的文件

	<link rel="stylesheet" href="../resources/css/pqbase/jquery-ui.css">
    <link rel="stylesheet" href="../resources/css/pqbase/bootstrap.min.css">
    <link rel="stylesheet" href="../resources/css/pqbase/pqgrid.min.css" >
    <link rel="stylesheet" href="../resources/css/pqbase/pqgrid.ui.min.css" id="pqgrid_ui_link">
    <link rel="stylesheet" href="../resources/css/pqbase/pqgrid.css" id="pqgrid_office_link">
    <link rel="stylesheet" href="../resources/css/base/bootstrap.min.css">

	<script src="../resources/js/pqbase/jquery-2.2.4.min.js"></script>
	<script src="../resources/js/pqbase/jquery-ui.min.js"></script>
	<script src="../resources/js/pqbase/pqgrid.min.js"></script>
	<script src="../resources/js/pqbase/pq-localize-en.js"></script>
	<script src="../resources/js/pqbase/jquery.resize.js"></script>
	<script src="../resources/js/pqbase/bootstrap.min.js"></script>

这些文件我就不提供了，研究的话打开官网查看源代码，去扣下来就行了，官方也提供免费的评估版本（当然需要申请），使用的话就得去买一版了
你还有几张图片需要下载，不然你看不到表格上的一些按钮

这里随便找了一个官方例子

<div id="grid_json" style="margin:auto;"></div>

    $(function () {
        var data = [
            { rank: 1, company: 'Exxon Mobil', revenues: 339938.0, profits: 36130.0 },
            { rank: 2, company: 'Wal-Mart Stores', revenues: 315654.0, profits: 11231.0 },
            { rank: 3, company: 'Royal Dutch Shell', revenues: 306731.0, profits: 25311.0 },
            { rank: 4, company: 'BP', revenues: 267600.0, profits: 22341.0 },
            { rank: 5, company: 'General Motors', revenues: 192604.0, profits: -10567.0 },
            { rank: 6, company: 'Chevron', revenues: 189481.0, profits: 14099.0 },
            { rank: 7, company: 'DaimlerChrysler', revenues: 186106.3, profits: 3536.3 },
            { rank: 8, company: 'Toyota Motor', revenues: 185805.0, profits: 12119.6 },
            { rank: 9, company: 'Ford Motor', revenues: 177210.0, profits: 2024.0 },
            { rank: 10, company: 'ConocoPhillips', revenues: 166683.0, profits: 13529.0 },
            { rank: 11, company: 'General Electric', revenues: 157153.0, profits: 16353.0 },
            { rank: 12, company: 'Total', revenues: 152360.7, profits: 15250.0 },
            { rank: 13, company: 'ING Group', revenues: 138235.3, profits: 8958.9 },
            { rank: 14, company: 'Citigroup', revenues: 131045.0, profits: 24589.0 },
            { rank: 15, company: 'AXA', revenues: 129839.2, profits: 5186.5 },
            { rank: 16, company: 'Allianz', revenues: 121406.0, profits: 5442.4 },
            { rank: 17, company: 'Volkswagen', revenues: 118376.6, profits: 1391.7 },
            { rank: 18, company: 'Fortis', revenues: 112351.4, profits: 4896.3 },
            { rank: 19, company: 'Crédit Agricole', revenues: 110764.6, profits: 7434.3 },
            { rank: 20, company: 'American Intl. Group', revenues: 108905.0, profits: 10477.0 }
        ];

        var obj = {
            width: "80%",
            height: 400,
            resizable: true,
            title: "Grid From JSON",
            showBottom: false,
            scrollModel: { autoFit: true },
            dataModel: { data: data }
        };
        $("#grid_json").pqGrid(obj);
    });

导入上方的js文件，在Html中写一个div,r然后在js中将表格渲染进该div中
能够正确显示出表格你就成功了

表格构建（官网Remote paging(远程分页)例子）

HTML

   <div id="grid_paging" style="margin:5px auto;"></div>

js

 $(function () {
        var colM = [				//列定义，pqgrid会根据dataIndex自动填充数据
            { title: "Order ID", width: 100, dataIndx: "OrderID" },
            { title: "Customer Name", width: 130, dataIndx: "CustomerName" },
            { title: "Product Name", width: 190, dataIndx: "ProductName" },
            { title: "Unit Price", width: 100, dataIndx: "UnitPrice", align: "right" },
            { title: "Quantity", width: 100, dataIndx: "Quantity", align: "right" },
		    { title: "Order Date", width: 100, dataIndx: "OrderDate", dataType:'date', align:'right' },
		    { title: "Required Date", width: 100, dataIndx: "RequiredDate", dataType:'date' },
		    { title: "Shipped Date", width: 100, dataIndx: "ShippedDate", dataType:'date' },
            { title: "ShipCountry", width: 100, dataIndx: "ShipCountry" },
            { title: "Freight", width: 100, align: "right", dataIndx: "Freight" },
            { title: "Shipping Name", width: 120, dataIndx: "ShipName" },
            { title: "Shipping Address", width: 180, dataIndx: "ShipAddress" },
            { title: "Shipping City", width: 100, dataIndx: "ShipCity" },
            { title: "Shipping Region", width: 110, dataIndx: "ShipRegion" },
            { title: "Shipping Postal Code", width: 130, dataIndx: "ShipPostalCode" }
		];
        var dataModel = {								//数据源
            location: "remote",							//数据位置远程
            dataType: "JSON",							//数据格式JSON
            method: "GET",								//获取方法GET
            url: "/pro/invoice/paging",				//获取地址
            getData: function (dataJSON) {		//返回后的分页处理，需要前后台协调
                var data = dataJSON.data;
                return { curPage: dataJSON.curPage, totalRecords: dataJSON.totalRecords, data: data };
            }
        };

        var grid1 = $("div#grid_paging").pqGrid({ 					//表格属性的创建与定义
            width: 800, height: 450,											//宽高
            dataModel: dataModel,											//数据模型，上面定义
            colModel: colM,														//表格，列的定义
            freezeCols: 2,															//固定列，固定的列数
            pageModel: { type: "remote", rPP: 20, strRpp: "{0}" },		//默认的页码与大小
            sortable: false,
            selectionModel: { swipe: false },								//选定方式
            wrap: false, hwrap: false,
            numberCell: { resizable: true, width: 30, title: "#" },
            title: "Shipping Orders",
            resizable: true															//列宽可调整大小
        });
    });

java 官方是为了可以方便演示，你的数据接口不用和他一样只需要注意返回值和参数就行

package controller;

import domain.Invoice;
import flexjson.JSONSerializer;
import flexjson.transformer.DateTransformer;
import java.util.Date;
import java.util.List;
import org.springframework.jdbc.core.BeanPropertyRowMapper;
import org.springframework.jdbc.core.support.JdbcDaoSupport;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

/**
 * @author paramvir
 */
@Controller
public class InvoiceController extends JdbcDaoSupport{

    @RequestMapping(value="/invoice/paging",method=RequestMethod.GET)
    public @ResponseBody String paging(@RequestParam int pq_curpage, @RequestParam int pq_rpp)
    {

        int total_Records = getJdbcTemplate().queryForInt(
            "Select count(*) as count from invoices order by orderID " );        

        int skip = (pq_rpp * (pq_curpage - 1));
        if (skip >= total_Records)
        {
            pq_curpage = (int)Math.ceil(((double)total_Records) / pq_rpp);
            skip = (pq_rpp * (pq_curpage - 1));
        }

        List<Invoice> invoices = getJdbcTemplate().
            query("Select * from invoices order by orderID limit " + skip + " , " + pq_rpp,
                new BeanPropertyRowMapper(Invoice.class));

        JSONSerializer serializer = new JSONSerializer().exclude("*.class");
        String serializedInvoices = serializer
                .transform(new DateTransformer("MM/dd/yyyy"), Date.class)
                .serialize(invoices);

        String sb = "{\"totalRecords\":" + total_Records + ",\"curPage\":" + pq_curpage + ",\"data\":" + serializedInvoices + "}";
        return sb;
    }
}

API简单介绍

pqgrid的demo给的非常全面，几乎不用你自己费力气去构建，直接copy就差不多满足你的需求，而且pqgrid还会提供相应的后台代码
demo地址：https://paramquery.com/pro/demos
API地址：https://paramquery.com/pro/api

主要研究功能介绍

诸如列固定，列可拖动，后台分页等在PQGrid中都非常稳定 唯一缺陷就是没有Cookie Paging功能，如果想实现修改后返回原来页面需要自己编写
后台分页
该功能在表格构建中已经讲解
查询功能 我使用官方文档中的传值方式不太方便，而且把查询条件输入框加入到表格内部也不太美观

function Search(){
    url="/BootStrapTableTest/test/selectall2.do";					//我的url设置为了全局变量，方便修改
    var params = $('#_searchForm').serializeObject();//将form中的查询条件转换成对象
    //传入数据
    DM = $grid.pqGrid("option", "dataModel");
    DM.postData = params;
    pm = $grid.pqGrid("option", "pageModel");
	//刷新表格重新获取数据
    refresh();
}
//刷新按钮
function refresh() {
    $grid.pqGrid("refreshDataAndView");
}