zk框架 grid复杂表头处理

来源：互联网发布：mac版word的选项在哪编辑：程序博客网时间：2024/06/15 00:31

解决了几个zkBUG，新人学习，跟大家分享一下。建议下载官网开源demo 【zksandbox】,用本人的auxheader.zul替换项目中的/zksandbox/WebRoot/grid/auxheader.zul文件，可以查看效果。下载地址：auxheader.zul。

1. 表头没有分割线的bug。从官方下载最新的JAR包，测试后确认新版的zk已经修正了这个BUG，用到的jar包是silvertail.jar ，更新一下即可，为了统一版本建议把zk完全升级到5.0版本。

2. 表头行高占多行时，列显示不全或错位的BUG。

3. 表格增加横向滚动条以及设置表头宽度的解决方案：

1. 横向滚动条的处理：外层嵌套div容器，设置width="100%"，并设置style="overflow:auto;"，grid的宽度根据表头的长度自行确定合适的百分比。

2. 表头宽度的处理：设置<columns id="columns1" visible="false">，<column align="center" width="5%"/>，计算column标签合适的宽度，设置合适的百分比，未设置百分比的列将平分剩余的宽度。

<div width="100%" style="overflow:auto;"> <grid width="150%" height="300px"><auxhead><auxheader label="区域a" rowspan="2" align="center"/><auxheader label="0销售人数" rowspan="2" align="center"/><auxheader label="0销售占比" rowspan="2" align="center"/><auxheader label="分类别促销员" colspan="4" align="center"/><auxheader label="核心促销员" colspan="3" align="center"/></auxhead><auxhead><auxheader label="大客户促珊瑚中的大型" align="center"/><auxheader label="索爱专促" align="center"/><auxheader label="营业厅促" align="center"/><auxheader label="综促" align="center"/><auxheader label="A" align="center"/><auxheader label="B" align="center"/><auxheader label="S" align="center"/></auxhead><columns id="columns1" visible="false"><column align="center" width="5%"/><column align="center" width="10%"/><column align="center" width="10%"/><column align="center"/>--此处平分剩余的40%的宽度<column align="center"/><column align="center" width="10%"/><column align="center" width="10%"/><column align="center" width="5%"/><column align="center" width="5%"/><column align="center" width="5%"/></columns><rows><row><label value="1,000"/><label value="1,000"/><label value="1,100"/><label value="1,200"/><label value="1,300"/><label value="1,400"/><label value="1,500"/><label value="1,600"/><label value="1,700"/><label value="1,800"/></row><row><label value="1,500"/><label value="1,100"/><label value="2,400"/><label value="1,700"/><label value="1,500"/><label value="3,700"/><label value="1,800"/><label value="1,300"/><label value="2,000"/><label value="2,500"/></row></rows></grid></div>