EasyUI
中，很多时候都要对
datagrid
的样式进行修改，例如大于
24
岁的行背景设置为红色；性别为男的列，字体设置为绿色；当行过长时，鼠标移动到行上时，显示该行全部内容；格式化显示时间等等需求。下面就来讲解一下，
EasyUI
中，怎么来实现上面的效果。
1、使用
formatter
列属性来对
datagrid
样式进行修改
1.1
对性别来进行控制
场景：
在程序中，很可能后台存放性别的，并不是“男”和“女”，而是
0
和
1
，那么在前端怎么来进行转换了，其实转换起来很容易，代码如下：
formatter:function(value , record , index){
if(value == 0){
return '<span style=color:red; >男</span>' ;
} else if( value == 1){
return '<span style=color:green; >女</span>' ;
}
}
formatter
是一个函数，该函数有
3
个参数，分别为当前列的值，当前整行的记录和当前行的索引。打印到控制台上结果如下：
通过这几个参数，可以实现很多效果。上面代码中，实现的效果如下：
1.2
实现对列信息的显示
场景：
在我们的开发中，经常会遇到下面的情况，某一列长度是固定的，但是该列的内容却很长，当前的单元格根本就显示不完所有的内容，这个时候，需要对这一列的内容进行一个提示功能，例如，当鼠标移上去的时候，就显示该列的完整内容，代码如下：
formatter:function(value,rowData,rowIndex){
return '<span title="'+value+'">'+value+'</span>';
}
这个效果利用了
span
标签的
title
属性，当鼠标移到列上去的时候，就会显示
title
的内容。如果用户不需要使用这种方式，而是需要全部显示完了？后面会介绍这种需求的实现方式。
1.3
实现对敏感信息的隐藏
场景：
在开发中，经常需要对敏感的信息进行隐藏，例如密码等，这种效果也可以利用
formatter
来实现，代码如下：
formatter:function(value,rowData,rowIndex){
return '******';
}效果图如上。
1.4
实现在单元格中增加新的操作
场景：
在开发中，有的需求希望增删改查操作放在
toolbar
上，如下图所示：
有的需求则希望邮件点击的时候，以弹出菜单的方式来展现，如下图所示：
而有的需求，则希望将这些操作放在该行末尾的一列中来展现给客户，如下图所示：
那这种效果怎么来实现了，代码如下：
formatter:function(value,rowData,rowIndex){
return '<button οnclick="getRowDataFromIndex('+rowIndex+');">编辑 </button>|<button οnclick="getRowDataFromIndex('+rowIndex+');">删除 </button>';
}
以上就是使用
formatter
来实现的常用的效果，当然还可以利用
formatter
来实现很多效果，例如时间日期格式的转换等等。我们只需要记住
formatter
返回的是一串字符串。
1、使用rowStyler来实现对
datagrid
行样式进行修改
2.1
在开发中，经常需要对某些特殊的数据给予特殊的处理，例如分数高于
95
分的，年龄大于
24
岁的等等，这个时候，我们就需要使用
rowStyle
来实现类似的效果了。
场景：
对列表中年龄大于
24
岁的行，背景显示为灰色，其余行的背景显示为黄色。
代码如下：
rowStyler:function(rowIndex,rowData){
if(rowData.age > 24){
return 'background:gray';
}else{
return 'background:yellow';
}
}
rowStyler
是一个函数，该函数有两个参数，分别是行索引和当前行的值。该函数返回的也是一个字符串。使用这个函数可以对行的样式进行精细的控制。
注意：
rowStyler
是
datagrid
的属性，而不是列的属性，如果放在列属性中，是不会起任何作用的。
效果如如下：
1、使用styler来实现对
datagrid
列样式进行修改
3.1
对某些特殊列的特殊数据进行特殊的显示
场景：
在一个
datagrid
中，需要对部门为
java
的所有列进行特殊显示
代码如下：
styler:function(value,rowData,rowIndex){
if(value == "java"){
return 'color:blue';
}else{
return 'color:red';
}
}
注意：
styler
也是一个函数，该函数也有
3
个参数，参数意义同上，该函数是
datagrid
列的属性，需要放在
columns
里面才能起作用，用来改变列的样式。
效果图如下：
1、使用nowrap来实现对
datagrid
的行进行折行显示
场景：
在开发中，有时一行太长，但又希望通过多行的方式，能够把所有的内容一次性显示完，这个时候，就需要使用
nowrap
属性来实现了，该属性是
datagrid
的属性。
实现起来很简单，只需在
datagrid
的配置项中，增加该属性即可。
Easyui
的
datagrid
样式就先到这里。