EasyUI Datagrid Header 多行 - CSS

在 EasyUI 中，datagrid 是一个非常常用的组件，但默认情况下，datagrid 的 header 只支持单行显示。

本文将介绍如何通过 CSS 的方式实现 EasyUI Datagrid Header 多行显示效果。

实现步骤

1. 首先，需要为 datagrid 添加一个 CSS 类名，比如 multi-line-header。

   <table id="datagrid" class="easyui-datagrid multi-line-header"></table>
   

2. 接下来，定义一个名为 multi-line-header 的 CSS 类，其中包含多个子元素选择器，对应 datagrid header 中每行的每个单元格。

   .multi-line-header th div:nth-child(1),
   .multi-line-header th div:nth-child(2) {
     white-space: normal !important;
     line-height: 1.2em;
     height: 2.4em;
   }
   

   在上面的 CSS 代码中，nth-child 表示选择第几个子元素进行样式设置。white-space 属性设置为 normal 表示文字自动换行，line-height 和 height 属性用于控制每行的高度。

3. 最后，在 JavaScript 中初始化 datagrid 时，需要设置 loadFilter 属性，以触发 CSS 样式的生效。

   $('#datagrid').datagrid({
     url: '/getData',
     loadFilter: function(data) {
       setTimeout(function() {
         $('.multi-line-header').closest('.datagrid-view').find('div.datagrid-header').css('height', 'auto');
       }, 0);
       return data;
     }
   });
   

   在 loadFilter 中，设置 setTimeout 延时 0 秒后执行，这是为了等待 datagrid 加载完成后再对 datagrid header 进行样式处理。最后，使用 closest 和 find 方法找到对应的父元素，将 header 的高度设置为 auto，以自适应多行文字高度。

完整代码

<table id="datagrid" class="easyui-datagrid multi-line-header"></table>

.multi-line-header th div:nth-child(1),
.multi-line-header th div:nth-child(2) {
  white-space: normal !important;
  line-height: 1.2em;
  height: 2.4em;
}

$('#datagrid').datagrid({
  url: '/getData',
  loadFilter: function(data) {
    setTimeout(function() {
      $('.multi-line-header').closest('.datagrid-view').find('div.datagrid-header').css('height', 'auto');
    }, 0);
    return data;
  }
});

结语

以上就是实现 EasyUI Datagrid Header 多行显示效果的全部步骤。在需要多行表头时，可以使用此方法来满足需求。