标签：jQuery ... 09jqGrid 格式化 jqGrid 数据 id colModel

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

jqGrid 自定义格式化

jQuery("#grid_id").jqGrid({  
...  
   colModel: [   
      ...   
      {name:'price', index:'price', width:60, align:"center", editable: true, formatter:currencyFmatter},  
      ...  
   ]  
...  
});  

function currencyFmatter (cellvalue, options, rowObject)  

{  
   // do something here  
   return new_format_value  

}

• cellvalue：要被格式化的值
• options：对数据进行格式化时的参数设置，格式为： { rowId: rid, colModel: cm}
• rowObject：行数据

数据的反格式化跟格式化用法相似.

jQuery("#grid_id").jqGrid({  
...  
   colModel: [   
      ...   
      {name:'price', index:'price', width:60, align:"center", editable: true, formatter:currencyFmatter, unformat:unformatCurrency},  
      ...  
   ]  
...  
});  
function currencyFmatter (cellvalue, options, rowObject)  
{  
   return "$"+cellvalue;  
}  
function  unformatCurrency (cellvalue, options)  
{  
   return cellvalue.replace("$","");  
}  

表格中数据实际值为123.00，但是显示的是$123.00; 我们使用getRowData ，getCell 方法取得的值是123.00。 创建通用的格式化函数

<script type="text/javascript">  

jQuery.extend($.fn.fmatter , {  

    currencyFmatter : function(cellvalue, options, rowdata) {  

    return "$"+cellvalue;  

}  

});  

jQuery.extend($.fn.fmatter.currencyFmatter , {  

    unformat : function(cellvalue, options) {  

    return cellvalue.replace("$","");  

}  

});  

</script>

具体使用：

jQuery("#grid_id").jqGrid({  
...  
   colModel: [   
      ...   
      {name:'price', index:'price', width:60, align:"center", editable: true, formatter:currencyFmatter},  
      ...  
   ]  
...  
})

标签：jQuery,...,09jqGrid,格式化,jqGrid,数据,id,colModel
来源： https://blog.51cto.com/u_15294985/3006328

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。