jQuery表格插件ParamQuery简单使用方法示例


Posted in Javascript onDecember 05, 2013

jQuery表格插件ParamQuery简单使用方法示例

实现步骤:
先在html的head中加入对jQuery和jQuery UI的引用:

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/base/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>       <!--用了CDN链接(自适应http, https的切换),所以src的开头直接用了"//"-->
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>  <!--同上-->

再加入对Param Query Grid的引用:

<link rel="stylesheet" href="/Content/pqgrid/pqgrid.min.css" />           <!--这个css文件必须引用,无论你是用了皮肤,还是没有用到皮肤,都要引用-->
<script type="text/javascript" src="/Scripts/pqgrid.min.js" ></script>    <!--这个js文件必须引用-->

增加脚本代码:

$(function () {
                var data = [    [1, 'Exxon Mobil', '339,938.0', '36,130.0'],
                                [2, 'Wal-Mart Stores', '315,654.0', '11,231.0'],
                                [3, 'Royal Dutch Shell', '306,731.0', '25,311.0'],
                                [4, 'BP', '267,600.0', '22,341.0'],
                                [5, 'General Motors', '192,604.0', '-10,567.0'],
                                [6, 'Chevron', '189,481.0', '14,099.0'],
                                [7, 'DaimlerChrysler', '186,106.3', '3,536.3'],
                                [8, 'Toyota Motor', '185,805.0', '12,119.6'],
                                [9, 'Ford Motor', '177,210.0', '2,024.0'],
                                [10, 'ConocoPhillips', '166,683.0', '13,529.0'],
                                [11, 'General Electric', '157,153.0', '16,353.0'],
                                [12, 'Total', '152,360.7', '15,250.0'],
                                [13, 'ING Group', '138,235.3', '8,958.9'],
                                [14, 'Citigroup', '131,045.0', '24,589.0'],
                                [15, 'AXA', '129,839.2', '5,186.5'],
                                [16, 'Allianz', '121,406.0', '5,442.4'],
                                [17, 'Volkswagen', '118,376.6', '1,391.7'],
                                [18, 'Fortis', '112,351.4', '4,896.3'],
                                [19, 'Crédit Agricole', '110,764.6', '7,434.3'],
                                [20, 'American Intl. Group', '108,905.0', '10,477.0']
                            ];
                var obj = {};
                obj.width = 700;
                obj.height = 400;
                obj.colModel = [{ title: "Rank", width: 100, dataType: "integer" },
                    { title: "Company", width: 200, dataType: "string" },
                    { title: "Revenues ($ millions)", width: 150, dataType: "float", align: "right" },
                    { title: "Profits ($ millions)", width: 150, dataType: "float", align: "right" }];
                obj.dataModel = { data: data };
                $("#grid_array").pqGrid(obj);
            });

最后,在要显示的地方加入div元素,用来显示表格:

<div id="grid_array"></div>

运行就能看到效果

加入Theme皮肤的Demo

jQuery表格插件ParamQuery简单使用方法示例

实现步骤:
js代码逻辑部分没有任何变动,哈哈。
html的head部分增加那么一句style引用,就搞定了,如下:

<link rel="stylesheet" href="/Content/pqgrid/pqgrid.min.css" />               <!- 这句就是增加的,其他没有任何变动...哈哈 ->
<link rel="stylesheet" href="/Content/pqgrid/themes/peach/pq-grid.css" />
<script type="text/javascript" src="/Scripts/pqgrid.min.js" ></script>
Javascript 相关文章推荐
小议javascript 设计模式 推荐
Oct 28 Javascript
js文本框输入点回车触发确定兼容IE、FF等
Nov 19 Javascript
javascript结合fileReader 实现上传图片
Jan 30 Javascript
两种JS实现屏蔽鼠标右键的方法
Aug 20 Javascript
浅谈js的html元素的父节点,子节点
Aug 06 Javascript
微信小程序之小豆瓣图书实例
Nov 30 Javascript
在node.js中怎么屏蔽掉favicon.ico的请求
Mar 01 Javascript
AngularJS表格样式简单设置方法示例
Mar 03 Javascript
JavaScript实现全选取消效果
Dec 14 Javascript
动态Axios的配置步骤详解
Jan 12 Javascript
微信小程序使用map组件实现解析经纬度功能示例
Jan 22 Javascript
vue el-tree 默认展开第一个节点的实现代码
May 15 Javascript
各浏览器对document.getElementById等方法的实现差异解析
Dec 05 #Javascript
给事件响应函数传参数的四种方式小结
Dec 05 #Javascript
弹出最简单的模式化遮罩层的js代码
Dec 04 #Javascript
js如何设置在iframe框架中指定div不显示
Dec 04 #Javascript
jquery动态改变onclick属性导致失效的问题解决方法
Dec 04 #Javascript
javascript设置金额样式转换保留两位小数示例代码
Dec 04 #Javascript
下拉列表select 由左边框移动到右边示例
Dec 04 #Javascript
You might like
php算开始时间到过期时间的相隔的天数
2011/01/12 PHP
PHP中执行cmd命令的方法
2014/10/11 PHP
php实现webservice实例
2014/11/06 PHP
php输入数据统一类实例
2015/02/23 PHP
php获取文章内容第一张图片的方法示例
2017/07/03 PHP
PDO::setAttribute讲解
2019/01/29 PHP
Save a File Using a File Save Dialog Box
2007/06/18 Javascript
javascript实现仿银行密码输入框效果的代码
2007/12/13 Javascript
jquery 全局AJAX事件使用代码
2010/11/05 Javascript
jQuery中数据缓存$.data的用法及源码完全解析
2016/04/29 Javascript
js enter键激发事件实例代码
2016/08/17 Javascript
vue.js表格分页示例
2016/10/18 Javascript
JS实现的自动打字效果示例
2017/03/10 Javascript
JS正则表达式完美实现身份证校验功能
2017/10/18 Javascript
React 组件中的 bind(this)示例代码
2018/09/16 Javascript
vue.js的双向数据绑定Object.defineProperty方法的神奇之处
2019/01/18 Javascript
Vue.js项目实战之多语种网站的功能实现(租车)
2019/08/07 Javascript
ES6函数和数组用法实例分析
2020/05/23 Javascript
简介JavaScript错误处理机制
2020/08/04 Javascript
[01:03:59]2018DOTA2亚洲邀请赛3月30日 小组赛B组VGJ.T VS Secret
2018/03/31 DOTA
Python列表(list)常用操作方法小结
2015/02/02 Python
Python 函数基础知识汇总
2018/03/09 Python
对PyTorch torch.stack的实例讲解
2018/07/30 Python
Centos下实现安装Python3.6和Python2共存
2018/08/15 Python
Django中的FBV和CBV用法详解
2019/09/15 Python
Python求两个字符串最长公共子序列代码实例
2020/03/05 Python
DjangoWeb使用Datatable进行后端分页的实现
2020/05/18 Python
新奇的小玩意:IWOOT
2016/07/21 全球购物
国外平面设计第一市场:99designs
2016/10/25 全球购物
Lookfantastic挪威官网:英国知名美妆购物网站
2017/07/26 全球购物
俄罗斯韩国化妆品网上商店:Cosmasi.ru
2019/10/31 全球购物
张家口市高新区党工委群众路线教育实践活动整改方案
2014/10/25 职场文书
盗窃罪辩护词范文
2015/05/21 职场文书
小学一年级语文教学反思
2016/03/03 职场文书
Oracle 数据仓库ETL技术之多表插入语句的示例详解
2021/04/12 Oracle
详解Mysq MVCC多版本的并发控制
2022/04/29 MySQL