Easyui Datagrid formatter实际应用汇总

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

详细说明 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" />'; } }