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.