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: "$ "} } ,
   ...
   ],
...
});

这个设置会覆盖语言包中的设置。

预先设置的格式化类

类型	可选值	说明
integer	thousandsSeparator,defaulValue	thousandsSeparator：对数字使用千分位分隔符；defaulValue保持原始值不改变
number	decimalSeparator,thousandsSeparator,decimalPlaces,defaulValue	对数据进行不同的分隔
currency	decimalSeparator,thousandsSeparator,decimalPlaces,defaulValue,prefix,suffix	同number，但是要在附加prefix跟suffix
date	srcformat,newformat	srcformat：对输入数值进行格式化；newformat：对输出进行格式化
email	none	如果是email类型则会附加 mailto:
link	target	默认的targer是null，如果设置此值就会添加一个超链接
showlink	baseLinkUrl,showAction,addParam,target,idName	baseLinkUrl：原始链接；showAction：会在链接之后附加一些信息；addParam：会在idName后附加额外参数；target：附加属性；idName：附加在showAction后的第一个参数，默认为id
checkbox	disabled	默认禁用，是否可以被修改
select	none

select类型的格式化实例：
原始数据

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

使用格式化后

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

结果是，表格的数据值为1或者2但是现实的是One或者Two。

对超链接使用select类型的格式化：

<script>
jQuery("#grid_id").jqGrid({
...
   colModel: [ {name:'myname', edittype:'select', formatter:'select', formatoptions:{baseLinkUrl:'someurl.php', addParam: '&action=edit'}, ...} 
      ... 
   ]
...
});
</script>

输出结果：

http://localhost/someurl.php?id=123&action=edit

如果想改变id值则

<script>
jQuery("#grid_id").jqGrid({
...
   colModel: [ {name:'myname', edittype:'select', formatter:'select', formatoptions:{baseLinkUrl:'someurl.php', addParam: '&action=edit', idName:'myid'}, ...} 
      ... 
   ]
...
});
</script>

输出为

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