bootstrapTable动态合并单元格

				var data = result.data
				// 合并单元格
				if (data != null && data.length > 0) {
					var ths = [ 'companyName', 'paycanal', 'payScence',
							'caozuoPeople', 'updateTime', 'caozuo' ];
					var start = data[0].companyName; // 数据中companyName的第一个值
					var start1 = data[0].paycanal; // 数据中paycanal的第一个值
					var start2 = data[0].payScence; // 数据中payScence的第一个值
					var start3 = data[0].caozuoPeople; // 数据中caozuoPeople的第一个值
					var start4 = data[0].updateTime; // 数据中updateTime的第一个值
					var start5 = '编辑'; // 数据中caozuo的第一个值
					var num = 0; // 记录有几条companyName值一样的记录
					var index = 0; // table合并行的位置
					var num1 = 0;
					var num2 = 0;
					var num3 = 0;
					var num4 = 0;
					var num5 = 0;
					var index5 = 0;
					var index4 = 0;
					var index3 = 0;
					var index2 = 0;
					var index1 = 0;
					for (var i = 0; i < data.length; i++) {
						if (data[i].companyName == start) {
							num++;
						} else {
							for (var j = 0; j < ths.length; j++) {
								if (ths[j] == 'companyName') {
									$("#dataListTable").bootstrapTable(
											"mergeCells", {
												index : index,
												field : ths[j],
												rowspan : num,
											});
								}
							}
							index = index + num;
							start = data[i].companyName;
							num = 0;
							num++;
						}
						if (data[i].paycanal == start1 && num1 < num) {
							num1++;
						} else {
							for (var j = 0; j < ths.length; j++) {
								if (ths[j] == 'paycanal') {
									$("#dataListTable").bootstrapTable(
											"mergeCells", {
												index : index1,
												field : ths[j],
												rowspan : num1,
											});
								}

							}
							index1 = index1 + num1;
							start1 = data[i].paycanal;
							num1 = 0;
							num1++;
						}
						if (data[i].payScence == start2 && num2 < num1) {
							num2++;
						} else {
							for (var j = 0; j < ths.length; j++) {
								if (ths[j] == 'payScence') {
									$("#dataListTable").bootstrapTable(
											"mergeCells", {
												index : index2,
												field : ths[j],
												rowspan : num2,
											});
								}

							}
							index2 = index2 + num2;
							start2 = data[i].payScence;
							num2 = 0;
							num2++;
						}
						if (data[i].caozuoPeople == start3 && num3 < num) {
							num3++;
						} else {
							for (var j = 0; j < ths.length; j++) {
								if (ths[j] == 'caozuoPeople') {
									$("#dataListTable").bootstrapTable(
											"mergeCells", {
												index : index3,
												field : ths[j],
												rowspan : num3,
											});
								}

							}
							index3 = index3 + num3;
							start3 = data[i].caozuoPeople;
							num3 = 0;
							num3++;
						}
						if (data[i].updateTime == start4 && num4 < num3) {
							num4++;
						} else {
							for (var j = 0; j < ths.length; j++) {
								if (ths[j] == 'updateTime') {
									$("#dataListTable").bootstrapTable(
											"mergeCells", {
												index : index4,
												field : ths[j],
												rowspan : num4,
											});
								}

							}
							index4 = index4 + num4;
							start4 = data[i].updateTime;
							num4 = 0;
							num4++;
						}
						if (num5 < num) {
							num5++;
						} else {
							for (var j = 0; j < ths.length; j++) {
								if (ths[j] == 'caozuo') {
									$("#dataListTable").bootstrapTable(
											"mergeCells", {
												index : index5,
												field : ths[j],
												rowspan : num5,
											});
								}

							}
							index5 = index5 + num5;
							start5 = data[i].caozuo;
							num5 = 0;
							num5++;
						}
						if (i == data.length - 1) {
							for (var j = 0; j < ths.length; j++) {
								if (ths[j] == 'companyName') {
									$("#dataListTable").bootstrapTable(
											"mergeCells", {
												index : index,
												field : ths[j],
												rowspan : num,
											});
								}
								if (ths[j] == 'paycanal') {
									$("#dataListTable").bootstrapTable(
											"mergeCells", {
												index : index1,
												field : ths[j],
												rowspan : num1,
											});
								}
								if (ths[j] == 'payScence') {
									$("#dataListTable").bootstrapTable(
											"mergeCells", {
												index : index2,
												field : ths[j],
												rowspan : num2,
											});
								}
								if (ths[j] == 'caozuoPeople') {
									$("#dataListTable").bootstrapTable(
											"mergeCells", {
												index : index3,
												field : ths[j],
												rowspan : num3,
											});
								}
								if (ths[j] == 'updateTime') {
									$("#dataListTable").bootstrapTable(
											"mergeCells", {
												index : index4,
												field : ths[j],
												rowspan : num4,
											});
								}
								if (ths[j] == 'caozuo') {
									$("#dataListTable").bootstrapTable(
											"mergeCells", {
												index : index5,
												field : ths[j],
												rowspan : num5,
											});
								}
							}
						}

					}
				}

 

 

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现动态合并居中单元,可以使用 Bootstrap Table 的自定义列插件。具体步骤如下: 1. 定义自定义列插件,实现合并单元和居中文本的功能。示例代码如下: ```javascript $.fn.bootstrapTable.columnDefaults.mergeCells = true; $.fn.bootstrapTable.cellStyles.alignCenter = function (field, row, index, value) { return { classes: 'text-center' }; }; $.fn.bootstrapTable.columnDefaults.cellStyle = $.fn.bootstrapTable.cellStyles.alignCenter; $.extend($.fn.bootstrapTable.defaults, { onPostBody: function () { $(this).bootstrapTable('mergeCells', { field: 'fieldName', rowspan: 2, index: 0 }); } }); ``` 2. 在表中使用自定义列插件。示例代码如下: ```html <table id="table" data-toggle="table" data-url="your/data/url" data-columns="your/data/columns"> <thead> <tr> <th data-field="fieldName" data-align="center" data-halign="center">Field Name</th> <th data-field="field1" data-align="center" data-halign="center">Field 1</th> <th data-field="field2" data-align="center" data-halign="center">Field 2</th> </tr> </thead> </table> ``` 其中,`data-field` 属性指定列的字段名,`data-align` 和 `data-halign` 属性指定水平对齐方式,`data-toggle="table"` 和 `data-url` 属性指定使用 Bootstrap Table 插件和数据源的 URL,`data-columns` 属性指定列的定义。在列定义中,可以使用自定义的插件,如 `mergeCells`。 需要注意的是,这里的 `fieldName` 需要替换为实际的字段名。另外,`rowspan` 属性可以指定合并单元的行数,`index` 属性可以指定开始合并的行号。 希望这个回答能够帮到你。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值