jqgrid 单元格数据格式化 formatter formatoptions

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
  thousandsSeparator： //千分位分隔符,
  defaulValue
• number
  decimalSeparator, //小数分隔符，如”.”
  thousandsSeparator, //千分位分隔符，如”,”
  decimalPlaces, //小数保留位数
  defaulValue
• currency
  decimalSeparator, //小数分隔符，如”.”
  thousandsSeparator, //千分位分隔符，如”,”
  decimalPlaces, //小数保留位数
  defaulValue,
  prefix //前缀，如加上”$”
  suffix//后缀
• date
  srcformat, //source的本来格式
  newformat //新格式
• email
  没有参数，会在该cell是email加上： mailto:name@domain.com
• 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配合使用

还支持自定义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, ...}

实际案例:

<!--页面代码-->
<th id="lastLog"  align="center" formatter="iconFormat" formatoptions="{baseLinkUrl:'monitor/terminal-monitor!getTerminalLogPage.action', 'css':'fa fa-download fa-lg red', 'title':'download'}" >
    <s:text name="grid.column.title.terminal.monitor.hasLog" />
</th>

//js代码
    $.fn.fmatter.iconFormat = function(cellvalue, options, rowObject) {
        var opts = options.colModel.formatoptions;
        var a = "<i tmsType='tmsIcon'";
        if (opts.css) {
            a = a + " class='" + opts.css + "'"
        }
        if (opts.title) {
            a = a + " title=" + opts.title
        } else {
            a = a + " title=\"" + cellvalue + "\""
        }
        if (opts.baseLinkUrl) {
            a = a + " action=" + opts.baseLinkUrl + "?id=" + rowObject.id ;
            if("id"!=options.colModel.name){
                a = a+ "&" + options.colModel.name + "=" + escape(encodeURIComponent(cellvalue));
            }
        }
        a = a + ">";
        if (opts.textValue) {
            a = a + opts.textValue
        }
        a = a + "</i>";
        return a
    }

---

$.fn是指jquery的命名空间，加上fn上的方法及属性，会对jquery实例每一个有效。
如扩展$.fn.abc(),即$.fn.abc()是对jquery扩展了一个abc方法,那么后面你的每一个jquery实例都可以引用这个方法了.
那么你可以这样子：$(“#div”).abc();

jQuery为开发插件提拱了两个方法，分别是：

jQuery.extend(object);为扩展jQuery类本身.为类添加新的方法。
jQuery.fn.extend(object);给jQuery对象添加方法。
ps.项目中引用jquery grid，已经添加了jquery对象的fmatter方法，$.fn.fmatter.iconFormat相当于再次添加了iconFormat方法，所以jqgrid可以使用 formatter=”iconFormat” formatoptions=”…”来进行自定义样式。