zk框架 grid复杂表头处理

解决了几个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>