JQuery EasyUI column表头和表行内容水平垂直居

对于表头, 页面中添加css覆盖easyUI的css配置

<style>
.datagrid-header .datagrid-cell-group {
    margin: 0;
    overflow: hidden;
    padding: 4px 2px 4px 4px;
    text-align: center;
    white-space: nowrap;
    word-wrap: normal;
}
</style>

对于表行, 在渲染时添加属性:
水平居中

align:'center'

垂直居中:

styler: function(value,row,index){
                    return 'vertical-align:middle;';
                }}

举例:

  columns:[[
            {field:'groupType',title:'适用平台',width:100,formatter:groupTypeFormat, styler: function(value,row,index){
                    return 'vertical-align:middle;';
                }},
            {field:'groupCode',title:'组名',width:100,align:'center',styler: function(value,row,index){
                    return 'vertical-align:middle;';
                }},
            {field:'groupName',title:'上级组',width:100,align:'center',styler: function(value,row,index){
                    return 'vertical-align:middle;';
                }},
            //{field:'groupStatus',title:'组状态',width:50,formatter:statusFormat},
            //{field:'createUser',title:'创建人',width:100,align:'center'},
            {field:'createDate',title:'创建日期',width:100,formatter:DateTimeFormatter,align:'center',styler: function(value,row,index){
                    return 'vertical-align:middle;';
                }},
            {field:'updateUser',title:'修改人',width:100,align:'center',styler: function(value,row,index){
                    return 'vertical-align:middle;';
                }},
            {field:'updateDate',title:'修改日期',width:100,formatter:DateTimeFormatter,align:'center',styler: function(value,row,index){
                    return 'vertical-align:middle;';
                }},
            {field: 'requestId', title: '操作',formatter:operation,halign:'center'}
        ]],

效果:

image.png