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" />';
  } 
}