IntelliJ IDEA ScrollView CSS选择器 电力杆 ssm webview compilation joomla vue基础教程 后台界面 jquery事件绑定方法 linux环境变量生效 android逆向工程师 查看rabbitmq版本 java运行软件 pip环境变量 mysql查询结果拼接 maven插件 查看mysql密码 车载u盘 python的数据类型 python正则表达式语法 python设置环境变量 python用什么数据库 java基础语言 数据结构java版 java重写和重载 java基础代码 java中float rewritebase 微信签名一句话至自己 java程序设计基础 c语言表白代码 unity3d下载 催眠魔蛙 vs2003 中维高清监控系统安装 cad特性匹配 平面设计软件下载 ass转srt
当前位置: 首页 > 学习教程  > 编程语言

PQGrid商业化的表格组件

2020/8/31 13:33:32 文章标签:

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>
  • 1

    $(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");
}

本文链接: http://www.dtmao.cc/news_show_150097.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?