Bootstrap Table 如何像下面一样额外添加一行标题?

Bootstrap Table 如何像下面一样额外添加一行标题?,第1张

<table class="cusTable">

<thead>

<tr>

<th data-colspan="50" data-align="center">就业情况</th>

</tr>

<tr>

<th data-colspan="5" data-align="center">就业</th>

<th data-colspan="5" data-align="center">就业</th>

<th data-colspan="5" data-align="center">就业</th>

</tr>

<tr>

<th data-field="ceshi">1</th>

<th data-field="ceshi">2</th>

<th data-field="ceshi">2</th>

<th data-field="ceshi">2</th>

<th data-field="ceshi">2</th>

<th data-field="ceshi">水平</th>

<th data-field="ceshi">水平</th>

<th data-field="ceshi">水平</th>

<th data-field="ceshi">水平</th>

<th data-field="ceshi">水平</th>

<th data-field="ceshi">测试</th>

<th data-field="ceshi">测试</th>

<th data-field="ceshi">测试</th>

<th data-field="ceshi">测试</th>

<th data-field="ceshi">测试</th>

</tr>

</thead>

</table>

引入bootstrap的js做出来是这样的,

<span style="font-family:'Times New Roman'font-size:18px">$table.bootstrapTable({

//url: 'json/dev.json',

data: wcssdata,

toolbar: '#toolbar', //工具按钮用哪个容器

//striped: true, //是否显示行间隔色

cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)

pagination: true, //是否显示分页

sortable: true, //是否启用排序

sortOrder: "asc", //排序方式

//queryParams: postQueryParams,//传递参数(*)

//sidePagination: "server",      //分页方式:client客户端分页,server服务端分页(*)

pageSize: 20, //每页的记录行数(*)

pageList: [10, 25, 50, 100], //可供选择的每页的行数(*)

strictSearch: true,

//height: table_h, //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度,设置了行高后编辑时标头宽度不会随着下面的行改变,且颜色也不会改变????

uniqueId: "id", //每一行的唯一标识,一般为主键列

cardView: false, //是否显示详细视图

detailView: false, //是否显示父子表

paginationHAlign: "left",

singleSelect: true,

//search:true,               //是否显示表格搜索,此搜索是客户端搜索,不会进服务端

//strictSearch: true,

//showColumns: true, //是否显示所有的列

//showRefresh: true, //是否显示刷新按钮

clickToSelect: true, //是否启用点击选中行

paginationPreText: "<<",

paginationNextText: ">>",

columns: [{

checkbox: true,

}, {

field: 'id',

title: '序号',

width: "75px",

}, {

field: 'seq_no',

title: '编号',

}, {

field: 'type',

title: '类型',

}, {

field: 'position',

title: '位置',

}, {

field: 'status',

title: '设备状态',

}, {

field: 'fault',

title: '故障现象',

}, {

field: 'purchase_time',

title: '采购时间',

}, {

field: 'quality_time',

title: '出保时间',

}, {

field: 'maintain_unit',

title: '维护单位',

}, {

field: 'inputer',

title: '录入者',

}, {

field: 'operate',

title: ' *** 作',

width: '80px',

events: operateEvents1,

formatter: operateFormatter

}, ],

/*处理json数据需要配置此项

* responseHandler: function (res) {

return res.rows

}*/

})</span>

<span style="font-family:'Times New Roman'font-size:18px">window.operateEvents1 = {

'click .RoleOfA': function(e, value, row, index) {

detailmodal.open()

$("#dev_id").val(row.id)

$("#seq_no").val(row.seq_no)

$("#dev_pos").val(row.position)

$("#dev_type1").val(row.type)

$("#dev_status").val(row.status)

$("#fault").val(row.fault)

$("#buy_time").val(row.purchase_time)

$("#quality_time").val(row.quality_time)

$("#inputer").val(row.inputer)

$("#maintain_unit").val(row.maintain_unit)

for(var i in row) console.log(i)

}

}

function operateFormatter(value, row, index) {

return [

'<button id="btn_detail" type="button" class="RoleOfA btn-default bt-select">详情</button>',

].join('')

}</span>

多上班族在表格中插入表格,小编教你一个很简单的方法。

点击插入单元格下面的对象,然后选择由文件创建。

选择好文件之后,在显示为图标前面的框框里面打勾,然后可以在更改图标里面修改文件的路径。

确定之后再查看原来的表格,发现这个表格已经插入进去了。这样就可以了。在这里面的表格只要双击就可以打开查看里面的数据了。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11215061.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-14
下一篇 2023-05-14

发表评论

登录后才能评论

评论列表(0条)

保存