前言：

        现在大数据领域发展的前景一片大好，各种页面统计也很常见，表格成为了首选，它不仅可以展现更丰富的内容，而且视觉展现效果更好；bsgrid是一种简单、轻量，基于jQuery及HTML Table的插件，模块化JS、CSS代码，可按需加载，代码精致简洁，下面来谈谈使用它的一些小技巧。

内容：

技巧一：表头合并

表头合并效果图

        要实现表头合并的效果，主要用到两个属性：合并行属性rowspan，用来指定单元格纵向跨越的行数:rowspan就是用来合并行的，比如rowspan=2就是合并两行。合并列属性colspan，用来指定单元格横向跨越的列数：colspan就是合并列的，colspan=2的话就是合并两列。由于bsgrid列表显示的特性，表格内容并不会显示第一行表头设置的数据，此时需要把所有需要显示的数据列设置到第二行表头处；由于第二行表格实际需要展示的名称仅仅是有合并列属性的表头，此时对于合并行展示的数据列需要增加属性hidden，该属性等同于对表头列设置style="display:none"，即隐藏该表头自身，具体实现方式如下：

表格设置方式

技巧二：表尾数据聚合

       为了直观的体现某一列数据合计结果，通常需要在表格尾部增加数据合计的功能，表格实现方式也很容易，设置表尾对应单元格的内容，对于需要计算的表格，设置表底扩展属性 w_agg: 表示聚合值，支持的方法包括: count, countNotNone, sum, avg, max, min, concat, custom。

效果如下：

表格数据聚合效果图

表格代码如下：

表格聚合部分实现

技巧三：动态修改表格列数据

        在实际应用过程中，有时候需要对某一列数据显示内容进行修改，但是其它内容完全一样，重新写一个表格可以直接达成这个效果，但是代码太冗余，简单的实现方式就是动态修改表格列数据，通过修改达到表格复用的效果，实现方式如下：

动态修改表格列数据

技巧四：固定表格比例

        在表格中，不论是否设置表格列占用宽度比例：width="6%;"，bsgrid都会根据表格列内容动态调整表格列占用的宽度，此时，设置的宽度比例是无效的，要达到宽度比例按照设定的值占比，需要给表格增加属性style="table-layout:fixed"，此时表格列占用的宽度就会根据设置的width值显示。

技巧五：单元格内容显示不全时鼠标移入浮动显示全文

       当表格列占用的宽度不足以显示完整内容时，渲染内容要么折行，要么会截断处理；当内容截断显示省略号以后要查看全部内容有两种方式：方法一：设置w_length=“20”，此属性表示单元格需要被渲染内容超过此长度则截断并tip显示完整内容（如果单元格自定义render方法则此配置无意义）；方法二：设置w_tip属性，设置为"true"则同时tip单元格内容, 而不论其长度是否超过w_length设置的长度，该属性默认值为false，即不会tip单元格内容。

技巧六：自定义列单元格渲染方法名

        当单元格显示的内容并不是简单渲染时，则需要对单元格中的数据进行处理，设置w_render: 自定义列单元格渲染方法名, 插件使用eval(funName)执行此方法, 具有的四个参数是record, rowIndex, colIndex, options。

注：注意如果列有w_render属性设置w_index则无意义. 列可以无w_index或w_render属性

      参数一表示该表格行对象数据，可根据该对象的不同属性设置单元格中不同的内容显示，示例设置最后一列单元格内容为自定义，并增加点击效果，可以在自定义方法中对点击效果执行操作，示例如下：

自定义单元格渲染效果图

该效果的实现方式即是对单元格数据状态的不同设置不同的显示效果，实现方式如下：

自定义单元格渲染实现

技巧七：动态显示隐藏的表格列

        表格列数据过多时可以设置部分列隐藏，bsgrid提供了w_hidden="true"这个属性，可以直接隐藏整列数据，不过通过查看源码可以知道，该属性只是设置了整列数据的 display=“none”,其数据仍然存在于表格中，如果要显示隐藏列的数据，可以通过动态设置列显示达到选择性的显示隐藏部分列的效果，实现方式如下：

显示通过w_hidden=“true”隐藏的表格列