Easyui Datagrid formatter实际应用汇总

1. 前言
   最近一段时间做的项目前端使用Easyui,Datagird是我们最常使用的一个组件，在我们的实际应用中数据列有很多类型如对象、日期、浮点数字、是否启用、性别（男女），以及某一列根据数据的不同显示不同的样式，还有列需要显示图片等，这些功能都可以通过Easyui Datagrid formatter来实现。

2. 详细说明
   1、日期

    //充值日期    private Date createTime;

前端代码

customerConsumeDataGrid = $('#customerConsumeDataGrid').datagrid({            fit : true,            fitColumns : false,            border : false,            idField : 'id',            striped : true,            remoteSort: false,            pageSize : 20,            pageList : [ 20, 30, 50, 100],            singleSelect:true,            checkOnSelect : true,            selectOnCheck : true,            nowrap : true,            showPageList:false,            columns : [ [  {                field : 'createTime',                title : '充值日期',                width : 150,                align:'center',                formatter: function (value, rowData, rowIndex) {                    if (value == null || value == '') {                          return '';                      }                      var dt;                      if (value instanceof Date) {                          dt = value;                      } else {                          dt = new Date(value);                      }                  return dt.format("yyyy-MM-dd");                //return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate();                }            }]],            toolbar : '#consumeToolbar',            onLoadSuccess : function() {                                                $(this).datagrid('clearChecked');                $(this).datagrid('clearSelections');            }        });

 2、性别    //性别    private Short gender;    前端代码

{    field : 'gender',    title : '性别',    width : 60,    align:'center',    sortable : false,    formatter : function(value, row, index) {        if (value == 0) {            return '<font color="red">女</font>';        }else {            return '<font color="blue">男</font>';        }    }}

3、是否启用
//是否启用
private Short enable;
前端代码：

{  field : 'enable',  title : '启用标识',  width : 70,  align:'center',  formatter: function (value, rowData, rowIndex) {        if(value==1){            return "<input type=\"checkbox\" name=\"vld\" value=\""+value+"\" checked=\"checked\" disabled=\"true\">";        }else{            return "<input type=\"checkbox\" disabled=\"true\">";        }  }}             

4、显示星级小图片
//星级
private Short Start;
前端代码：

{   field: 'star',   title: '星级',   align: 'center',   width: 120,   hidden:singleSelected,   formatter : function(value, row, index) {       var icon = "<span class='icon-hamburg-star'                         style='display: inline-block;                        margin-top:-1px'/>";       var res = "";       for (i = 0; i < value; i++) {            res += icon;       }       return res;   }}   

 5、对象属性    //关联员工    private Employee saler;    前端代码：

{        field : 'saler',        title : '关联员工',        width : 120,        align:'center',        formatter:function(value,row,index){             if(row.saler == null){                 return "";             }             return row.saler.name;        }}

6、浮点数字
//市场价
private BigDecimal price;
前端代码：

{    field : 'marketPrice',    title : '市场价',    width : 70,    align:'center',    formatter:function(value,row,index){        return value.toFixed(2);    }}

7、显法不同颜色

{  field : 'colorVal',  title : '未达成目标的颜色',  width : 240,  align:'center',  formatter : function(value, row, index) {        return  '<input type="text" value="'+value+'"         background-color:'+value+'" class="easyui-textbox" />';  } }