bootstrapTable实现多层表头

xiaoxiao2021-02-28  41

1、html

<table id="tb_table"></table>

2、js

columns: [ [{ title: '这是标题', field: '', align: 'center', valign: 'middle', colspan: 10 }], [{ title: '这是标题1', field: '', align: 'center', valign: 'middle', colspan: 1, rowspan: 2 }, { title: '这是标题2', field: '', align: 'center', valign: 'middle', colspan: 4, rowsapn: 1 }, { title: '这是标题3', field: '', align: 'center', valign: 'middle', colspan: 5, rowsapn: 1 }], [{ field: 'title1', //列ID同时也是指定要显示的数据的ID title: '标题', width: 100, align: 'center', valign: 'middle', sortable: true }, { field: 'title2', //列ID同时也是指定要显示的数据的ID title: '标题', width: 100, align: 'center', valign: 'middle', sortable: true }, { field: 'title3', //列ID同时也是指定要显示的数据的ID title: '标题', width: 100, align: 'center', valign: 'middle', sortable: true }, { field: 'title4', //列ID同时也是指定要显示的数据的ID title: '标题', width: 100, align: 'center', valign: 'middle', sortable: true }, { field: 'title5', //列ID同时也是指定要显示的数据的ID title: '标题', width: 100, align: 'right', valign: 'middle', sortable: true }, { field: 'title6', //列ID同时也是指定要显示的数据的ID title: '标题', width: 100, align: 'center', valign: 'middle', sortable: true }, { field: 'title7', //列ID同时也是指定要显示的数据的ID title: '标题', width: 100, align: 'center', valign: 'middle', sortable: true }, { field: 'title8', //列ID同时也是指定要显示的数据的ID title: '标题', width: 100, align: 'center', valign: 'middle', sortable: true }, { field: 'title9', //列ID同时也是指定要显示的数据的ID title: '标题', width: 100, align: 'center', valign: 'middle', sortable: true } ] ]

显示结果如下:

转载请注明原文地址: https://www.6miu.com/read-2624162.html

最新回复(0)