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>