Jqgrid入门-Jqgrid格式化数据(九)
上一章已经说明了在Jqgrid中如何对数据分组,这一章主要探讨如何格式化Jqgrid中的数据。何谓格式化呢?举个例子,比如对时间格式化处理,去掉后面的时分秒;对数字进行处理,加上千分位分隔符,小数的保留位数,加上前缀或后缀。对超链接或邮箱等等。
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 |
没有参数 |
用法也比较简单,在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格式化数据(九)的更多相关文章
- Jqgrid入门-Jqgrid分组的实现(八)
上一章主要说明了如果实现Jqgrid列数据拖动,这一章主要讨论在Jqgrid中如何实现分组功能. 类似于Sql语句的Group By,Jqgrid提供了属性实现数据分组,这样表现数据会 ...
- Jqgrid入门-Jqgrid列数据拖动(七)
上一章提到在Jqgrid中如何设置二级表头,这一章节主要探讨Jqgrid表格里面的数据如果实现拖动功能,比如你想把第一行的数据拖到当前页的最后一行,或者其他位置. Jqgrid表格插件自己没有 ...
- Jqgrid入门-Jqgrid设置二级表头(六)
上一章已经说明了Jqgrid结合Struts2+json展示数据,这一章主要探讨Jqgrid如何设置二级表头,类似这样的效果.如: 要实现这个功能,其实也不难.通过Jqgrid的s ...
- Jqgrid入门-结合Struts2+json实现数据展示(五)
DEMO用的是ssh框架实现的,具体怎么搭建的就不多做说明了.分页表格的数据操作难点就是数据展现.至于增删改直接用hibernate原生的方法实现即可. 初步分析:表格要实现分页,那么 ...
- Jqgrid入门-别具特色的Pager Bar (四)
Pager Bar位于表格最下边.默认情况下,分为三部分.如图: 第一部分:导航按钮栏(Navigator) 第二部分:页码栏(Pager) 第三部分:记录信息栏(Record) 要实 ...
- Jqgrid入门-使用模态对话框编辑表格数据(三)
Jqgrid是一个强大的表格插件,它提供了多种方式来编辑数据.这三种方式分别是: Cell Editing——只允许修改某一个单元格内容 Inline Editing——允许在jqGr ...
- Jqgrid入门-显示基本的表格(一)
首先对Jqgrid网格插件做个简要的说明.在众多的表格插件中,Jqgrid的特点是非常鲜明的. 特点如下: 完整的表格呈现与运算功能,包含换页.栏位排序.grouping.新增.修改及 ...
- 无废话ExtJs 入门教程十九[API的使用]
无废话ExtJs 入门教程十九[API的使用] extjs技术交流,欢迎加群(201926085) 首先解释什么是 API 来自百度百科的官方解释:API(Application Programmin ...
- Docker入门教程(九)10个镜像相关的API
Docker入门教程(九)10个镜像相关的API [编者的话]DockerOne组织翻译了Flux7的Docker入门教程,本文是系列入门教程的第九篇,重点介绍了镜像相关的Docker Remote ...
随机推荐
- zero to one:创业秘籍并不存在,因为任何创新都是新颖独特的,任何权威都不可能具体规定如何创新
彼得·蒂尔(Peter Thiel)的新作<从0到1>从预售开始就占据美国亚马逊排行榜第一名的位置,被一批创业家和企业家评为“迄今为止最好的商业书”.这是一本关于如何创建创新公司的书,主要 ...
- 网页出现scanstyles does nothing in Webkit / Mozilla的解决方法
今天ytkah要验证一些百度服务,那边的客服MM说她用ie浏览器打开网页出现"scanstyles does nothing in Webkit / Mozilla / Opera" ...
- Sqli-labs less 36
Less-36 我们直接看到36关的源代码 上面的check_quotes()函数是利用了mysql_real_escape_string()函数进行的过滤. mysql_real_escape_st ...
- Acdream1217 Cracking' RSA(高斯消元)
题意:给你m个数(m<=100),每个数的素因子仅来自于前t(t<=100)个素数,问这m个数的非空子集里,满足子集里的数的积为完全平方数的有多少个. 一开始就想进去里典型的dp世界观里, ...
- Simulate a seven-sided die using only five-sided
问题描述: 如题 转述一下问题,就是说你现在有一个正五面体骰子,然后你怎么用这个正五面体骰子去模拟一个正七面体骰子. 这个问题我接触到几种方法,下面一一阐述. 方法一: rand7()=( rand5 ...
- POJ 1986 Distance Queries (最近公共祖先,tarjan)
本题目输入格式同1984,这里的数据范围坑死我了!!!1984上的题目说边数m的范围40000,因为双向边,我开了80000+的大小,却RE.后来果断尝试下开了400000的大小,AC.题意:给出n个 ...
- iOS学习资料链接
http://www.cocoachina.com/ios/20150111/10894.html
- 2014多校第五场1001 || HDU 4911 Inversion (归并求逆序数)
题目链接 题意 : 给你一个数列,可以随意交换两相邻元素,交换次数不超过k次,让你找出i < j 且ai > aj的(i,j)的对数最小是多少对. 思路 : 一开始想的很多,各种都想了,后 ...
- ExtJs布局之border
<!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-equiv ...
- qt练习10 涂鸦板源代码
源代码下载: http://files.cnblogs.com/hnrainll/doodle.zip http://www.cnblogs.com/hnrainll/archive/2011/05/ ...