jqGrid中的formatter，表格中值的格式化

jqGrid中對列表cell數次那個格式話設置主要通過colModel中formatter,formatoptions來設置。

基本用法：

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 //新格式

email

沒有參數，會在該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配合使用

下面是一個使用的例子:

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"}]

 

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聲明如下

function customFmatter(cellvalue, options, rowObject){
    console.log(cellvalue);
    console.log(options);
    console.log(rowObject);
    return "["+cellvalue+"]";
};

 在頁面顯示的效果如下：

當然還得支持自定義formatter函數，只需要在formatter:customFmatter設置formatter函數，該函數有三個簽名

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函數，這裏見官網的例子：

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 '<img src="'+cellvalue+'" />';
}
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