jquery grid 自定义格式化程序

你可以定义自己的格式化程序为特定列。 这通常是一个函数。 当格式化程序选项中设置这个不应该包含在引号而不是进入()——显示的函数的名称。 例如,

<script> jQuery("#grid_id").jqGrid({ ... colModel: [ ... {name:'price', index:'price', width:60, align:"center", editable: true, formatter:currencyFmatter}, ... ] ... });
  function currencyFmatter (cellvalue, options, rowObject) { // do something here return new_format_value } </script>
定义和参数

自定义格式化程序传递以下参数:

function myformatter ( cellvalue, options, rowObject ) { // format the cellvalue to new format return new_formated_cellvalue; }
注意返回的函数。 这个函数应该返回一个值,以正常工作。
cellvalue——是要格式化的值
选择——是一个对象包含以下元素
选择:{ rowId:消除colModel:厘米} rowId——在哪里行colModel对象的id的属性这一列无氧colModel jqGrid的数组
rowObject——是一个行数据表示格式确定的数据类型选择。 如果我们有数据类型:xml / xmlstring - rowObject xml节点,提供根据xmlReader如果我们有数据类型的规则:json / jsonstring - rowObject数组,根据jsonReader规则提供


恢复格式化

所 预定义的格式化程序 章所有预定义的类型兼容编辑模块。 这意味着数据、链接、电子邮件、转换等,这样他们就可以被编辑正确。 同样的方法(如getRowData和getCell)获取数据,使用这个恢复格式化为了得到原始值。 问题是:如果我们使用一个自定义格式化程序功能和想回原来的值如果我们使用编辑或方法getRowData getCell ?

答案是:您可以使用您自己的自定义恢复格式化功能。 这个函数可以用于colModel

显示图片和编辑图片的路径:

<script> 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'); } </script>
自定义恢复格式化函数传递以下参数:

cellvalue——是要恢复格式化的值(纯文本)。
选择——是一个对象包含以下元素
选择:{ rowId:消除colModel:厘米} rowId——在哪里行colModel对象的id的属性这一列无氧colModel jqGrid的数组
cellobject——是一个细胞jQuery对象。 这个对象可以用来获得不同的东西从细胞元素——通过jQuery示例(cellobject). html()可以用来获取html内容而不是文本。
例子

下面我们将模拟部分货币格式化程序使用一个自定义的格式和恢复格式化功能

<script> jQuery("#grid_id").jqGrid({ ... colModel: [ ... {name:'price', index:'price', width:60, align:"center", editable: true, formatter:currencyFmatter, unformat:unformatCurrency}, ... ] ... });
  function currencyFmatter (cellvalue, options, rowObject) {   return "$"+cellvalue; } function unformatCurrency (cellvalue, options) {   return cellvalue.replace("$",""); }   </script>
如果该值在网格中插入或更新是123.00,它将显示在网格中:123.00美元; 当我们使用getRowData getCell方法或任何编辑模块这一列的值将是123.00

创造共同的格式化程序功能

有时,你可能想要使用您的自定义格式/恢复格式化函数在很多地方的代码。 这当然可以定义上面的函数作为示例。 我们设计了格式化程序模块,这样就可以很容易扩展的开发人员,所以简化开发过程。 下面我们将讨论如何使你自己的可见的所有代码格式化程序功能。 

加载jqGrid Java脚本文件后您可以定义在脚本标记以下(或简单的创建自己的文件,包括头部部分)

<script type="text/javascript"> jQuery.extend($.fn.fmatter , { currencyFmatter : function(cellvalue, options, rowdata) { return "$"+cellvalue; } });
jQuery.extend($.fn.fmatter.currencyFmatter , { unformat : function(cellvalue, options) { return cellvalue.replace("$",""); } });
  </script>
然后在代码中你只需要做的是:

<script> jQuery("#grid_id").jqGrid({ ... colModel: [ ... {name:'price', index:'price', width:60, align:"center", editable: true, formatter:'currencyFmatter'}, ... ] ... });
请注意,在这种情况下,您不需要指定恢复格式化功能。