bootstrap table中显示头行结构
程序员文章站
2024-02-17 13:55:22
...
最近做项目遇到一个需求,就是在表格中显示头行结构的数据。显示的效果如下:
项目的基本技术选型,vueJS作为前端框架,bootstrap作为主要界面布局。
当时这个需求拿到手,最初我是用两张表来解决的,思路就是,分别循环头表和行表,然后按照正确的顺序渲染到表格中。再根据头行的具体对应关系关联。可是写的时候发现代码量大,而且头行关系不易维护(对应的顺序有可能会在表格中错乱);并且难以维护。没写一半就放弃了这种写法。尝试了第二种写法。
第二种写法的思路其实很简单,就是先不管头行的关系,因为每一个行肯定都有自己的头信息,只不过相同的头会有不同的行而已。所以,先全部以行信息来显示,如下图:
这样做的好处是可以保证头行结构在表格中显示的正确性,接下来就要用到Jquery强大的功能来调整表格了,废话不多,上代码,(table的代码):
<table class="table table-bordered">
<tr style="background-color: rgba(184,255,231,0.08)">
<th rowspan="2"></th>
<th colspan="7">发票信息</th>
<th colspan="4">开票申请信息</th>
</tr>
<tr style="background-color: rgba(184,255,231,0.08)">
<th>发票编号</th>
<th>发票金额</th>
<th>收款金额</th>
<th>收款时间</th>
<th>发票状态</th>
<th>退回状态</th>
<th>客户名称</th>
<th>开票名称</th>
<th>申请人</th>
<th>申请时间</th>
<th>开票时间</th>
</tr>
<template v-for="(item,index) in test">
<tr v-for="(o,i) in item.receipt"
:id="index+'-'+i" :index="index">
<td>
<template
v-if="o.backStatus=='可退回'">
<input type="checkbox">
</template>
<template
v-if="o.backStatus=='不可退回'">
<input type="checkbox"
disabled>
</template>
</td>
<td>{{o.num}}</td>
<td>{{o.money}}</td>
<td>{{o.money2}}</td>
<td>{{o.money2Date}}</td>
<td>{{o.receiptStatus}}</td>
<td>{{o.backStatus}}</td>
<td>{{o.customerName}}</td>
<!--head-->
<td>{{item.name}}</td>
<td>{{item.applyPeople}}</td>
<td>{{item.applyDate}}</td>
<td>{{item.receiptDate}}</td>
</tr>
</template>
</table>
js代码:
var mApp = {
initAll: function () {
this.initVue();
this.adjustTable();
},
initVue: function () {
window.vm = new Vue({
el: '#div-return-app',
data: {
test: [
{
name: '软件实施费',
applyPeople: '张三[1234]',
applyDate: '2017-09-09',
receiptDate: '2017-09-12',
receipt: [{
num: '0121020',
money: '12121212',
money2: '2112121',
money2Date: '2017-08-12',
receiptStatus: '正常',
backStatus: '不可退回',
customerName: '下面的都是假的'
}]
}, {
name: '软件实ss施费ss',
applyPeople: '张三ww[1234]',
applyDate: '2017-09-09',
receiptDate: '2017-09-12',
receipt: [{
num: '0121020',
money: '12121212',
money2: '2112121',
money2Date: '2017-08-12',
receiptStatus: '正常',
backStatus: '可退回',
customerName: '你猜我是什么公司'
}, {
num: '0121020',
money: '12121212',
money2: '2112121',
money2Date: '2017-08-12',
receiptStatus: '正常',
backStatus: '不可退回',
customerName: '你猜不到我是什么公司'
}
]
},
{
name: '软件实施费2',
applyPeople: '张三2[1234]',
applyDate: '2017-09-092',
receiptDate: '2017-09-122',
receipt: [{
num: '11111111',
money: '11111111',
money2: '1111111',
money2Date: '2017-08-12',
receiptStatus: '22正常',
backStatus: '不可退回',
customerName: '测试公司A'
}, {
num: '2222222',
money: '222222',
money2: '2222222',
money2Date: '2017-08-12',
receiptStatus: '22正常',
backStatus: '可退回',
customerName: '我是一个正经的测试公司'
}, {
num: '333333',
money: '33333',
money2: '333333',
money2Date: '2017-08-12',
receiptStatus: '22正常',
backStatus: '不可退回',
customerName: '上面的不是正经的公司'
}]
}
]
}
})
},
adjustTable: function () {
for (var i = 0; i < vm.test.length; i++) {
var $tr = $('tr[index=' + i + ']');
var rowspanLen = $tr.length;
var $height = $tr.find('td:eq(2)').css('height');
$tr.eq(0).find('td:gt(7)').attr('rowspan', rowspanLen).css('line-height', Number($height.split('px')[0] * rowspanLen) + 'px');
$tr.not(":eq(0)").find('td:gt(7)').css('display', 'none');
$('tr:gt(1)').find('td:lt(8)').css('line-height', '35px')
}
}
};
$(function () {
mApp.initAll();
})
主要的思路是:为每一个td绑定一个id,这个id记录着头的索引值和行的索引值,并且以 ‘-’ 连接,这样在获取单元格的时候,就能获取到对应这行的行数据了。这里主要是用来调整表格布局。注意这里要设置行高,因为要保证单元格内的问题居中显示。
上一篇: visual C++ 2015 报错error LNK2019: unresolved external symbol [email protected] referenced in function
推荐阅读
-
bootstrap table中显示头行结构
-
BootStrap中Table隐藏后显示问题的实现代码
-
在table 的 td中如何让二个组件在一行显示_html/css_WEB-ITnose
-
如果做一个Table 固定的行和列的头, bootstrap_html/css_WEB-ITnose
-
BootStrap中Table隐藏后显示问题的实现代码
-
实例讲解BootStrap中Table隐藏后显示问题
-
在table 的 td中如何让二个组件在一行显示_html/css_WEB-ITnose
-
实例讲解BootStrap中Table隐藏后显示问题
-
如果做一个Table 固定的行和列的头, bootstrap_html/css_WEB-ITnose