jqGrid学习笔记(2)
来源:互联网 发布:淘宝代销分账 保証金 编辑:程序博客网 时间:2024/06/14 23:10
本节介绍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学习笔记(2)
- jqgrid 简单学习笔记
- jqgrid学习笔记
- jqgrid学习笔记
- jqGrid学习笔记
- jqGrid学习笔记
- jqgrid学习笔记
- jqgrid学习笔记
- jqGrid学习笔记(1)
- JqGrid学习笔记
- (转)jqGrid学习笔记
- JqGrid学习笔记
- jqgrid学习笔记
- jqGrid学习笔记
- jqGrid学习笔记 完整整理
- jqGrid学习笔记(一)
- jqGrid学习笔记(二)
- Jqgrid学习笔记__01__多选
- @Inject
- 【吐血整理】Hibernate常用的主键生成策略的原理、优缺点、应用场合
- MongoDB(3.0.2)在centos6.2(64位)下安装
- Scala讲座:函数式语言的体验
- cocosstudio 面板 和层 和 图片的触碰
- jqGrid学习笔记(2)
- 《python核心编程第二版》第三章习题
- php $0
- Android sdk content loader 0%的解决方案
- sax解析操作XML
- 桶排序及其应用
- 池化服务与非池化服务的区别
- java导出功能
- java单例模式