jqGrid预定义格式化类型

　　格式化程序支持在表单，行，单元格编辑中将内容以自定义想要的格式来显示。格式化程序有２种形式，预定义的和自定义的，这节我们介绍的为预定义的格式化程序。

jqGrid模块需求

要使用格式化特性，需要在下载页面勾选 Formatter module后再下载jqGrid，下载地址：http://www.trirand.com/blog/?page_id=6。

语言选项

格式化选项语言在语言文件中定义。例如，grid.locale-xx (xx为2个字符代表使用的语言，如en对应english，目前不支持中文语言配置)。

所以再jqGrid核心js加载后，也要将格式化程序文件加载进来（对应的js语言文件），不同的格式化函数选项有不同的语言文件。下面为英语版本的语言文件

jQuery.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',
       parseRe: /[Tt\\\/:_;.,\t\s-]/,
       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', ...},
   ...
   ],
...
});

　　上面的示例将用number格式化myname列的内容，例如原数据为1234.1，那么显示在grid中的内容被格式化为1 234.10。

列具体选项

可以为特别的列指定格式化函数选项，将会覆盖语言文件中的默认值，是用colModel中的formatoptions选项来定义

jQuery("#grid_id").jqGrid({
//...
   colModel : [
   //...
      {name:'myname', ... formatter:'currency', formatoptions:{decimalSeparator:",", thousandsSeparator: ",", decimalPlaces: 2, prefix: "$ "} } ,
   //...
   ],
//...
});

formatoptions配置的项依据formattype来确定

预定义的格式化类型

下表列出了jqGrid中的预定义格式化类型

所有预定义类型和编辑模式兼容，就是说数字，链接和email等需要转换，才能使他们被正确编辑

类型 选项（默认值参考语言选项） 描述
integer thousandsSeparator,
defaulValue
  1. thousandsSeparator：指定千位分隔符号
  2. defaultValue ：指定数据为空时默认显示的值
number decimalSeparator,
thousandsSeparator,
decimalPlaces,
defaulValue
  1. decimalSeparator ：指定小数分隔符
  2. thousandsSeparator：指定千位分隔符号
  3. decimalPlaces：指定需要显示多少个小数位
  4. defaultValue ：指定数据为空时默认显示的值
currency decimalSeparator,
thousandsSeparator,
decimalPlaces,
defaulValue,
prefix,
suffix		 和number一样，知识多了2个选项
  1. prefix：数字前面显示的文本内容
  2. suffix：数字后显示的文本内容
date srcformat,
newformat,
parseRe
  1. srcformat ：源格式，应该被转换成的日期格式【就是将数据源中的原始格式转为这个定义的格式】
  2. newformat： 输出格式，使用PHP的日期格式化参数，也可以使用预定义好的日期格式，查看默认值参考语言选项配置中的date-》masks配置。
  3. parseRe：一个解析日期字符串的表达式
email none 设置email将会给内容添加链接，链接地址为mailto:emai内容
link target  target 默认值为null。设置为这个，会构造一个连接，添加target属性，单元格内容作为href属性值
showlink baseLinkUrl,
showAction,
addParam,
target,
idName
  1. baseLinkUrl：链接地址
  2. showAction：添加到 baseLinkUrl后的附加值
  3. addParam：添加到idName属性后的附加参数
  4. target：链接在哪个窗口打开，给链接添加target属性
  5. idName：showAction后第一个被添加的参数，默认值为“id"
checkbox disabled disabled默认值为true。控制checkbox是否能被改变。设置为false，可以膝盖checkbox的值。
select none 不是真实的select，仅为一个特例，看下面的说明
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 : {}
}		 在行编辑模式这个类型的格式化函数很容易给指定的列添加一个按钮。
有2中类型的动作，编辑和删除。
editformbutton设置为true 将医用表单编辑对话框，取代行编辑模式
editOptions仅用于配置表单编辑模式。

"Select"格式化函数

select类型不是真实的select。这个用于使用某些编辑模式下，设置了edittype:'select'的情况。这个版本之前grid显示select的值，而不是键（Before this release we pass the value of the select in grid and not the key），例如:

jQuery("#grid_id").jqGrid({
...
   colModel : [ {name:'myname', edittype:'select', editoptions:{value:"1:One;2:Two"}} ... ],
...
});
这个情况下，grid的数据需要包含"One"或者"Two"，设在myname这个列里面。配置formatter为select的代码如下
jQuery("#grid_id").jqGrid({
...
   colModel : [ {name:'myname', edittype:'select', formatter:'select', editoptions:{value:"1:One;2:Two"}} ... ]
...
});

数据包含键名称(“1” or “2”)，但是值 (“One”, or “Two”) 将会显示在grid里面。

showlink 示例

看下面的代码

jQuery("#grid_id").jqGrid({
...
   colModel: [ {name:'myname', formatter:'showlink', formatoptions:{baseLinkUrl:'someurl.php', addParam: '&action=edit'}, ...} 
      ... 
   ]
...
});

上面将会得到下面的输出

http://localhost/someurl.php?id=123&action=edit

如果你想将生成的url中id键名称修改为myid，可以这样设置

jQuery("#grid_id").jqGrid({
...
   colModel: [ {name:'myname', formatter:'showlink', formatoptions:{baseLinkUrl:'someurl.php', addParam: '&action=edit', idName:'myid'}, ...} 
      ... 
   ]
...
});



	上面将会得到下面的输出



	
http://localhost/someurl.php?myid=123&action=edit





	但是我不知道123从哪里来的（But i don't know where from is value'123' ; ）（译者注：凭感觉是此行数据对应的列的数据源中的值，或者此数据行的id。）



	来源：http://www.trirand.com/jqgridwiki/doku.php?id=wiki:predefined_formatter



	 


加支付宝好友偷能量挖...

	


原创文章，转载请注明出处：jqGrid预定义格式化类型




评论(0)Web开发网


阅读(2831)喜欢(0)jqGrid中文API