简短日期:formatter:'date',formatoptions: {newformat:'Y-m-d'}
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'
}
...
...
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', ...},
...
],
...
});
...
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: "$ "} } ,
...
],
...
});
...
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:对输出进行格式化 |
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>
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>
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>
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>
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