码迷,mamicode.com
首页 > 其他好文 > 详细

EasyUI datagrid 格式化显示数据

时间:2015-09-22 23:41:18      阅读:424      评论:0      收藏:0      [点我收藏+]

标签:

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

EasyUI datagrid 格式化显示数据

标签:

原文地址:http://www.cnblogs.com/zkwarrior/p/4830785.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!