layui表格使用总结（表头表内容主体不对齐、多级表头等）

近期项目使用的jQuery+JSP，前端组件使用了layui。涉及到了排序、合计、多级表头等问题。

layui表格有三种渲染方式，此文使用的是方法渲染。以下功能均是基于方法渲染。

一、排序

为某列排序，在table渲染时，首先要开启排序，然后添加initSort参数，并添加要排序的字段名：

二、合计

显示合计行。首先要开启合计功能，在table渲染时添加totalRow:true。然后在要显示合计两字的列添加totalRowText:"合计",最后在需要合计的列添加totalRow: true，这样就开启了合计功能。totalRow属性会自动计算所在列的和。

合计完成后我们会发现每个合计的数字后面都有00，例如16.00。如果不需要我们可以通过done函数来去掉结尾的0。

三、表头字数太多换行

首先给需要换行的列添加width属性。然后添加以下CSS样式：

效果：

四、多级表头

只有一级表头的情况下，所有列均在同一个数组。多级表头有多个数组。每个数组代表一级。再通过rowspan/colspan区分，例如：

五、关闭分页，显示所有数据

有时我们并不需要分页功能，而需要显示出所有数据。使用limit属性

六、表头和表内容主体对不齐

在项目有时会出现这种情况，表头和内容主体对不齐，差的正是滚动条的距离。网上有人说需要改源码，然而我按网上说得改了并没有用。我是利用CSS隐藏了滚动条，解决了对不齐的问题。

修改前：

修改后：

 2023-09-21--------------------更新

注意：图中的`-1.15%`可修改为`6px`

滚动条隐藏后不影响页面跟随鼠标滚动。

-----------------------8.24更新----------------8.24更新----------------------------

上面的解决方法只适合在表格有滚动条的时候，没滚动条时则不需要此`css`,所以我们要判断下。

七、给表格添加动态高度

我们知道同一固定高度在不同显示器下显示效果是不一样的，为了统一效果就需要动态的高度。

这个也是在done函数里完成。