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