怎么让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

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

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