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进行格式化，当没有数据时显示“-”