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