PQGrid商业化的表格组件
2024-04-01 18:25:48
PQGrid商业化的表格组件
官网地址https://paramquery.com/pro/grid
右侧导航条有目录哟，看着更方便
- 快速入门
- 表格构建
- API简单介绍
- 主要研究功能介绍
快速入门
<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(远程分页)例子）
<div id="grid_paging" style="margin:5px auto;"></div>
$(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", //数据格式JSONmethod: "GET", //获取方法GETurl: "/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简单介绍
主要研究功能介绍
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");
}PQGrid商业化的表格组件相关推荐
- bootstraptable 汇总_JS组件系列——表格组件神器：bootstrap table
前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...
- 开源Vue表格组件，表格插件源码
开源Vue表格组件,表格插件源码 前言: 关于html里面原生的table,通常满足不了程序员的要求.所以开发了一款表格插件,其功 能有: 1 导入json格式数据后,自动填充表格.表格长宽自适应.排 ...
- 说说如何基于 Vue.js 实现表格组件
我们基于 Vue.js 实现一个可根据某列进行排序的表格组件. 一个表格包含表头和数据两部分内容.因此,我们定义两个数组,columns 表示表头信息,在 <thread> 中渲染,并可在 ...
- js插件---JS表格组件BootstrapTable行内编辑解决方案x-editable
js插件---JS表格组件BootstrapTable行内编辑解决方案x-editable 参考文章: (1)js插件---JS表格组件BootstrapTable行内编辑解决方案x-editable ...
- vue实现简单表格组件
本来想这一周做一个关于vuex的总结的,但是由于朋友反应说还不知道如何用vue去写一个组件,所以在此写写一篇文章来说明下如何去写vue页面或者组件.vue的核心思想就是组件,什么是组件呢?按照我的理解 ...
- LigerUI编辑表格组件单元格校验问题
这几天在使用LigerUI(版本为1.2.2)编辑表格组件的时候,遇到几个小问题,从官方demo和api中没有找到解决的办法 问题1.从数据库查询出来的主键单元格不可编辑问题 主键单元格已经保存之前编 ...
- dojo自定义表格组件
table.js组件定义 define(["dijit/registry", "dojo/_base/array", "dojo/dom", ...
- slickgrid 中ajax,slickgrid.js 一种高性能web数据表格组件的探讨
本文将探讨一种高性能web数据表格组件的实现,首先简单介绍slickgrid这个前人开发的组件,接着对该组件的设计和实现思路进行讨论,最后对该组件的思想进行提炼,实现基于原始思想的新组件. slick ...
- vue实现表格组件，带分页
最近因为项目需要,利用vue开发了一套利于扩展的表格组件,可选择分页展示,带有排序功能支持,支持自定义操作按钮与class以及自定义render渲染.效果如下: 点击在线体验 使用简单: html: ...
最新文章
- 高糊视频秒变4K，速度快了9倍！东南大学提出新的视频超分辨率系统
- Redis 集群_主从复制_哨兵模型
- php函数相关函数,PHP数组相关函数汇总
- 在SQL中使用DEFAULT约束
- python saltstack web_saltstack web uiweb平台界面
- 《iOS编程指南》——导读
- restframework之节流
- sql中带in条件的查询及提高效率
- OpenGL基础40：Uniform缓冲
- 九存：重新定义存储矿机
- 服务器网站出现service,网站出现service unavailable的解决方法
- linux命名管道fifo通信示例
- tbpbebzbyb英文_化工常用英文缩写
- 网页中打开某个网页自动弹出扣扣群实现方法
- 如何制作PE系统盘？
- mysql弱口令加强,Mysql弱口令取得系统权限(续)
- 【英语：基础高阶_经典外刊阅读】L3.长句子扒皮—如何快速寻找主干
- FPGA三大串行通信接口之UART
- Ubuntu通过wine安装QQ无法输入账号怎么办?
- 敏捷开发的Scrum晨会实践