前言
這幾天的項目再次應用到了表格中單元格合併的功能，之前的有個項目是隻在某一列中進行合併操作，因此代碼是遍歷每行的某一列單元格，而這次的需求比較複雜，列數很多，都可以動態顯示隱藏，原來的代碼功能明顯不夠用了，因此花了點時間，好好整理整理，纔有了下面的用於表格單元格合併的插件。
本插件主要用於表格單元格的縱向合併，前提，每行的tr裏都有一個屬性，比如data-pid,當上下行數據的這個屬性值相等時，將一列或者多列的單元格縱向，用class標識需要合併的列。有的情況下，是隻有少數列不合並，因此也支持用class標識不需要合併列。
如果遇到本插件滿足不了需求的情況，大家可以參考代碼，根據代碼處理邏輯修改出試用於自己需求的插件。
插件源碼
//js文件
/**********************************************
* Copyright (C) Corporation. All rights reserved.
*
* Author : lihaitao
* Email : [email protected]
* Create Date : 2016-12-26
* Description : 表格單元格合併插件
* Version : V1.0
*
* Revision History:
* Date Author Description
* 2016-12-26 lihaitao create
*
***********************************************
//調用實例 table 爲頁面裏的表格
$('table').sdrowpan({
onAttr: 'data-pid', //tr的屬性名，兩行數據中這個屬性值相等時才進行合併
mergeClass: 'doMerge', //td的類名，當tr的onAttr值相等時，此td進行合併
notMergeClass: 'notMerge' //td的類名，當tr的onAttr值相等時，除此td以外其他td合併(**當mergeClass無有效值時才啓用**)
});
*/
(function ($) {
$.fn.sdrowpan = function (options) {
return this.each(function (index, element) {
var that = undefined;
$('tr', this).each(function (trIndex, tr) {
var tdSelector = 'td';
if (typeof (options.mergeClass) !== 'undefined' && options.mergeClass.length > 0) {
tdSelector += '.' + options.mergeClass;
} else {
tdSelector += ':not(.' + options.notMergeClass + ')';
}
if (typeof that !== 'undefined' &&
typeof ($(tr).attr(options.onAttr)) !== 'undefined' &&
$(tr).attr(options.onAttr) === $(that).attr(options.onAttr)) {
var firstTd = $(that).children(tdSelector);
if (firstTd.length == 0) {
return true;
}
var rowpan = firstTd.prop('rowspan');
rowpan += 1;
$(that).children(tdSelector).prop('rowspan', rowpan);
$(this).children(tdSelector).hide();
}
else {
that = tr;
}
});
});
};
})(jQuery);輸入參數
參數表
| 參數名 | 默認值 | 功能 |
|---|---|---|
| onAttr | undefined | tr的屬性名，兩行數據中這個屬性值相等時才進行合併 |
| mergeClass | undefined | td的類名，當tr的onAttr值相等時，此td進行合併 |
| notMergeClass | undefined | td的類名，當tr的onAttr值相等時，除此td以外其他td合併(當mergeClass無有效值時才啓用) |
示例程序源碼
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- 這裏路徑需要改成實際路徑 -->
<script src="jquery.sdrowspan.js"></script>
<style>
table { border-collapse: collapse !important; }
th, td { border: 1px solid #999; padding: 10px 20px; }
</style>
</head>
<body>
<table>
<thead>
<tr><th>標題1</th><th>標題2</th><th>標題3</th><th>標題4</th><th>標題5</th><th>標題5</th></tr>
</thead>
<tbody>
<tr data-pid="0"><td class="doMerge">值1-1</td><td class="doMerge">值1-2</td><td>值1-3</td><td class="notMerge">值1-4</td><td>值1-5</td><td>值1-6</td></tr>
<tr data-pid="0"><td class="doMerge">值2-1</td><td class="doMerge">值2-2</td><td>值2-3</td><td class="notMerge">值2-4</td><td>值2-5</td><td>值2-6</td></tr>
<tr data-pid="1"><td class="doMerge">值3-1</td><td class="doMerge">值3-2</td><td>值3-3</td><td class="notMerge">值3-4</td><td>值3-5</td><td>值3-6</td></tr>
<tr data-pid="1"><td class="doMerge">值4-1</td><td class="doMerge">值4-2</td><td>值4-3</td><td class="notMerge">值4-4</td><td>值4-5</td><td>值4-6</td></tr>
<tr data-pid="2"><td class="doMerge">值5-1</td><td class="doMerge">值5-2</td><td>值5-3</td><td class="notMerge">值5-4</td><td>值5-5</td><td>值5-6</td></tr>
</tbody>
</table>
<script>
$(function () {
$('table').sdrowpan({
onAttr: 'data-pid', //tr的屬性名，兩行數據中這個屬性值相等時才進行合併
mergeClass: 'doMerge', //td的類名，當tr的onAttr值相等時，此td進行合併
notMergeClass: 'notMerge' //td的類名，當tr的onAttr值相等時，除此td以外其他td合併(**當mergeClass無有效值時才啓用**)
});
});
</script>
</body>
</html>
示例程序截圖
$('table').sdrowpan({
onAttr: 'data-pid', //tr的屬性名，兩行數據中這個屬性值相等時才進行合併
mergeClass: 'doMerge' //td的類名，當tr的onAttr值相等時，此td進行合併
});上面代碼執行的效果如下：
$('table').sdrowpan({
onAttr: 'data-pid', //tr的屬性名，兩行數據中這個屬性值相等時才進行合併
notMergeClass: 'notMerge' //td的類名，當tr的onAttr值相等時，除此td以外其他td合併(**當mergeClass無有效值時才啓用**)
});上面代碼執行的效果如下
