怎么让FooTable表格支持Rowspan

关于Footable组件

FooTable是一个基于jQuery和Bootstrap的响应式表格组件,他能很方便的生成下面这种样式的表格,而你需要做的只是仿造例子构造数据,然后设置一些开关就可以得到常见的功能,比如排序,搜索,过滤,分页等。想要更多了解FooTable怎么用的可以看官网的例子,几分钟就可以做出个像样子的表格出来了。

有一个需求

有一个如下的表格,第一列是产品名。

想根据产品名进行合并,同一个产品名只有一个单元格,如下:

怎么做

方案1:Rowspan不就好了

接到这个需求的时候,第一瞬间就想到用rowspan属性设置一下就可以了,这个难的可能只是在后台传递数据的时候,要提前排序一下,然后计算好相同产品名的数量,这样前台可以直接设置rowspan的值。 后端(当然你也可以纯前端做)怎么排序和统计产品名就不表了,当我们前端代码加了rowspan之后,却发现效果不尽如人意。

可以看出,虽然产品名的列进行了合并,但是合并后,每个产品的第一列是正常的,该产品下面的列HTML属性都没有生效,都解释成了text文本型。这显然是不行的,怀疑是FooTable本身不支持rowspan,或者需要其他的方法去设置rowspan。

搜资料

打开FooTable相关的Guide,又仔细看了一遍,发现并没有提到rowspan相关的设置 (可以简单Ctrl+F搜一下也可以的)。

找到对应Github里的Issues,看有没有人凑巧也提出过类似问题,果然找到一个Issues with rowspan? 。里面作者各种回复,反正就是不支持,以后再说的意思,看的心拔拔凉,难不成要换个组件?这好烦啊~

方案2:“假装”合并了

想想能不能折中一下,每一行还是每一行,不进行合并,然后把每行相同的产品名不显示,试了下,感觉还行。 搞的再像一点,把中间的边框去掉,加了border的属性控制:

看着和预期已经很像了,但是产品名在最上面感觉怪怪的,最好能垂直居中啊 (可能强迫症犯了)。但这个就麻烦了,现在方案要垂直居中,就要算有多少行,然后找个中间行(奇数还行,偶数没有中间的),然后把产品名显示。这就还要遍历时用变量先存一下产品名...…

…%¥……#¥还是放弃这个想法吧。

方案3:真合并了

想到github上之前那个Issue里,有个小哥提到了他的替代方法,大概意思就是用JS在footable()加载完成表格后,手工把相同行的列给hide掉。

原来的代码有些复杂,还要往后找多少行,删掉对应的列。在这里例子比较简单,因为后端已经标识出来哪些要隐去的行了,仿照代码写了一下。

注:中间加了vertical-align: middle;做垂直居中,加了右边框显得整齐一些。

先将原有产品名为SAME的行照常显示,然后加载完后,找到class=same的行再隐去。

当——当——当——当——

经验

最好选文档全,社区活跃的开源组件,遇到问题可以感觉不是那么无助。

虽然和原来相比,只是一点点优化,但花费的时间却会很多。

在不断的追求极致中,才能不断进步。

参考

FootTable: http://fooplugins.github.io/FooTable/

Issues with rowspan: https://github.com/fooplugins/FooTable/issues/37

更多测试技术文章,微信扫以下二维码,欢迎关注

测码奔跑-让测试技术奔跑起来

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180531G1PC2S00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券