layui数据表格实现动态合并单元格呈现一对多数据展示以及点击选中效果

  前言：
  关于一对多数据展示，有的解决方式时通过定义两个表格的形式来呈现他们的关系，一个表格显示主表数据，另一个表格显示主表中某条数据关联的明细表数据，这样虽然也可以实现一对多数据的展示，但我觉得这样并不是最好的。就我所知道的缺点有一下三个：

1. 两个表格数据，需要请求两次服务器获取数据信息
2. 两个表格需要占用的UI面积过多
3. 如果两个表格都涉及到较多操作，操作起来略显麻烦

  通过上面所说的我们了解到，应该尽量使用一个表格来实现这种包含一对多数据的数据展示。那么接下来看看我是怎么实现这种数据展示的。使用的前端框架为Lauyui，我尽量说的详细点，基础OK的朋友可以跳过。

  合并前的思路： 单元格合并需要在有数据的情况下发生，所以需要在表格定义中的数据渲染完的回调方法（done）配置项中执行合并单元格操作。首先需要定义两个数组（需要合并的列对应的字段名称组成的数组，每个字段在表头中的索引位置组成的数组），然后把表格对象以及表格数据跟两个数组一起传入到合并单元格方法中执行合并。
  合并的思路： 定义两个标准，一个代表参考对象的标准索引，另一个代表需要合并的标准行数。
刚进入合并方法时所以标准为0，行数标准为1。然后进行循环，在循环中获取到当前循环的那一行数据和标准索引对应的那一行数据， 判断他们在索引数组中某一索引对应的列的数据是否相同。相同则标准行数+1同时在标准索引对应的那一行添加rowspan属性设置合并，并且隐藏当前循环的那一行，如此往复，如果与标准索引对应的那一行中的某列数据不相同则不添加rowspan，同时把标准索引改为当前循环的那一行的索引还有标准行数改为1。
  点击选中 / 取消选中的思路： 上面在合并单元格时在我给他们每行都添加了一个类（ok什么的），这个类将充当判断哪些需要设置/取消选中样式的依据。在复选框点击监听中调用设置点击效果的方法，传入这个表格所有行对象以及一个标志（ok+点击的这一行的数据唯一标识ID）和选中状态。。然后在设置选中效果方法中循环判断每一行，类中有该标志的根据选中状态来添加或移除选中效果。

  下面是所有代码，引入了哪些插件就不用说了吧，jq是必不可少的，Layui 模板引入嫌麻烦的可以直接引入包含全部模板的那个插件。首先加载Layui的table模板，并进行表格初始化，我这里需要进行条件查询所以我写了个表格重载的方法方便查询时调用。