上一章已经说明了在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. zero to one:创业秘籍并不存在,因为任何创新都是新颖独特的,任何权威都不可能具体规定如何创新

    彼得·蒂尔(Peter Thiel)的新作<从0到1>从预售开始就占据美国亚马逊排行榜第一名的位置,被一批创业家和企业家评为“迄今为止最好的商业书”.这是一本关于如何创建创新公司的书,主要 ...

  2. 网页出现scanstyles does nothing in Webkit / Mozilla的解决方法

    今天ytkah要验证一些百度服务,那边的客服MM说她用ie浏览器打开网页出现"scanstyles does nothing in Webkit / Mozilla / Opera" ...

  3. Sqli-labs less 36

    Less-36 我们直接看到36关的源代码 上面的check_quotes()函数是利用了mysql_real_escape_string()函数进行的过滤. mysql_real_escape_st ...

  4. Acdream1217 Cracking' RSA(高斯消元)

    题意:给你m个数(m<=100),每个数的素因子仅来自于前t(t<=100)个素数,问这m个数的非空子集里,满足子集里的数的积为完全平方数的有多少个. 一开始就想进去里典型的dp世界观里, ...

  5. Simulate a seven-sided die using only five-sided

    问题描述: 如题 转述一下问题,就是说你现在有一个正五面体骰子,然后你怎么用这个正五面体骰子去模拟一个正七面体骰子. 这个问题我接触到几种方法,下面一一阐述. 方法一: rand7()=( rand5 ...

  6. POJ 1986 Distance Queries (最近公共祖先,tarjan)

    本题目输入格式同1984,这里的数据范围坑死我了!!!1984上的题目说边数m的范围40000,因为双向边,我开了80000+的大小,却RE.后来果断尝试下开了400000的大小,AC.题意:给出n个 ...

  7. iOS学习资料链接

    http://www.cocoachina.com/ios/20150111/10894.html

  8. 2014多校第五场1001 || HDU 4911 Inversion (归并求逆序数)

    题目链接 题意 : 给你一个数列,可以随意交换两相邻元素,交换次数不超过k次,让你找出i < j 且ai > aj的(i,j)的对数最小是多少对. 思路 : 一开始想的很多,各种都想了,后 ...

  9. ExtJs布局之border

    <!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-equiv ...

  10. qt练习10 涂鸦板源代码

    源代码下载: http://files.cnblogs.com/hnrainll/doodle.zip http://www.cnblogs.com/hnrainll/archive/2011/05/ ...