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. }