EasyUI中，很多时候都要对datagrid的样式进行修改，例如大于24岁的行背景设置为红色；性别为男的列，字体设置为绿色；当行过长时，鼠标移动到行上时，显示该行全部内容；格式化显示时间等等需求。下面就来讲解一下，EasyUI中，怎么来实现上面的效果。
1、使用formatter列属性来对datagrid样式进行修改
1.1 对性别来进行控制
场景：
在程序中，很可能后台存放性别的，并不是“男”和“女”，而是0和1，那么在前端怎么来进行转换了，其实转换起来很容易，代码如下：
[java]view plain copy print ?
- 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: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 实现对列信息的显示
场景：
在我们的开发中，经常会遇到下面的情况，某一列长度是固定的，但是该列的内容却很长，当前的单元格根本就显示不完所有的内容，这个时候，需要对这一列的内容进行一个提示功能，例如，当鼠标移上去的时候，就显示该列的完整内容，代码如下：
[java]view plain copy print ?
- formatter:function(value,rowData,rowIndex){
- return ‘<span title=”’+value+‘”>’+value+‘</span>’;
- }
formatter:function(value,rowData,rowIndex){
return '<span title="'+value+'">'+value+'</span>';
}
这个效果利用了span标签的title属性，当鼠标移到列上去的时候，就会显示title的内容。如果用户不需要使用这种方式，而是需要全部显示完了？后面会介绍这种需求的实现方式。
1.3 实现对敏感信息的隐藏
场景：
在开发中，经常需要对敏感的信息进行隐藏，例如密码等，这种效果也可以利用formatter来实现，代码如下：
[java]view plain copy print ?
- formatter:function(value,rowData,rowIndex){
- return ‘******’;
- }
formatter:function(value,rowData,rowIndex){
return '******';
}
效果图如上。
1.4 实现在单元格中增加新的操作
场景：
在开发中，有的需求希望增删改查操作放在toolbar上，如下图所示：
有的需求则希望邮件点击的时候，以弹出菜单的方式来展现，如下图所示：
而有的需求，则希望将这些操作放在该行末尾的一列中来展现给客户，如下图所示：
那这种效果怎么来实现了，代码如下：
[java]view plain copy print ?
- formatter:function(value,rowData,rowIndex){
- return ‘<button οnclick=”getRowDataFromIndex(‘+rowIndex+‘);”>编辑 </button>|<button οnclick=”getRowDataFromIndex(‘+rowIndex+‘);”>删除 </button>’;
- }
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岁的行，背景显示为灰色，其余行的背景显示为黄色。
代码如下：
[java]view plain copy print ?
- rowStyler:function(rowIndex,rowData){
- if(rowData.age > 24){
- return ‘background:gray’;
- }else{
- return ‘background:yellow’;
- }
- }
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的所有列进行特殊显示
代码如下：
[java]view plain copy print ?
- styler:function(value,rowData,rowIndex){
- if(value == “java”){
- return ‘color:blue’;
- }else{
- return ‘color:red’;
- }
- }
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样式就先到这里。
document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + Math.ceil(new Date()/3600000)
<div id="digg" articleid="53540126">
<dl id="btnDigg" class="digg digg_enable" onclick="btndigga();">
<dt>顶</dt>
<dd>0</dd>
</dl>
<dl id="btnBury" class="digg digg_enable" onclick="btnburya();">
<dt>踩</dt>
<dd>0</dd>
</dl>
</div>
<div class="tracking-ad" data-mod="popu_222"><a href="javascript:void(0);" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank"> </a> </div>
<div class="tracking-ad" data-mod="popu_223"> <a href="javascript:void(0);" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank"> </a></div>
<script type="text/javascript">
function btndigga() {
$(".tracking-ad[data-mod='popu_222'] a").click();
}
function btnburya() {
$(".tracking-ad[data-mod='popu_223'] a").click();
}
</script>