jqGrid中的formatter，表格中值的格式化
jqGrid中对列表cell数次那个格式话设置主要通过colModel中formatter,formatoptions来设置。
基本用法：
Js代码
jQuery("#jqGrid_id").jqGrid({
...
colModel: [
...
{name:'price', index:'price', formatter:'integer', formatoptions:{thousandsSeparator: ','}},
...
]
...
});
formatter主要是设置格式化类型（integer ,email等以及函数来支持自定义类型），
formatoptions用来设置对应formatter的参数,
jqGrid中预定义了常见的格式及其options:
integer
thousandSeparator://千分位分隔符，
defaulValue
number
decimalSeparator,//小数分隔符，如"."
tousandsSwparator,//千分位分隔符，如","
decimalPlaces,//小数保留位数
defaulValue
currency
decimalSeparator,//小数分隔符，如"."
thousandsSeparator,//千分位分隔符，如","
decimalPlaces,//小数保留位数
defaulValue,
prefix//前缀，如加上"$"
suffix//后缀
date
srcformat,//source的本来格式
newformat//新格式
没有参数，会在该cell是email加上： mailto:[email protected]
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
checkbox
disabled //true/false 默认为true此时的checkbox不能编辑，如当前cell的值是1、0会将1选中
select
设置下拉框，没有参数，需要和colModel里的editoptions配合使用
下面是一个使用的例子:
Java代码
var datas = [
{"id":1, "name":"name1", "price":123.1, "email":"[email protected]", "amount":1123423, "gender":"1", "type":"0"},
{"id":2, "name":"name2", "price":1452.2, "email":"[email protected]", "amount":12212321, "gender":"1", "type":"1"},
{"id":3, "name":"name3", "price":125454, "email":"[email protected]", "amount":2345234, "gender":"0", "type":"0"},
{"id":4, "name":"name4", "price":23232.4, "email":"[email protected]", "amount":2345234, "gender":"1", "type":"2"}]
Js代码
colModel:[
{name:'id', index:'id', formatter: customFmatter},
{name:'name', index:'name', formatter: "showlink", formatoptions:{baseLinkUrl:"save.action",idName: "id", addParam:"&name=123"}},
{name:'price', index:'price', formatter: "currency", formatoptions: {thousandsSeparator:",",decimalSeparator:".", prefix:"$"}},
{name:'email', index:'email', formatter: "email"},
{name:'amount', index:'amount', formatter: "number", formatoptions: {thousandsSeparator:",", defaulValue:"",decimalPlaces:3}},
{name:'gender', index:'gender', formatter: "checkbox",formatoptions:{disabled:false}},
{name:'type', index:'type', formatter: "select", editoptions:{value:"0:无效;1:正常;2:未知"}}
],
其中customFmatter声明如下
Js代码
function customFmatter(cellvalue, options, rowObject){
console.log(cellvalue);
console.log(options);
console.log(rowObject);
return "["+cellvalue+"]";
};
在页面显示的效果如下：
当然还得支持自定义formatter函数，只需要在formatter:customFmatter设置formatter函数，该函数有三个签名
Js代码
function customFmatter(cellvalue, options, rowObject){
}
//cellvalue - 当前cell的值
//options - 该cell的options设置，包括{rowId, colModel,pos,gid}
//rowObject - 当前cell所在row的值，如{ id=1, name="name1", price=123.1, ...}
当然对于自定义formatter，在修改时需要获取原来的值，这里就提供了unformat函数，这里见官网的例子：
Js代码
jQuery("#grid_id").jqGrid({
...
colModel: [
...
{name:'price', index:'price', width:60, align:"center", editable: true, formatter:imageFormat, unformat:imageUnFormat},
...
]
...
});
function imageFormat( cellvalue, options, rowObject ){
return '
';
}
function imageUnFormat( cellvalue, options, cell){
return $('img', cell).attr('src');
}
附上官网DOC：
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:custom_formatter
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:predefined_formatter