JqGird 格式化（三）

Jqgrid学习 -------格式化

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}, 

·       ... 

·    ] 

· ... 

· }); 

·   

· functioncurrencyFmatter (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}, 

·       ... 

·    ] 

· ... 

· }); 

·   

· functioncurrencyFmatter (cellvalue, options, rowObject) 

· { 

·   

·    return "$"+cellvalue; 

· } 

· function unformatCurrency (cellvalue, options) 

· { 

·   

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

· } 

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

· <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>

具体使用：

· jQuery("#grid_id").jqGrid({ 

· ... 

·    colModel: [  

·       ...  

·       {name:'price', index:'price', width:60, align:"center", editable: true, formatter:currencyFmatter}, 

·       ... 

·    ] 

· ... 

· })