jqGrid学习笔记(二)
本节介绍jqGrid其他的使用方法,主要是一些基本操作,特殊的数据显示等。
1 刷新jqGrid数据。

$("#search_btn").click(function(){
//此处可以添加对查询数据的合法验证
var orderId = $("#orderId").val();
$("#list4").jqGrid('setGridParam',{
datatype:'json',
postData:{'orderId':orderId}, //发送数据
page:1
}).trigger("reloadGrid"); //重新载入
});

① setGridParam用于设置jqGrid的options选项。返回jqGrid对象 ② datatype为指定发送数据的格式; ③ postData为发送请求的数据,以key:value的形式发送,多个参数可以以逗号”,”间隔; ④ page为指定查询结果跳转到第一页; ⑤ trigger(“reloadGrid”);为重新载入jqGrid表格。
2 无数据的提示信息。



loadComplete: function() {//如果数据不存在,提示信息
var rowNum = $("#list4").jqGrid('getGridParam','records');
if (rowNum if($("#norecords").html() == null){
$("#list4").parent().append("</pre>
<div id="norecords">没有查询记录!</div>
<pre>");
}
$("#norecords").show();
}else{//如果存在记录,则隐藏提示信息。
$("#norecords").hide();
}
}

① loadComplete 为jqGrid加载完成,执行的方法;
② getGridParam这个方法用来获得jqGrid的选项值。它具有一个可选参数name,name即代表着jqGrid的选项名,如果不传入name参数,则会返回jqGrid整个选项options。例:
$("#list4").jqGrid('getGridParam','records');//获取当前jqGrid的总记录数;
3 显示jqGrid统计信息。
代码片段:

$("#list4").jqGrid({
......
colModel:[
{name:'productName',index:'productName',align:'center',sortable:false},
{name:'productAmt',index:'productAmt', align:'center'}
],
footerrow: true,//分页上添加一行,用于显示统计信息
......
pager:$('#gridPager'),
gridComplete: function() {//当表格所有数据都加载完成,处理统计行数据
var rowNum = $(this).jqGrid('getGridParam','records');
if(rowNum > 0){
var options = {
url: "test.action",// 默认是form的action,如果写的话,会覆盖from的action.
dataType: "json",// 'xml', 'script', or 'json' (接受服务端返回的类型.)
type: "POST",
success: function(data){//成功后调用方法
$("#list4").footerData("set",{productName:"合计",productAmt:data.productAmtSum});
}
};
$("#searchForm").ajaxSubmit(options);
}
}
});

详细介绍:
3.1jqGrid的options配置; 需要在jqGrid的options中添加如下属性:
footerrow: true,//分页上添加一行,用于显示统计信息
3.2 调用gridComplete方法,当数据加载完成后,处理统计行数据; 3.3调用jqGrid的footerData方法,为统计行赋值:
$("#list4").footerData("set",{productName:"合计",productAmt:data.productAmtSum});
4 jqGrid的数据格式化。

jQuery("#jqGrid_id").jqGrid({
...
colModel: [
...
{name:'price', index:'price', formatter:'integer', formatoptions:{thousandsSeparator: ','}},
...
]
...
});


colModel:[
{name:'id', index:'id', formatter: customFmatter},
{name:'name', index:'name', formatter: "showlink", formatoptions:{baseLinkUrl:"save.action",idName: "id", addParam:"&name=123"}},
{name:'price', index:'price', formatter: "currency", formatoptions: {thousandsSeparator:",",decimalSeparator:".", prefix:"$"}},
{name:'email', index:'email', formatter: "email"},
{name:'amount', index:'amount', formatter: "number", formatoptions: {thousandsSeparator:",", defaulValue:"",decimalPlaces:3}},
{name:'gender', index:'gender', formatter: "checkbox",formatoptions:{disabled:false}},
{name:'type', index:'type', formatter: "select", editoptions:{value:"0:无效;1:正常;2:未知"}}
]

其中customFmatter声明如下:
function customFmatter(cellvalue, options, rowObject){
console.log(cellvalue);
console.log(options);
console.log(rowObject);
return "["+cellvalue+"]";
};
在页面显示的效果如下:
function customFmatter(cellvalue, options, rowObject){
}
//cellvalue - 当前cell的值
//options - 该cell的options设置,包括{rowId, colModel,pos,gid}
//rowObject - 当前cell所在row的值,如{ id=1, name="name1", price=123.1, ...}
当然对于自定义formatter,在修改时需要获取原来的值,这里就提供了unformat函数,这里见官网的例子:

jQuery("#grid_id").jqGrid({
...
colModel: [
...
{name:'price', index:'price', width:60, align:"center", editable: true, formatter:imageFormat, unformat:imageUnFormat},
...
]
...
});
function imageFormat( cellvalue, options, rowObject ){
return '</pre>
<img src="'+cellvalue+'" alt="" />
<pre>';
}
function imageUnFormat( cellvalue, options, cell){
return $('img', cell).attr('src');
}

5 常见错误问题:
chrome报错:
Uncaught TypeError: Cannot read property ‘integer’ of undefined
IE报错:
SCRIPT5007: 无法获取属性“integer”的值: 对象为 null 或未定义 出现这样的问题,是由于页面没有添加语言文件的引用导致的 解决办法为:添加语言文件js
<script type="text/javascript" src="js/i18n/grid.locale-cn.js"></script>
jqGrid学习笔记(二)的更多相关文章
- WPF的Binding学习笔记(二)
原文: http://www.cnblogs.com/pasoraku/archive/2012/10/25/2738428.htmlWPF的Binding学习笔记(二) 上次学了点点Binding的 ...
- AJax 学习笔记二(onreadystatechange的作用)
AJax 学习笔记二(onreadystatechange的作用) 当发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态XMLHttpRequest对象提供了on ...
- [Firefly引擎][学习笔记二][已完结]卡牌游戏开发模型的设计
源地址:http://bbs.9miao.com/thread-44603-1-1.html 在此补充一下Socket的验证机制:socket登陆验证.会采用session会话超时的机制做心跳接口验证 ...
- JMX学习笔记(二)-Notification
Notification通知,也可理解为消息,有通知,必然有发送通知的广播,JMX这里采用了一种订阅的方式,类似于观察者模式,注册一个观察者到广播里,当有通知时,广播通过调用观察者,逐一通知. 这里写 ...
- java之jvm学习笔记二(类装载器的体系结构)
java的class只在需要的时候才内转载入内存,并由java虚拟机的执行引擎来执行,而执行引擎从总的来说主要的执行方式分为四种, 第一种,一次性解释代码,也就是当字节码转载到内存后,每次需要都会重新 ...
- Java IO学习笔记二
Java IO学习笔记二 流的概念 在程序中所有的数据都是以流的方式进行传输或保存的,程序需要数据的时候要使用输入流读取数据,而当程序需要将一些数据保存起来的时候,就要使用输出流完成. 程序中的输入输 ...
- 《SQL必知必会》学习笔记二)
<SQL必知必会>学习笔记(二) 咱们接着上一篇的内容继续.这一篇主要回顾子查询,联合查询,复制表这三类内容. 上一部分基本上都是简单的Select查询,即从单个数据库表中检索数据的单条语 ...
- NumPy学习笔记 二
NumPy学习笔记 二 <NumPy学习笔记>系列将记录学习NumPy过程中的动手笔记,前期的参考书是<Python数据分析基础教程 NumPy学习指南>第二版.<数学分 ...
- Learning ROS for Robotics Programming Second Edition学习笔记(二) indigo tools
中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS for Robotics Pr ...
- Redis学习笔记二 (BitMap算法分析与BitCount语法)
Redis学习笔记二 一.BitMap是什么 就是通过一个bit位来表示某个元素对应的值或者状态,其中的key就是对应元素本身.我们知道8个bit可以组成一个Byte,所以bitmap本身会极大的节省 ...
随机推荐
- Android 开发错误信息001
Error:Execution failed for task ':app:dexDebug'. > com.android.ide.common.process.ProcessExceptio ...
- Oracle学习系列5
Oracle学习系列5 ************************************************************************************ ,掌握 ...
- Notepad++配置Python开发环境
1. 安装Python 1 下载 我选择了32位的2.7版本.https://www.python.org/ftp/python/2.7.8/python-2.7.8.msi 2. 安装 安装的时候可 ...
- 配置recovery_min_apply_delay后重启standby节点报错:psql: FATAL: the database system is starting up
环境: pg版本:PostgreSQL 9.4.4 on x86_64 系统版本:CentOS release 6.6 linux内核版本:2.6.32-504.8.1.el6.x86_64 今天测试 ...
- vb6获取字符串长度
用过VB5.0或者更早版本的读者应该知道VB有一个测试字符串长度的函数: Len.但当你升级到VB6时,会发现这里的Len并没有以前那么好用了——它变成了测试字符个数而不是字符串长度.就是说,当你用以 ...
- PageRank与TrustRank影响因素分析
PageRank(PR)里的page不是指网页,而是指Google创始人拉里?佩奇(Larry Page),是他在2001年申请的专利中以自己名字命名的,Google的PageRank根据网站的外部链 ...
- IntelliJ Idea 常用快捷键 列表(实战终极总结!!!!)
IntelliJ Idea 常用快捷键 列表(实战终极总结!!!!) 1. -----------自动代码-------- 常用的有fori/sout/psvm+Tab即可生成循环.System.ou ...
- yii2 使用twig 模板引擎
yii2 默认使用PHP 和html 混合的方式来写视图层,但我个人还是喜欢纯模板语言的方式.而且已经非常习惯使用twig的语法,最近想使用yii2进行开发,所以还是选择使用twig视图引擎. git ...
- 【转载-好文】使用 Spring 2.5 注释驱动的 IoC 功能
在 IBM Bluemix 云平台上开发并部署您的下一个应用. 开始您的试用 原文链接:https://www.ibm.com/developerworks/cn/java/j-lo-spring25 ...
- Django中csrf错误
CSRF(Cross-site request forgery)跨站请求伪造,也被称为“one click attack”或者session riding,通常缩写为CSRF或者XSRF,是一种对网站 ...