由于需要复杂表头的显示和导入功能，查阅资料后总结如下：
需求：前端部分需要最新版本的layui相关参考资料，后端部分需要AndyGridViewTHeaderHepler工具类（封装的一些常用的excel工具可以找到）；
效果图如下：
实施步骤：
1、首先引用layui并设置复杂表头并启用隐藏列工具。 具体代码如下
defaultToolbar: ['filter'] 是启用隐藏列工具，rowspan="2" 是设置表头占 2 行html 表头，colspan="2" 是设置表头占 2 列。 具体的表头展示需要根据设计稿进行组装。
2、后端需要DataTable类型的数据源。 如果需要估算小计，可以使用以下代码
这样的话基本上就可以成功绑定数据源，并且可以显示页面了。 这里要注意字段名称的大小写。
3.导出功能比较复杂。 需要对表头进行分组并设计位置。 前端部分需要使用layui的table.eachCols()方法来遍历表头，通过判断表头的hide属性来判断是否隐藏。 隐藏为true，显示为false，然后将未隐藏的列数组组装起来发送给前端，如下
后端部分接收后端组装的字段名字符串，将其拆分成链表，并遍历该字段。 注意这里数组名的首字母是大写的，需要写一个方法让首字母小写，这样才能匹配到数据。 （layui渲染表格时，会将两个相连的大写字母变成小写字母，所以在命名数组时尽量避免。）然后通过AndyGridViewTHeaderHepler工具类的上述方法定义列和表头。 注意 columns.Add(new AsposeHelper.JqxTableColumns() { text = header, columngroup = "shouru" }); 这句话的意思是，头部的名称就是变量头部的值html 表头，父头部是shouru。 然后定义父表头List group = new List(); 然后给父表表头参数group.Add(new AsposeHelper.JqxTableColumnsGroup() { name = "shouru", text = "venue" }); 这样就可以实现复杂header的构造。 最后将表头写入表格，确定表格的数据来源，通过DataTable dtFilter = AsposeHelper.GetTableColumn(dt, "importDt", strColumns);Workbook workbook = AsposeHelper.SaveColumnsHierarchy(columns, group, dt过滤器）； 保存整个表格。 （目前只支持2级头）具体实现如下：
1. 解决哪些问题
1、html中img导入的图片地址没有被替换，找不到图片
2、html公共部分的复用，如face、bottom、浮动层等。
2.解决html中图片导入img的问题
1.在index.html中插入img并引用图片
2、npmrundev运行结果如下：
由于图片地址没有替换成打包地址，所以找不到图片
3.需要使用的包：html-withimg-loader，安装命令：npminstallhtml-withimg-loader--save-dev
减少模块规则中的loader配置，配置如下：
1 { 2 test: /.html$/, 3 // html中的img标签 4 use: ["html-withimg-loader"] 5 },
4.重新运行项目，效果如下：
将html中的图片地址替换为打包后的地址，图片正常显示
3.解决html公共模块复用问题
1、比如我们现在有公共的back header.html，如何引用bottom.html的各个页面，我们首先在项目中建好文件html模块，如下：
创建一个新的layout文件夹html模块，其中包含header.html和bottom.html。 两个文件的内容可以随意写
2.以前我们只能来回复制内容。 改的时候，改N个地方很麻烦，少改几个地方就很容易
3、现在我们如何报价，方法如下：
只需要#include引用文件的相对地址即可引用该文件。 npmrundev运行效果如下：
3、为什么#include可以实现？ 它还受益于 html-withimg-loader。 这个加载器运行时，遇到#include时，就会把页面的内容复制到对应的位置
3、html公共模块的js和样式文件写在哪里？
1、pages下的公共模块文件夹不能包含.js文件和样式文件，因为有.js文件会经过打包过程，生成页面，但我们的公共模块不需要生成页面。
2. 可以运行npmrunbuild来检查布局是否生成。 疗效如下：
2、public模块的js和css要放在那里，js放在assets/js中，css放在assets/css中，如下：
header.js和header.scss可以通过导入到每个业务页面的.js文件里面来使用，如下：
截图：首页index.js文件中引入common.scss和header.js，更改header.html中文本的样式，输出标题字符。 运行效果如下：
源码地址：
如果写得不对请批评指正~~~~！！！！！！
发表评论