解决jQuery的EasyUI的datagrid数据表格中行的垂直居中问题。

迈不过友情╰ 2022-03-27 10:22 517阅读 0赞

默认jQuery EasyUI的datagrid的行的垂直方向上的对齐是text-top的。效果是这样：

![19131806-2a4a1e64ada74002aa7dbe76dca64817.png][]

修改后效果是这样：

![19131823-314b6ec0fe904b6cb82fd973894ee485.png][]

解决办法：

datagrid只有align属性，指的是水平方向的对齐方式，可以按照下面的方法设置css：

在创建datagrid的时候设置column的styler：

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

官方对styler的解释：

<table style="border:1px solid rgb(192,192,192); border-collapse:collapse"> 
 <tbody> 
  <tr> 
   <th style="border:1px solid rgb(192,192,192); border-collapse:collapse; padding:3px"> <strong>Name</strong></th> 
   <th style="border:1px solid rgb(192,192,192); border-collapse:collapse; padding:3px"> <strong>Type</strong></th> 
   <th style="border:1px solid rgb(192,192,192); border-collapse:collapse; padding:3px"> <strong>Description</strong></th> 
   <th style="border:1px solid rgb(192,192,192); border-collapse:collapse; padding:3px"> <strong>Default</strong></th> 
  </tr> 
  <tr> 
   <td style="font-size:14px; border:1px solid rgb(192,192,192); border-collapse:collapse; padding:3px; word-break:normal!important"> &nbsp;</td> 
   <td style="font-size:14px; border:1px solid rgb(192,192,192); border-collapse:collapse; padding:3px; word-break:normal!important"> &nbsp;</td> 
   <td style="font-size:14px; border:1px solid rgb(192,192,192); border-collapse:collapse; padding:3px; word-break:normal!important"> &nbsp;</td> 
   <td style="font-size:14px; border:1px solid rgb(192,192,192); border-collapse:collapse; padding:3px; word-break:normal!important"> &nbsp;</td> 
  </tr> 
  <tr> 
   <td style="font-size:14px; border:1px solid rgb(192,192,192); border-collapse:collapse; padding:3px; word-break:normal!important"> styler</td> 
   <td style="font-size:14px; border:1px solid rgb(192,192,192); border-collapse:collapse; padding:3px; word-break:normal!important"> function</td> 
   <td style="font-size:14px; border:1px solid rgb(192,192,192); border-collapse:collapse; padding:3px; word-break:normal!important"> The cell styler function, return style string to custom the cell style such as 'background:red'. The function take three parameter:<br> value: the field value.<br> rowData: the row record data.<br> rowIndex: the row index. <p style="margin:10px auto">Code example:</p> <pre style="margin-top:0px; margin-bottom:0px; margin-left:22px; white-space:pre-wrap; word-wrap:break-word; font-size:1em">$('#dg').datagrid({
	columns:[[
		{field:'listprice',title:'List Price', width:80, align:'right',
			styler: function(value,row,index){
				if (value &lt; 20){
					return 'background-color:#ffee00;color:red;';
				}
			}
		}
	]]
});
</pre> </td> 
   <td style="font-size:14px; border:1px solid rgb(192,192,192); border-collapse:collapse; padding:3px; word-break:normal!important"> undefined</td> 
  </tr> 
  <tr> 
   <td style="font-size:14px; border:1px solid rgb(192,192,192); border-collapse:collapse; padding:3px; word-break:normal!important"> &nbsp;</td> 
   <td style="font-size:14px; border:1px solid rgb(192,192,192); border-collapse:collapse; padding:3px; word-break:normal!important"> &nbsp;</td> 
   <td style="font-size:14px; border:1px solid rgb(192,192,192); border-collapse:collapse; padding:3px; word-break:normal!important"> &nbsp;</td> 
   <td style="font-size:14px; border:1px solid rgb(192,192,192); border-collapse:collapse; padding:3px; word-break:normal!important"> &nbsp;</td> 
  </tr> 
 </tbody> 
</table>

[官方地址][Link 1]

Sixi. Let it be.../  
//

[19131806-2a4a1e64ada74002aa7dbe76dca64817.png]: /images/20220327/0fbf82e46fbb426a856a56d8b1eade4b.png
[19131823-314b6ec0fe904b6cb82fd973894ee485.png]: /images/20220327/cf11aa4a91ff468a852f6167129eaa00.png
[Link 1]: http://www.jeasyui.com/documentation/datagrid.php