jqGrid专题：格式化数据

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

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

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

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: 'n/j/Y',
            masks : {
                // see http://php.net/manual/en/function.date.php for PHP format used in jqGrid
                // and see http://docs.jquery.com/UI/Datepicker/formatDate
                // and https://github.com/jquery/globalize#dates for alternative formats used frequently
                // one can find on https://github.com/jquery/globalize/tree/master/lib/cultures many
                // information about date, time, numbers and currency formats used in different countries
                // one should just convert the information in PHP format
                ISO8601Long:"Y-m-d H:i:s",
                ISO8601Short:"Y-m-d",
                // short date:
                //    n - Numeric representation of a month, without leading zeros
                //    j - Day of the month without leading zeros
                //    Y - A full numeric representation of a year, 4 digits
                // example: 3/1/2012 which means 1 March 2012
                ShortDate: "n/j/Y", // in jQuery UI Datepicker: "M/d/yyyy"
                // long date:
                //    l - A full textual representation of the day of the week
                //    F - A full textual representation of a month
                //    d - Day of the month, 2 digits with leading zeros
                //    Y - A full numeric representation of a year, 4 digits
                LongDate: "l, F d, Y", // in jQuery UI Datepicker: "dddd, MMMM dd, yyyy"
                // long date with long time:
                //    l - A full textual representation of the day of the week
                //    F - A full textual representation of a month
                //    d - Day of the month, 2 digits with leading zeros
                //    Y - A full numeric representation of a year, 4 digits
                //    g - 12-hour format of an hour without leading zeros
                //    i - Minutes with leading zeros
                //    s - Seconds, with leading zeros
                //    A - Uppercase Ante meridiem and Post meridiem (AM or PM)
                FullDateTime: "l, F d, Y g:i:s A", // in jQuery UI Datepicker: "dddd, MMMM dd, yyyy h:mm:ss tt"
                // month day:
                //    F - A full textual representation of a month
                //    d - Day of the month, 2 digits with leading zeros
                MonthDay: "F d", // in jQuery UI Datepicker: "MMMM dd"
                // short time (without seconds)
                //    g - 12-hour format of an hour without leading zeros
                //    i - Minutes with leading zeros
                //    A - Uppercase Ante meridiem and Post meridiem (AM or PM)
                ShortTime: "g:i A", // in jQuery UI Datepicker: "h:mm tt"
                // long time (with seconds)
                //    g - 12-hour format of an hour without leading zeros
                //    i - Minutes with leading zeros
                //    s - Seconds, with leading zeros
                //    A - Uppercase Ante meridiem and Post meridiem (AM or PM)
                LongTime: "g:i:s A", // in jQuery UI Datepicker: "h:mm:ss tt"
                SortableDateTime: "Y-m-d\\TH:i:s",
                UniversalSortableDateTime: "Y-m-d H:i:sO",
                // month with year
                //    Y - A full numeric representation of a year, 4 digits
                //    F - A full textual representation of a month
                YearMonth: "F, Y" // in jQuery UI Datepicker: "MMMM, yyyy"
            },
            reformatAfterEdit : false,
72　　　　　　　 baseLinkUrl: '',
73　　　　　　　 showAction: '',
74             target: '',
75             checkbox: {disabled: true},
76             idName: 'id'

    }

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

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

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

显示效果:

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

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

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

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

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

 

{ name: 'StuMemo', index: 'StuMemo', width: '300', editable: true, formatter: myFormatter, unformat: myUnformatter } 
　　//注意：自定义格式调用时一定是写方法名，不是方法名字符串

//这里是显示在表格中的数据格式
 function myFormatter(cellvalue, options, rowObject) {
          return "我定义的格式:" + cellvalue;
}
            
//这是我们使用getRowData getCell取得的实际值
function myUnformatter(cellvalue, options, cell) {
         return "去除格式";  
}

 

当然，你可以使用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.