EasyUI中，很多時候都要對datagrid的樣式進行修改，例如大於24歲的行背景設定為紅色；性別為男的列，字型設定為綠色；當行過長時，滑鼠移動到行上時，顯示該行全部內容；格式化顯示時間等等需求。下面就來講解一下，EasyUI中，怎麼來實現上面的效果。

1、使用formatter列屬性來對datagrid樣式進行修改

1.1 對性別來進行控制

場景：

在程式中，很可能後臺存放性別的，並不是“男”和“女”，而是0和1，那麼在前端怎麼來進行轉換了，其實轉換起來很容易，程式碼如下：

1. formatter:function(value , record , index){  
2.         if(value == 0){  
3.             return‘<span style=color:red; >男</span>’ ;  
4.         } elseif( value == 1){  
5.             return‘<span style=color:green; >女</span>’ ;   
6.         }  
7. }  

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 實現對列資訊的顯示

場景：

在我們的開發中，經常會遇到下面的情況，某一列長度是固定的，但是該列的內容卻很長，當前的單元格根本就顯示不完所有的內容，這個時候，需要對這一列的內容進行一個提示功能，例如，當滑鼠移上去的時候，就顯示該列的完整內容，程式碼如下：

1. formatter:function(value,rowData,rowIndex){  
2.         return‘<span title=”’+value+‘”>’+value+‘</span>’;  
3. }  

formatter:function(value,rowData,rowIndex){
        return '<span title="'+value+'">'+value+'</span>';
}

這個效果利用了span標籤的title屬性，當滑鼠移到列上去的時候，就會顯示title的內容。如果使用者不需要使用這種方式，而是需要全部顯示完了？後面會介紹這種需求的實現方式。

1.3 實現對敏感資訊的隱藏

場景：

在開發中，經常需要對敏感的資訊進行隱藏，例如密碼等，這種效果也可以利用formatter來實現，程式碼如下：

1. formatter:function(value,rowData,rowIndex){  
2.         return‘******’;  
3. }  

formatter:function(value,rowData,rowIndex){
        return '******';
}

效果圖如上。

1.4 實現在單元格中增加新的操作

場景：

在開發中，有的需求希望增刪改查操作放在toolbar上，如下圖所示：

有的需求則希望郵件點選的時候，以彈出選單的方式來展現，如下圖所示：

而有的需求，則希望將這些操作放在該行末尾的一列中來展現給客戶，如下圖所示：

那這種效果怎麼來實現了，程式碼如下：

1. formatter:function(value,rowData,rowIndex){  
2.         return‘<button onclick=”getRowDataFromIndex(‘+rowIndex+‘);”>編輯    </button>|<button onclick=”getRowDataFromIndex(‘+rowIndex+‘);”>刪除 </button>’;  
3. }  

formatter:function(value,rowData,rowIndex){
        return '<button onclick="getRowDataFromIndex('+rowIndex+');">編輯    </button>|<button onclick="getRowDataFromIndex('+rowIndex+');">刪除 </button>';
}

以上就是使用formatter來實現的常用的效果，當然還可以利用formatter來實現很多效果，例如時間日期格式的轉換等等。我們只需要記住formatter返回的是一串字串。

1、使用rowStyler來實現對datagrid行樣式進行修改

2.1 在開發中，經常需要對某些特殊的資料給予特殊的處理，例如分數高於95分的，年齡大於24歲的等等，這個時候，我們就需要使用rowStyle來實現類似的效果了。

場景：

對列表中年齡大於24歲的行，背景顯示為灰色，其餘行的背景顯示為黃色。

程式碼如下：

1. rowStyler:function(rowIndex,rowData){  
2.         if(rowData.age > 24){  
3.                 return‘background:gray’;  
4.         }else{  
5.                 return‘background:yellow’;  
6.         }  
7. }  

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的所有列進行特殊顯示

程式碼如下：

1. styler:function(value,rowData,rowIndex){  
2.         if(value == “java”){  
3.                 return‘color:blue’;  
4.         }else{  
5.                 return‘color:red’;  
6.         }  
7. }  

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樣式就先到這裡。