学步园

jqGrid中对列表cell数次那个格式话设置主要通过colModel中formatter,formatoptions来设置。

基本用法：

Js代码  

1. jQuery("#jqGrid_id").jqGrid({  
2. ...  
3.    colModel: [   
4.       ...   
5.       {name:'price', index:'price',  formatter:'integer', formatoptions:{thousandsSeparator: ','}},  
6.       ...  
7.    ]  
8. ...  
9. }); 
   

formatter主要是设置格式化类型（integer ,email等以及函数来支持自定义类型），formatoptions用来设置对应formatter的参数,

jqGrid中预定义了常见的格式及其options:

integer

        thousandSeparator://千分位分隔符，

        defaulValue

number

        decimalSeparator,//小数分隔符，如"."

         tousandsSwparator,//千分位分隔符，如","

         decimalPlaces,//小数保留位数

       defaulValue

currency

Java代码  

1. var datas = [  
2.                   {"id":1,  "name":"name1",  "price":123.1,     "email":"abc@163.com",  "amount":1123423,   "gender":"1", "type":"0"},  
3.                   {"id":2,  "name":"name2",  "price":1452.2,    "email":"abc@163.com",  "amount":12212321,  "gender":"1", "type":"1"},  
4.                   {"id":3,  "name":"name3",  "price":125454,    "email":"abc@163.com",  "amount":2345234,   "gender":"0", "type":"0"},  
5.                   {"id":4,  "name":"name4",  "price":23232.4,   "email":"abc@163.com",  "amount":2345234,   "gender":"1", "type":"2"}]  

 

Js代码  

1. colModel:[  
2.     {name:'id',     index:'id',     formatter:  customFmatter},  
3.     {name:'name',   index:'name',   formatter: "showlink", formatoptions:{baseLinkUrl:"save.action",idName: "id", addParam:"&name=123"}},  
4.     {name:'price',  index:'price',  formatter: "currency", formatoptions: {thousandsSeparator:",",decimalSeparator:".", prefix:"$"}},  
5.     {name:'email',  index:'email',  formatter: "email"},  
6.     {name:'amount', index:'amount', formatter: "number", formatoptions: {thousandsSeparator:",", defaulValue:"",decimalPlaces:3}},        
7.     {name:'gender', index:'gender', formatter: "checkbox",formatoptions:{disabled:false}},  
8.     {name:'type',   index:'type',   formatter: "select", editoptions:{value:"0:无效;1:正常;2:未知"}}  
9. ],  

Js代码  

1. function customFmatter(cellvalue, options, rowObject){  
2.     console.log(cellvalue);  
3.     console.log(options);  
4.     console.log(rowObject);  
5.     return "["+cellvalue+"]";  
6. };  

Js代码  

1. function customFmatter(cellvalue, options, rowObject){  
2.       
3. }  
4. //cellvalue - 当前cell的值  
5. //options - 该cell的options设置，包括{rowId, colModel,pos,gid}  
6. //rowObject - 当前cell所在row的值，如{ id=1, name="name1", price=123.1, ...}  

Js代码  

1. jQuery("#grid_id").jqGrid({  
2. ...  
3.    colModel: [   
4.       ...   
5.       {name:'price', index:'price', width:60, align:"center", editable: true, formatter:imageFormat, unformat:imageUnFormat},  
6.       ...  
7.    ]  
8. ...  
9. });  
10.    
11. function imageFormat( cellvalue, options, rowObject ){  
12.     return '<img src="'+cellvalue+'" />';  
13. }  
14. function imageUnFormat( cellvalue, options, cell){  
15.     return $('img', cell).attr('src');  
16. }