目的Bootstrap的单元格自适应表格内容。
改之前:
bootstrap的width在这里不起作用,直接上源码
<div class="box box-success">
<div class="box-body">
<!-- 关键在这个参数class="text-nowrap" ,不要让内容自动换行 加上即可-->
<table id="table-javascript" class="text-nowrap"></table>
</div>
</div>
<!-- 但单元格的一些定义格式-->
tableColumnData.splice(1,1,{field:'device_name',title:'设备名称',align:'left',style:"table-layout:fixed;",valign:'bottom',sortable:true,visible:true,switchable: false,formatter: operateFormatter,events: operateEvents});
<!-- 插件调用-->
$('#table-javascript').bootstrapTable("destroy").bootstrapTable({
method: 'post',
url: '${jqGridUrl}',
queryParams: queryParams,
contentType: "application/x-www-form-urlencoded",
cache: false,
height: 400,
striped: true,
pagination: true,
pageSize: 10,
pageList: [10, 25, 50, 100, 200],
showColumns: true,
sidePagination: 'server',
minimumCountColumns: 1,
clickToSelect: true,
paginationFirstText: "首页",
paginationPreText: '上一页',
paginationNextText: '下一页',
paginationLastText: '最后一页',
columns: tableColumnData,
}).on("column-switch.bs.table",function(e,field,checked){
updateColumnUser(e,field,checked);
});
}
效果图如下