欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

bootstrap table中显示头行结构

程序员文章站 2024-02-17 13:55:22
...

最近做项目遇到一个需求,就是在表格中显示头行结构的数据。显示的效果如下:

bootstrap table中显示头行结构

项目的基本技术选型,vueJS作为前端框架,bootstrap作为主要界面布局。

当时这个需求拿到手,最初我是用两张表来解决的,思路就是,分别循环头表和行表,然后按照正确的顺序渲染到表格中。再根据头行的具体对应关系关联。可是写的时候发现代码量大,而且头行关系不易维护(对应的顺序有可能会在表格中错乱);并且难以维护。没写一半就放弃了这种写法。尝试了第二种写法。

第二种写法的思路其实很简单,就是先不管头行的关系,因为每一个行肯定都有自己的头信息,只不过相同的头会有不同的行而已。所以,先全部以行信息来显示,如下图:

bootstrap table中显示头行结构

这样做的好处是可以保证头行结构在表格中显示的正确性,接下来就要用到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记录着头的索引值和行的索引值,并且以 ‘-’ 连接,这样在获取单元格的时候,就能获取到对应这行的行数据了。这里主要是用来调整表格布局。注意这里要设置行高,因为要保证单元格内的问题居中显示。