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。 创建通用的格式化函数
<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}, ... ] ... })