前言：

? ? ? ? 現(xiàn)在大數(shù)據(jù)領(lǐng)域發(fā)展的前景一片大好，各種頁(yè)面統(tǒng)計(jì)也很常見(jiàn)磷蜀，表格成為了首選，它不僅可以展現(xiàn)更豐富的內(nèi)容百炬，而且視覺(jué)展現(xiàn)效果更好褐隆；bsgrid是一種簡(jiǎn)單、輕量剖踊，基于jQuery及HTML Table的插件庶弃，模塊化JS、CSS代碼德澈，可按需加載歇攻，代碼精致簡(jiǎn)潔，下面來(lái)談?wù)勈褂盟囊恍┬〖记伞?/p>

內(nèi)容：

技巧一：表頭合并

表頭合并效果圖

? ? ? ? 要實(shí)現(xiàn)表頭合并的效果梆造，主要用到兩個(gè)屬性：合并行屬性rowspan缴守，用來(lái)指定單元格縱向跨越的行數(shù):rowspan就是用來(lái)合并行的，比如rowspan=2就是合并兩行镇辉。合并列屬性colspan屡穗，用來(lái)指定單元格橫向跨越的列數(shù)：colspan就是合并列的，colspan=2的話就是合并兩列忽肛。由于bsgrid列表顯示的特性鸡捐，表格內(nèi)容并不會(huì)顯示第一行表頭設(shè)置的數(shù)據(jù)，此時(shí)需要把所有需要顯示的數(shù)據(jù)列設(shè)置到第二行表頭處麻裁；由于第二行表格實(shí)際需要展示的名稱僅僅是有合并列屬性的表頭，此時(shí)對(duì)于合并行展示的數(shù)據(jù)列需要增加屬性hidden，該屬性等同于對(duì)表頭列設(shè)置style="display:none"煎源，即隱藏該表頭自身色迂，具體實(shí)現(xiàn)方式如下：

表格設(shè)置方式

技巧二：表尾數(shù)據(jù)聚合

? ?? ? 為了直觀的體現(xiàn)某一列數(shù)據(jù)合計(jì)結(jié)果，通常需要在表格尾部增加數(shù)據(jù)合計(jì)的功能手销，表格實(shí)現(xiàn)方式也很容易歇僧，設(shè)置表尾對(duì)應(yīng)單元格的內(nèi)容，對(duì)于需要計(jì)算的表格锋拖，設(shè)置表底擴(kuò)展屬性 w_agg: 表示聚合值诈悍，支持的方法包括: count, countNotNone, sum, avg, max, min, concat, custom。

效果如下：

表格數(shù)據(jù)聚合效果圖

表格代碼如下：

表格聚合部分實(shí)現(xiàn)

技巧三：動(dòng)態(tài)修改表格列數(shù)據(jù)

? ? ? ? 在實(shí)際應(yīng)用過(guò)程中兽埃，有時(shí)候需要對(duì)某一列數(shù)據(jù)顯示內(nèi)容進(jìn)行修改侥钳，但是其它內(nèi)容完全一樣，重新寫一個(gè)表格可以直接達(dá)成這個(gè)效果柄错，但是代碼太冗余舷夺，簡(jiǎn)單的實(shí)現(xiàn)方式就是動(dòng)態(tài)修改表格列數(shù)據(jù)，通過(guò)修改達(dá)到表格復(fù)用的效果售貌，實(shí)現(xiàn)方式如下：

動(dòng)態(tài)修改表格列數(shù)據(jù)

技巧四：固定表格比例

? ? ? ? 在表格中给猾，不論是否設(shè)置表格列占用寬度比例：width="6%;"，bsgrid都會(huì)根據(jù)表格列內(nèi)容動(dòng)態(tài)調(diào)整表格列占用的寬度颂跨，此時(shí)敢伸，設(shè)置的寬度比例是無(wú)效的，要達(dá)到寬度比例按照設(shè)定的值占比恒削，需要給表格增加屬性style="table-layout:fixed"池颈，此時(shí)表格列占用的寬度就會(huì)根據(jù)設(shè)置的width值顯示。

技巧五：?jiǎn)卧駜?nèi)容顯示不全時(shí)鼠標(biāo)移入浮動(dòng)顯示全文

? ? ? ?當(dāng)表格列占用的寬度不足以顯示完整內(nèi)容時(shí)蔓同，渲染內(nèi)容要么折行饶辙，要么會(huì)截?cái)嗵幚恚划?dāng)內(nèi)容截?cái)囡@示省略號(hào)以后要查看全部?jī)?nèi)容有兩種方式：方法一：設(shè)置w_length=“20”斑粱，此屬性表示單元格需要被渲染內(nèi)容超過(guò)此長(zhǎng)度則截?cái)嗖ip顯示完整內(nèi)容（如果單元格自定義render方法則此配置無(wú)意義）弃揽；方法二：設(shè)置w_tip屬性，設(shè)置為"true"則同時(shí)tip單元格內(nèi)容, 而不論其長(zhǎng)度是否超過(guò)w_length設(shè)置的長(zhǎng)度则北，該屬性默認(rèn)值為false矿微，即不會(huì)tip單元格內(nèi)容。

技巧六：自定義列單元格渲染方法名

? ? ? ? 當(dāng)單元格顯示的內(nèi)容并不是簡(jiǎn)單渲染時(shí)尚揣，則需要對(duì)單元格中的數(shù)據(jù)進(jìn)行處理涌矢，設(shè)置w_render: 自定義列單元格渲染方法名, 插件使用eval(funName)執(zhí)行此方法, 具有的四個(gè)參數(shù)是record, rowIndex, colIndex, options。

注：注意如果列有w_render屬性設(shè)置w_index則無(wú)意義. 列可以無(wú)w_index或w_render屬性

? ? ? 參數(shù)一表示該表格行對(duì)象數(shù)據(jù)快骗，可根據(jù)該對(duì)象的不同屬性設(shè)置單元格中不同的內(nèi)容顯示娜庇，示例設(shè)置最后一列單元格內(nèi)容為自定義塔次，并增加點(diǎn)擊效果，可以在自定義方法中對(duì)點(diǎn)擊效果執(zhí)行操作名秀，示例如下：

自定義單元格渲染效果圖

該效果的實(shí)現(xiàn)方式即是對(duì)單元格數(shù)據(jù)狀態(tài)的不同設(shè)置不同的顯示效果励负，實(shí)現(xiàn)方式如下：

自定義單元格渲染實(shí)現(xiàn)

技巧七：動(dòng)態(tài)顯示隱藏的表格列

? ? ? ? 表格列數(shù)據(jù)過(guò)多時(shí)可以設(shè)置部分列隱藏，bsgrid提供了w_hidden="true"這個(gè)屬性匕得，可以直接隱藏整列數(shù)據(jù)继榆，不過(guò)通過(guò)查看源碼可以知道，該屬性只是設(shè)置了整列數(shù)據(jù)的 display=“none”,其數(shù)據(jù)仍然存在于表格中汁掠，如果要顯示隱藏列的數(shù)據(jù)略吨，可以通過(guò)動(dòng)態(tài)設(shè)置列顯示達(dá)到選擇性的顯示隱藏部分列的效果，實(shí)現(xiàn)方式如下：

顯示通過(guò)w_hidden=“true”隱藏的表格列