table组件复杂表头的一个bug

讨论 已结
16 2508
岁月小偷
悬赏:50飞吻
等了好几天还没等来2.3.0的正式版,之前处理过的一个多级表头问题,今天发出来大家讨论讨论。还有一些没处理掉的看看有没有什么更好的方案。
先上表头的最终效果吧。表头信息来自社区的@不开森的大熊 (如果不允许俺借用一下@ 我换一个表头数据额)



然后是一个云盘的html和自己修改的table.js的源码(table.js是在版本v2.3.0-rc1的源码上进行修改的)。
https://pan.baidu.com/s/1nJWSmO5R0ogQoUB1me5yXw
如果用到了多级表头特别是有colspan为1的复杂表头或者3层以上的表头的我相信用现在的源码应该是会遇到bug的,不是使用得对不对的问题,是源码本身就存在的bug。主要有两个。
1,判断和并列的逻辑只是用了简单的colspan>1,很显然这个对于需要和并列为1的情况下就会多出很多数据列导致表头跟数据列对不上的问题。
2,遍历表头信息的时候遇到和并列回去得到它的子列,但是寻找子列的竟然是去一列找,如果遇到rowspan不是1的情况就会出现表头跟数据列不是一一匹配的问题。
大家有兴趣可以先用你们自己的layui(建议在最新版本下,虽然2.2.6可能也是没问题的),换一下我的测试页面的layui路径,然后看看目前的结果,然后再备份一下组件中的table.js然后把我的js给覆盖进去,清一下缓存再试试看。
然而目前还是有问题的,因为组合列其实它是没有宽度定义的,是通过它的子列们来决定,如果是单列合并,而且合并的列的信息比较长但是实际数据列比较短,会出现数据的表头可能不居中,还有表头的跟实际数据的td宽度有差异的问题,测试这个比较简单的就是把测试文件中table的最小宽度给调低,就会发现这个问题,这个问题主要是框架本身没考虑到会有这种情况的出现,比较理想的认为和并列的宽度可以不限定因为一般合并几列的宽度应该是够用的。这一块需要怎么处理就是另外一个问题了。看看大家有没有什么好的建议。
最后如果有不想等到官方修复自己想合并到自己的table.js的小伙伴可以查找对比你们现在的table.js中的colspan和rowspan,整个js里面没多少,然后对比原先的代码跟我给的js里面的代码,就知道怎么修改了,是不是合理自己考量,我测试了是没啥问题,不过我们自己目前使用的多级复杂表头的表还是比较有限,所以不排除有什么没测试到的bug。
愿layui原来越好

忘记了一个事情,就是这样修改了之后其实是有一个使用的约定的,就是如果一个列是和并列,不要给他设置field这个很重要,然后一个数据列就必须给他设置field,因为单列合并的出现,总得有一种机制来判断到底是和并列还是数据列,比如都是colspan没有设置,默认就是1,那么到底是合并列还是数据列就根据设置中的field来判断!
回帖
  • 多谢楼主精彩的分享,基本已经解决问题了
    看了下面的描述,不知道是不是跟我发现的一样,就是如果cellMinWidth这个属性过小,或者不设置,会导致在colspan=1这一列上,实际数据列宽度小于表头宽度的问题,然后整个数据数据列就左移了
    现在我暂时就是把这个cellMinWidth数值放大些,已经能用了,虽然列很宽[哈哈]

    再次感谢楼主精彩分享
    0 回复
  • 想到的方法就是在后台判断咯,如果是表头1对1的形式,就把相应列宽放大
    0 回复
  • @不开森的大熊 嗯嗯这个问题没有深入的去处理,等有空了再好好看看,不过可以肯定的是因为group宽度目前没有限定的问题,如果像下面的普通数据列的表头,table组件本身是通过一些机制来限定了宽度了的,所以超出了会用...替代,之类的,但是laytable-cell-group的没有宽度限定,就导致了没有所谓的超出,而引发了把下面实际的数据列的表头的宽度也给拉长了,这个需要好好思考一下对策。等想到了再@ 一下你
    0 回复
  • @岁月小偷 非常感谢
    0 回复
  • @不开森的大熊 嗯嗯,目前比较妥协的办法就是给title都设置一下长度,根据里面可能出现的字数长度之类的。后续再想办法把laytable-cell-group也支持宽度限定就可以更加灵活的用了。
    0 回复
  • @岁月小偷 不好意思,还是发现了一个问题 ,虽然您这样改,可以实现colspan=“1”的完美展示,可是,在用checkbox和toolbar的时候,会发生在实际数据列中,无法出现checkbox和toolbar的问题,求解求解
    0 回复
  • @不开森的大熊 嗯嗯,我试了一下确实被忽略了,但是目前有个很好的解决方案,因为我的规定就是如果是一个数据列,必须设置field,比如CheckBox列,你可以给它加一个属性
    <th lay-data="{type:'checkbox', field:'checkbox',fixed: true}" rowspan="4"></th>
    工具条也一样,加一个field:‘myToolbar’之类的就可以了额亲,我的帖子后面追加了一段话,可能你没看到。
    0 回复
  • @岁月小偷 非常感谢,已经完美解决了[偷笑] 领导加薪大大地
    0 回复
  • @不开森的大熊 [哈哈] 不客气
    0 回复
  • @岁月小偷 如何给toolbar加filed 我是新手
    0 回复
  • @岁月小偷 你好,那个用了你的js后,默认的toolbar不显示了,你说加个field,请问在哪加,我用的是默认的toolbar
    0 回复
  • @仙心藏玄玉逍遥 你好,你现在使用的layui的版本是不是2.4.5呢?如果是的话不能直接替换哦,这个帖子那时是基于2.3.0修改的,所以table.js的代码是以前的,直接覆盖了后面新版本的功能就没有了,如果想要在2.4.5的版本上处理这个多级复杂表头的bug,可以看看这个帖子额: 解决复杂的复杂表头表格的种种翻车
    0 回复
  • @岁月小偷 好的 谢谢 我先看下 不懂再问
    0 回复
  • @岁月小偷 谢啦,解决了
    0 回复
  • 0 回复
  • @岁月小偷 [泪] toolbar出来了 但是错列了 , 我将你的测试项目里的table.js替换掉了我项目中的table.js然后修改了你上面所说的导致错列的两处,但是还是错列 ,请问是我改的不对吗

    0 回复