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函数
Sep 08 Javascript
异步加载script的代码
Jan 12 Javascript
对xmlHttp对象方法和属性的理解
Jan 17 Javascript
GRID拖拽行的实例代码
Jul 18 Javascript
Javascript 实现的数独解题算法网页实例
Oct 15 Javascript
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
Feb 21 Javascript
jQuery简单实现tab选项卡切换效果
Jun 20 Javascript
使用BootStrap实现用户登录界面UI
Aug 10 Javascript
javascript实现文字无缝滚动
Dec 27 Javascript
jQuery实现的简单对话框拖动功能示例
Jun 05 jQuery
javascript实现fetch请求返回的统一拦截
Dec 22 Javascript
jQuery实现可以扩展的日历
Dec 01 jQuery
各浏览器对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 session 存储方式的详细介绍
2013/06/25 PHP
PHP date_default_timezone_set()设置时区操作实例分析
2020/05/16 PHP
IE下通过a实现location.href 获取referer的值
2014/09/04 Javascript
jQuery获取iframe的document对象的方法
2014/10/10 Javascript
BootStrap组件之进度条的基本用法
2017/01/19 Javascript
jQuery实现获取h1-h6标题元素值的方法
2017/03/06 Javascript
JavaScript之filter_动力节点Java学院整理
2017/06/28 Javascript
jQuery 中msgTips 顶部弹窗效果实现代码
2017/08/14 jQuery
BetterScroll 在移动端滚动场景的应用
2017/09/18 Javascript
JS+canvas画一个圆锥实例代码
2017/12/13 Javascript
React项目动态设置title标题的方法示例
2018/09/26 Javascript
vue项目环境变量配置的实现方法
2018/10/12 Javascript
详解关于Vuex的action传入多个参数的问题
2019/02/22 Javascript
微信小程序实现左侧滑栏过程解析
2019/08/26 Javascript
Vue退出登录时清空缓存的实现
2019/11/12 Javascript
vue - props 声明数组和对象操作
2020/07/30 Javascript
[40:19]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第二场 12.18
2020/12/19 DOTA
Python编码时应该注意的几个情况
2013/03/04 Python
构建Python包的五个简单准则简介
2015/06/15 Python
Python实现基于KNN算法的笔迹识别功能详解
2018/07/09 Python
python 爬取马蜂窝景点翻页文字评论的实现
2020/01/20 Python
python绘制玫瑰的实现代码
2020/03/02 Python
Django实现内容缓存实例方法
2020/06/30 Python
Python3爬虫关于代理池的维护详解
2020/07/30 Python
次世代生活态度:Hypebeast
2018/07/05 全球购物
办理居住证介绍信
2014/01/15 职场文书
社区七一党员活动方案
2014/01/25 职场文书
优秀干部获奖感言
2014/01/31 职场文书
教师专业自荐书范文
2014/02/10 职场文书
母婴店促销方案
2014/03/05 职场文书
商业项目策划方案
2014/06/05 职场文书
2014年环境卫生工作总结
2014/11/24 职场文书
暑期辅导班宣传单
2015/07/14 职场文书
家庭教育培训学习心得体会
2016/01/14 职场文书
机关单位2016年法制宣传日活动总结
2016/04/01 职场文书
Python图片验证码降噪和8邻域降噪
2021/08/30 Python