jqGrid专题：格式化数据

　　jqGrid表格中的数据可以被格式化成需要显示的数据，在使用getRowData和getCell等方法获取数据时也可以去格式化，获取需要的数据，jqGrid的数据格式化可以分为“预定义格式”(predefined formatter)和“自定义格式(custom formatter)”。

 第一部分、Predefined Formatter  预定义格式化

 　　不同的语言包对部分数据有不同的格式要求，所以必须加载语言包 js 文件，预定义的格式才有效，来看下grid.locale-en 英文数据预定义格式：

 1 formatter : {
 2         integer : {thousandsSeparator: ",", defaultValue: '0'},
 3         number : {decimalSeparator:".", thousandsSeparator: ",", decimalPlaces: 2, defaultValue: '0.00'},
 4         currency : {decimalSeparator:".", thousandsSeparator: ",", decimalPlaces: 2, prefix: "", suffix:"", defaultValue: '0.00'},
 5         date : {
 6             dayNames:   [
 7                 "Sun", "Mon", "Tue", "Wed", "Thr", "Fri", "Sat",
 8                 "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"
 9             ],
10             monthNames: [
11                 "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec",
12                 "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"
13             ],
14             AmPm : ["am","pm","AM","PM"],
15             S: function (j) {return j < 11 || j > 13 ? ['st', 'nd', 'rd', 'th'][Math.min((j - 1) % 10, 3)] : 'th';},
16             srcformat: 'Y-m-d',
17             newformat: 'n/j/Y',
18             masks : {
19                 // see http://php.net/manual/en/function.date.php for PHP format used in jqGrid
20                 // and see http://docs.jquery.com/UI/Datepicker/formatDate
21                 // and https://github.com/jquery/globalize#dates for alternative formats used frequently
22                 // one can find on https://github.com/jquery/globalize/tree/master/lib/cultures many
23                 // information about date, time, numbers and currency formats used in different countries
24                 // one should just convert the information in PHP format
25                 ISO8601Long:"Y-m-d H:i:s",
26                 ISO8601Short:"Y-m-d",
27                 // short date:
28                 //    n - Numeric representation of a month, without leading zeros
29                 //    j - Day of the month without leading zeros
30                 //    Y - A full numeric representation of a year, 4 digits
31                 // example: 3/1/2012 which means 1 March 2012
32                 ShortDate: "n/j/Y", // in jQuery UI Datepicker: "M/d/yyyy"
33                 // long date:
34                 //    l - A full textual representation of the day of the week
35                 //    F - A full textual representation of a month
36                 //    d - Day of the month, 2 digits with leading zeros
37                 //    Y - A full numeric representation of a year, 4 digits
38                 LongDate: "l, F d, Y", // in jQuery UI Datepicker: "dddd, MMMM dd, yyyy"
39                 // long date with long time:
40                 //    l - A full textual representation of the day of the week
41                 //    F - A full textual representation of a month
42                 //    d - Day of the month, 2 digits with leading zeros
43                 //    Y - A full numeric representation of a year, 4 digits
44                 //    g - 12-hour format of an hour without leading zeros
45                 //    i - Minutes with leading zeros
46                 //    s - Seconds, with leading zeros
47                 //    A - Uppercase Ante meridiem and Post meridiem (AM or PM)
48                 FullDateTime: "l, F d, Y g:i:s A", // in jQuery UI Datepicker: "dddd, MMMM dd, yyyy h:mm:ss tt"
49                 // month day:
50                 //    F - A full textual representation of a month
51                 //    d - Day of the month, 2 digits with leading zeros
52                 MonthDay: "F d", // in jQuery UI Datepicker: "MMMM dd"
53                 // short time (without seconds)
54                 //    g - 12-hour format of an hour without leading zeros
55                 //    i - Minutes with leading zeros
56                 //    A - Uppercase Ante meridiem and Post meridiem (AM or PM)
57                 ShortTime: "g:i A", // in jQuery UI Datepicker: "h:mm tt"
58                 // long time (with seconds)
59                 //    g - 12-hour format of an hour without leading zeros
60                 //    i - Minutes with leading zeros
61                 //    s - Seconds, with leading zeros
62                 //    A - Uppercase Ante meridiem and Post meridiem (AM or PM)
63                 LongTime: "g:i:s A", // in jQuery UI Datepicker: "h:mm:ss tt"
64                 SortableDateTime: "Y-m-d\\TH:i:s",
65                 UniversalSortableDateTime: "Y-m-d H:i:sO",
66                 // month with year
67                 //    Y - A full numeric representation of a year, 4 digits
68                 //    F - A full textual representation of a month
69                 YearMonth: "F, Y" // in jQuery UI Datepicker: "MMMM, yyyy"
70             },
71             reformatAfterEdit : false,
72　　　　　　　 baseLinkUrl: '',
73　　　　　　　 showAction: '',
74             target: '',
75             checkbox: {disabled: true},
76             idName: 'id'

77     }

来看下采用预定义格式化数据的Demo:

在colModel中修改要格式化数据的列即可，这是表示StuScore需要以指定的货币形式显示的Demo

1 { name: 'StuScore', index: 'StuScore', width: '60', align: 'right', formatter: 'currency', formatoptions: { decimalSeparator: ",", thousandsSeparator: ",", decimalPlaces: 2, prefix: "$" } }

显示效果:

 除了数据的格式化显示以外，还有一些单元格类型的格式化，如：select、checkbox、link等。看实例：

 1 colNames: ['学号','姓名','性别','出生日期','学分','地区','简介'],
 2 colModel: [
 3    { name: 'StuId', index: 'StuId', width: '60', editable: true, edittype: 'checkbox', formatter: 'checkbox', formatoptions: {disabled:false} },
 4    { name: 'StuName', index: 'StuName', width: '100' },
 5    { name: 'StuSex', index: 'StuSex', width: '60', align:'center', editable:true, edittype: 'select', formatter: 'select', editoptions: {value:"　　     Y:男;N:女"} },
 6    { name: 'StuBirthday', index: 'StuBirthday', width: '100', formatter: 'date' },
 7    { name: 'StuScore', index: 'StuScore', width: '60', align: 'right', formatter: 'currency', formatoptions: { decimalSeparator: ",", thousandsS　　　　 eparator: ",", decimalPlaces: 2, prefix: "$" } },
 8    { name: 'StuArea', index: 'StuArea', width: '80', formatter: 'showlink', formatoptions: { baseLinkUrl: 'Default.aspx', addParam: '&action=edi        t', idName: 'myidname' } },
 9    { name: 'StuMemo', index: 'StuMemo', width: '300' }
10]

效果：showlink 链接地址:(http://localhost/Default.aspx?myidname=5&action=edit)   myidname :主键  action:edit 自定义参数

 第二部分、Custom Formatter  自定义格式化

有时候，我们需要自己来定义一列数据的显示格式，jqGrid也可以使用自定义格式化方式，直接看Demo吧：

 

 1 { name: 'StuMemo', index: 'StuMemo', width: '300', editable: true, formatter: myFormatter, unformat: myUnformatter } 
　　//注意：自定义格式调用时一定是写方法名，不是方法名字符串
 2 
 3 //这里是显示在表格中的数据格式
 4  function myFormatter(cellvalue, options, rowObject) {
 5           return "我定义的格式:" + cellvalue;
 6 }
 7             
 8 //这是我们使用getRowData getCell取得的实际值
 9 function myUnformatter(cellvalue, options, cell) {
10          return "去除格式";  
11 }

 

当然，你可以使用jQuery的扩展方法，写到一个地方，以避免多次写格式化方法。这里写jQuery插件的强大的可扩展性很值得借鉴，有空研究下源码，可以把各种格式的验证都加上。

附录：预定义格式参数列表

Type	Options	Description
integer	thousandsSeparator, defaulValue	thousandsSeparator determines the separator for the thousands, defaultValue set the default value if nothing in the data
number	decimalSeparator, thousandsSeparator, decimalPlaces, defaulValue	thousandsSeparator determines the separator for the thousands, decimalSeparator determines the separator for the decimals, decimalPlaces determine how many decimal places we should have for the number, defaultValue set the default value if nothing in the data
currency	decimalSeparator, thousandsSeparator, decimalPlaces, defaulValue, prefix, suffix	The same as number, but we add aditional two options - prefix: text that is inserted before the number and suffix: text that is added after the number
date	srcformat, newformat	srcformat is the source format - i.e. the format of the date that should be converted, newformat is the new output format. The definition of the date format uses the PHP conversions. Also you can use a set of predefined date format - see the mask options in the default date formatting set
email	none	When a mail type is used we directly add a href with mailto: before the e-mail
link	target	The default value of the target options is null. When this options is set, we construct a link with the target property set and the cell value put in the href tag.
showlink	baseLinkUrl, showAction,  addParam,  target, idName	baseLinkUrl is the link.  showAction is an additional value which is added after the baseLinkUrl.  addParam is an additional parameter that can be added after the idName property.  target, if set, is added as an additional attribute.  idName is the first parameter that is added after the showAction. By default, this is id,
checkbox	disabled	The default value for the disabled is true. This option determines if the checkbox can be changed. If set to false, the values in checkbox can be changed
select	none	this is not a real select but a special case. See note below
actions	{  keys: false, editbutton : true,  delbutton : true,  editformbutton: false,  onEdit : null,  onSuccess: null,  afterSave:null,  onError: null,  afterRestore: null, extraparam: {oper:'edit'},  url: null,  delOptions: {},  editOptions : {}  }	This type of formatter is a easy way to add a buttons at certain column for inline editing. We add a two types of actions edit and delete. When the editformbutton parameter is set to true the form editing dialogue appear instead of in-line edit. The option editOptions will be used only for the form editing.

 

 

转载于:https://www.cnblogs.com/ydchw/archive/2013/04/25/3043109.html