jqGrid下的formatter使用详解

jqGrid

jqGrid 是一个用来显示表格数据的jQuery插件。通过使用jqGrid可以轻松实现前端页面与后台数据的ajax异步通信。

formatter

jqGrid中的formatter,可以用来格式化表格中的值,也可以通过自定义函数在单元格中插入一些标签。

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

formatter: 主要是设置格式化类型(integer ,email等以及自定义函数),
formatoptions: 用来设置对应formatter的参数

formatter预定义了常见的格式及其options。

1、formatter的预定义格式:

1.integer
thousandSeparator://千分位分隔符,
defaulValue

2.number
decimalSeparator,//小数分隔符,如"."
tousandsSwparator,//千分位分隔符,如","
decimalPlaces,//小数保留位数
defaulValue

3.currency
decimalSeparator,//小数分隔符,如"."
thousandsSeparator,//千分位分隔符,如","
decimalPlaces,//小数保留位数
defaulValue,
prefix//前缀,如加上"$"
suffix//后缀

4.date 
srcformat,//source的本来格式
newformat//新格式

5.email
没有参数

6.showlink
baseLinkUrl,//在当前cell中加入link的url,如"jq/query.action"
showAction, //在baseLinkUrl后加入&action=actionName
addParam, //在baseLinkUrl后加入额外的参数,如"&name=aaaa"
target,
idName    //默认会在baseLinkUrl后加入,如".action?id=1"。
改如果设置idName="name",那么".action?name=1"。其中取值为当前rowid

7.checkbox
disabled      //true/false 默认为true此时的checkbox不能编辑,如当前cell的值是1、0会将1选中

8.select
设置下拉框,没有参数,需要和colModel里的editoptions配合使用

2.formatter自定义函数

jQuery(grid_selector).jqGrid({
         ……
			colNames:['','评价指标名称','评价指标代码','备注','创建时间','操作'],
			colModel:[
				{name:'ID',index:'id', width:'5%',editable:false,sortable:false,hidden:true},
				{name:'ASSESS_NAME',index:'assess_name', width:'25%',editable: false,sortable:false,formatter :formatValue},
				{name:'ASSESS_CODE',index:'assess_code', width:'20%',editable:false,sortable:false,formatter :formatValue},
				{name:'REMARK',index:'remark', width:'25%',editable:false,sortable:false,formatter :formatValue},
				{name:'CREATE_TIME',index:'create_time',align:'center', width:'15%',editable:false,sortable:false,formatter:formatTime},
				{name:'STATUS',align:'center',width:'15%',sortable:false,editable: false,formatter:formatOperation}
			],
         ……
		});
//对数据进行验证,如果数据为null,则替换显示“-”
function formatValue(cellvalue, options, row) {
            //cellvalue为当前单元格的值
            //options为该单元格的options设置,包括{rowId, colModel,pos,gid} ,【基本没用过】
            //row为当前cell所在row的值,如{id=1,name=wjw,}
			if (cellvalue != null) {
				return cellvalue;
			} else {
				return "-";
			}
		}

结果:备注一栏使用了formatter进行格式化,当没有数据时显示“-”
在这里插入图片描述

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:游动-白 设计师:我叫白小胖 返回首页
评论

打赏作者

兀行者(做个有情怀的java程序员)

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值