09jqGrid - 数据格式化

jqGrid的格式化是定义在语言包中

 $jgrid = {  
	...  
   formatter : {  

     integer : {thousandsSeparator: " ", defaultValue: '0'},  
     number : {decimalSeparator:".", thousandsSeparator: " ", decimalPlaces: 2, defaultValue: '0.00'},  
     currency : {decimalSeparator:".", thousandsSeparator: " ", decimalPlaces: 2, prefix: "", suffix:"", defaultValue: '0.00'},  

     date : {  
       dayNames: [  
         "Sun", "Mon", "Tue", "Wed", "Thr", "Fri", "Sat",  
         "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"  
       ],  

       monthNames: [  
         "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec",  
         "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"  
       ],  

       AmPm : ["am","pm","AM","PM"],  
       S: function (j) {return j < 11 || j > 13 ? ['st', 'nd', 'rd', 'th'][Math.min((j - 1) % 10, 3)] : 'th'},  
       srcformat: 'Y-m-d',  
       newformat: 'd/m/Y',  
       masks : {  

         ISO8601Long:"Y-m-d H:i:s",  
         ISO8601Short:"Y-m-d",  
         ShortDate: "n/j/Y",  
         LongDate: "l, F d, Y",  
         FullDateTime: "l, F d, Y g:i:s A",  
         MonthDay: "F d",  
         ShortTime: "g:i A",  
         LongTime: "g:i:s A",  
         SortableDateTime: "Y-m-d\\TH:i:s",  
         UniversalSortableDateTime: "Y-m-d H:i:sO",  
         YearMonth: "F, Y"  
       },  

       reformatAfterEdit : false  

     },  

     baseLinkUrl: '',  
     showAction: '',  
     target: '',  
     checkbox : {disabled:true},  
     idName : 'id'  

   }  

...

通过colModel中的formatoptions参数修改

jQuery("#grid_id").jqGrid({  

...  

   colModel : [  
   ...  
      {name:'myname', ... formatter:'number', ...},  
   ...  
   ],  
...  
});

此实例是对名为“myname”的列进行格式化，格式化类是“number”，假如初始值为“1234.1”则格式化后显示为“1 234.10” 。

如果给某列进行格式化：

jQuery("#grid_id").jqGrid({  
...  
   colModel : [  
   ...  
      {name:'myname', ... formatter:'currency', formatoptions:{decimalSeparator:",", thousandsSeparator: ",", decimalPlaces: 2, prefix: "$ "} } ,  
   ...  
   ],  
...  
});

这个设置会覆盖语言包中的设置。 select类型的格式化实例： 原始数据

jQuery("#grid_id").jqGrid({  
...  
   colModel : [ {name:'myname', edittype:'select', editoptions:{value:"1:One;2:Two"}} ... ],  
...  
})；	

使用格式化后

jQuery("#grid_id").jqGrid({  
...  
   colModel : [ {name:'myname', edittype:'select', formatter:'select', editoptions:{value:"1:One;2:Two"}} ... ]  
...  
});

结果是，表格的数据值为1或者2但是现实的是One或者Two。 对超链接使用select类型的格式化：

jQuery("#grid_id").jqGrid({  

...  
   colModel: [ {name:'myname', edittype:'select', formatter:'select', formatoptions:{baseLinkUrl:'someurl.php', addParam: '&action=edit'}, ...}   
      ...   
   ]  
...  
});

得到http://localhost/someurl.php?id=123&action=edit 如果想改变id值则

jQuery("#grid_id").jqGrid({  

...  
   colModel: [ {name:'myname', edittype:'select', formatter:'select', formatoptions:{baseLinkUrl:'someurl.php', addParam: '&action=edit', idName:'myid'}, ...}   
      ...   
   ]  
...  
});

得到http://localhost/someurl.php?myid=123&action=edit

jqGrid 自定义格式化

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  

}

• cellvalue：要被格式化的值
• options：对数据进行格式化时的参数设置，格式为： { rowId: rid, colModel: cm}
• rowObject：行数据

数据的反格式化跟格式化用法相似.

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("$","");  
}  

表格中数据实际值为123.00，但是显示的是$123.00; 我们使用getRowData ，getCell 方法取得的值是123.00。 创建通用的格式化函数

  

jQuery.extend($.fn.fmatter , {  

    currencyFmatter : function(cellvalue, options, rowdata) {  

    return "$"+cellvalue;  

}  

});  

jQuery.extend($.fn.fmatter.currencyFmatter , {  

    unformat : function(cellvalue, options) {  

    return cellvalue.replace("$","");  

}  

});  

具体使用：

jQuery("#grid_id").jqGrid({  
...  
   colModel: [   
      ...   
      {name:'price', index:'price', width:60, align:"center", editable: true, formatter:currencyFmatter},  
      ...  
   ]  
...  
})