jqGrid formatter详解

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

1. 格式化单元格中的值
   formatter主要是设置格式化类型（integer ,email等以及函数来支持自定义类型），
   formatoptions用来设置对应formatter的参数,
   jqGrid中预定义了常见的格式及其options:

   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

      没有参数，会在该cell是email加上 mailto:name@domain.com

   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还支持自定义函数，只需要在formatter:customFmatter设置formatter函数，该函数有三个签名，分别是：cellvalue, options, rowObject
   //cellvalue - 当前cell的值
   //options - 该cell的options设置，包括{rowId, colModel,pos,gid}
   //rowObject - 当前cell所在row的值，是一个对象

   function customFmatter(cellvalue, options, rowObject){}  
   

   如要在某一个单元格里加入span标签，实现下图效果：
   
   首先要在colModel对应列中添加formatter属性，后orderTypeFomatter为自定义方法名。

   colModel: [{
     name: "type",
     index: "type",
     editable: false,
     width: 80,
     sortable: false,
     align: 'center',
     formatter: orderTypeFormatter
   }],
   

   定义orderTypeFomatter方法

   function orderTypeFormatter(cellvalue, options, rowObject){
       if(rowObject.type ){
           return '<span style="padding:2px 5px; background: #21b9bb; color: #fff; border-radius: 2px; margin-right: 4px;">'+ rowObject.type +'</span>'
       }
   }