解決jQuery的EasyUI的datagrid資料表格中行的垂直置中問題。

預設jQuery EasyUI的datagrid的行的垂直方向上的對齊是text-top的。效果是這樣：

 

修改後效果是這樣：

 

解決辦法：

datagrid只有align屬性，指的是水平方向的對齊，可以按照下面的方法設定css：

在建立datagrid的時候設定column的styler：

columns:[[                                                {field:'監測網站',title:'監測網站',width:80,align:'center',                            styler: function(value,row,index){                                    return 'vertical-align:middle;';                            }                        }
　　　　　　]]

 

官方對styler的解釋：

 

Name	Type	Description	Default
styler	function	The cell styler function, return style string to custom the cell style such as 'background:red'. The function take three parameter: value: the field value. rowData: the row record data. rowIndex: the row index. Code example: $('#dg').datagrid({columns:[[{field:'listprice',title:'List Price', width:80, align:'right',styler: function(value,row,index){if (value < 20){return 'background-color:#ffee00;color:red;';}}}]]});	undefined

 

官方地址