EasyUI datagrid 格式化顯示數據

http://blog.163.com/ppy2790@126/blog/static/103242241201512502532379/

設置formatter屬性，是一個函數，格式化函數有3個參數：

The cell formatter function, take three parameters:
value: the field value.
rowData: the row record data.
rowIndex: the row index.

 

一、格式化顯示性別

后台傳過來的json中性別值是0、1，頁面顯示時調用格式化函數：

（js方式）

{

    title : '性別',

    field : 'gender',

    width : 50,

    formatter:function(value,rec){

 return rec.gender==0?'女':'男';

    }

}

 

二、格式化顯示時間

{

title : '回訪日期',

field : 'date',

width : 120,

formatter: function (value, rec, index) {

        if (value == undefined) {

            return "";

        }

        /*json格式時間轉js時間格式*/

       var date = new Date(value);

        

                       return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()+'  '+date.getHours()+":"+date.getMinutes();

     

    }

}, 

 

三、格式化顯示數據樣式

格式化小於20的價格顯示紅色（Html方式）

創建 DataGrid

1. <table id="tt" title="Formatting Columns" class="easyui-datagrid" style="width:550px;height:250px"    
2.         url="data/datagrid_data.json"    
3.         singleSelect="true" iconCls="icon-save">    
4.     <thead>    
5.         <tr>    
6.             <th field="itemid" width="80">Item ID</th>    
7.             <th field="productid" width="80">Product ID</th>    
8.             <th field="listprice" width="80" align="right" formatter="formatPrice">List Price</th>    
9.             <th field="unitcost" width="80" align="right">Unit Cost</th>    
10.             <th field="attr1" width="100">Attribute</th>    
11.             <th field="status" width="60" align="center">Stauts</th>    
12.         </tr>    
13.     </thead>    
14. </table>    

注意 'listprice'字段有一個 'formatter'屬性這個指明格式化函數.

 

 

寫格式化函數

1. function formatPrice(val,row){    
2.     if (val < 20){    
3.         return '<span style="color:red;">('+val+')</span>';    
4.     } else {    
5.         return val;    
6.     }    
7. }