上一章已经说明了在Jqgrid中如何对数据分组,这一章主要探讨如何格式化Jqgrid中的数据。何谓格式化呢?举个例子,比如对时间格式化处理,去掉后面的时分秒;对数字进行处理,加上千分位分隔符,小数的保留位数,加上前缀或后缀。对超链接或邮箱等等。

        jqGrid中对列表cell属性格式化设置主要通过colModel中formatter、formatoptions来设置的。jqGrid中也预定义了常见的格式及其options属性。
formatter formatoptions
integer  thousandsSeparator://千分位分隔符, 如”,” defaulValue://默认值
currency decimalSeparator: //小数分隔符,如”.” thousandsSeparator: //千分位分隔符,如”,” decimalPlaces: //小数保留位数 defaulValue:  prefix://前缀,如加上”$” suffix://后缀
number  decimalSeparator: //小数分隔符,如”.” thousandsSeparator: //千分位分隔符,如”,” decimalPlaces: //小数保留位数 defaulValue:
date srcformat, //原来的格式 newformat //新格式
select 没有参数,使用方法如: editoptions:{value:”0:男;1:女”}} 
checkbox  disabled:true or false 
showlink  baseLinkUrl://在当前cell中加入link的url showAction://在baseLinkUrl后加入&action=actionName addParam://参数,如”&name=xx” target: idName:默认会在baseLinkUrl后加入,如”.action?id=1″。如果 设置idName=”XX”,那么”.action?XX=1″。取值为当前rowid
email 没有参数

用法也比较简单,在Jqgrid的ColModel加入相应的formatter和formatoptions即可。如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
name : "age",
index : "age",
label : "年龄",
width : 120,
sortable : true,
align : 'center',
formatter : "number",
formatoptions : {
decimalSeparator : ".",
thousandsSeparator : ",",
decimalPlaces : 0,
defaulValue : 0
},

如果预定义的格式化不能满足你的要求,Jqgrid还提供了自定义格式化数据的方式。语法为:

1
2
3
function DIYFmatter(cellvalue, options, rowObject){
//your code
}

对于自定义formatter,在修改时需要获取原来的值,这里就提供了unformat函数。如:

1
2
3
4
5
6
7
8
9
10
{
name : "age",
index : "age",
label : "年龄",
width : 120,
sortable : true,
align : 'center',
formatter : DIYFmatter,
unformat:DIYUnFormat
}

然后自己写自定义格式化的方法。如:

1
2
3
4
5
6
7
8
function DIYFormat( cellvalue, options, rowObject ){
return '<img alt="" src="'+cellvalue+'" />';
}
function DIYUnFormat( cellvalue, options, cell){
 
return $('img', cell).attr('src');
 
}

如果还有什么疑惑的地方,可以留言。

原创文章,转载请注明: 转载自java开发者

本文链接地址: Jqgrid入门-Jqgrid格式化数据(九)

Jqgrid入门-Jqgrid格式化数据(九)的更多相关文章

  1. Jqgrid入门-Jqgrid分组的实现(八)

    上一章主要说明了如果实现Jqgrid列数据拖动,这一章主要讨论在Jqgrid中如何实现分组功能.         类似于Sql语句的Group By,Jqgrid提供了属性实现数据分组,这样表现数据会 ...

  2. Jqgrid入门-Jqgrid列数据拖动(七)

    上一章提到在Jqgrid中如何设置二级表头,这一章节主要探讨Jqgrid表格里面的数据如果实现拖动功能,比如你想把第一行的数据拖到当前页的最后一行,或者其他位置.     Jqgrid表格插件自己没有 ...

  3. Jqgrid入门-Jqgrid设置二级表头(六)

    上一章已经说明了Jqgrid结合Struts2+json展示数据,这一章主要探讨Jqgrid如何设置二级表头,类似这样的效果.如:           要实现这个功能,其实也不难.通过Jqgrid的s ...

  4. Jqgrid入门-结合Struts2+json实现数据展示(五)

    DEMO用的是ssh框架实现的,具体怎么搭建的就不多做说明了.分页表格的数据操作难点就是数据展现.至于增删改直接用hibernate原生的方法实现即可.         初步分析:表格要实现分页,那么 ...

  5. Jqgrid入门-别具特色的Pager Bar (四)

    Pager Bar位于表格最下边.默认情况下,分为三部分.如图: 第一部分:导航按钮栏(Navigator) 第二部分:页码栏(Pager) 第三部分:记录信息栏(Record)         要实 ...

  6. Jqgrid入门-使用模态对话框编辑表格数据(三)

            Jqgrid是一个强大的表格插件,它提供了多种方式来编辑数据.这三种方式分别是: Cell Editing——只允许修改某一个单元格内容 Inline Editing——允许在jqGr ...

  7. Jqgrid入门-显示基本的表格(一)

    首先对Jqgrid网格插件做个简要的说明.在众多的表格插件中,Jqgrid的特点是非常鲜明的.         特点如下: 完整的表格呈现与运算功能,包含换页.栏位排序.grouping.新增.修改及 ...

  8. 无废话ExtJs 入门教程十九[API的使用]

    无废话ExtJs 入门教程十九[API的使用] extjs技术交流,欢迎加群(201926085) 首先解释什么是 API 来自百度百科的官方解释:API(Application Programmin ...

  9. Docker入门教程(九)10个镜像相关的API

    Docker入门教程(九)10个镜像相关的API [编者的话]DockerOne组织翻译了Flux7的Docker入门教程,本文是系列入门教程的第九篇,重点介绍了镜像相关的Docker Remote ...

随机推荐

  1. 如何使用CSS3创建一个漂亮的图标

    演示 下载 今天,我想展示给你一个巧妙的花招.我们将创建一个纯CSS3文本图标.更让人震惊的是,这效果将只需要一个HTML元素. 游戏的计划 创建一个矩形盒子 设置圆角 使用伪类元素创建一个卷角效果 ...

  2. Android fill_parent、wrap_content和match_parent的区别

    三个属性都用来适应视图的水平或垂直大小,一个以视图的内容或尺寸为基础的布局比精确地指定视图范围更加方便. 1)fill_parent 设置一个构件的布局为fill_parent将强制性地使构件扩展,以 ...

  3. rm删除命令

    linux中删除文件和目录的命令: rm命令.rm是常用的命令,该命令的功能为删除一个目录中的一个或多个文件或目录,它也可以将某个目录及其下的所有文件及子目录均删除.对于链接文件,只是删除了链接,原有 ...

  4. 2016年度 JavaScript 展望(上)

    [编者按]本文作者为资深 Web 开发者 TJ VanToll, TJ 专注于移动端 Web 应用及其性能,是<jQuery UI 实践> 一书的作者. 本文系 OneAPM 工程师编译呈 ...

  5. 深入JS第一天:原型和它的小伙伴们(一)

    我在这里不说定义,找点问题,再解决问题. 一.原型 Q1:这样做输出的结果是什么? jQuery= String; jQuery.prototype.say = function () { alert ...

  6. cf 403 D

    D. Beautiful Pairs of Numbers time limit per test 3 seconds memory limit per test 256 megabytes inpu ...

  7. POJ 2480 Longge's problem (积性函数,欧拉函数)

    题意:求∑gcd(i,n),1<=i<=n思路:f(n)=∑gcd(i,n),1<=i<=n可以知道,其实f(n)=sum(p*φ(n/p)),其中p是n的因子.为什么呢?原因 ...

  8. WCF分布式开发步步为赢(3)WCF服务元数据交换、配置及编程开发

    今天我们继续WCF分布式开发步步为赢(3)WCF服务元数据交换.配置及编程开发的学习.经过前面两节的学习,我们了解WCF分布式开发的相关的基本的概念和自定义宿主托管服务的完整的开发和配置过程.今天我们 ...

  9. 如何学好oracle?(准备)

    循序渐进 多练习 http://www.tudou.com/listplay/ScoGxMJZGQc/Nw9HE62XiGo.html

  10. 模拟登陆115网盘(MFC版)

    [cpp] view plain copy // 模拟登陆115网盘 #include <afxinet.h> // 包含相关的头文件 /* 用抓包工具抓包可得到需要提交的数据,然后模拟提 ...