Bootstrap表格單元格自適應內容
阿新 • • 發佈:2018-12-30
目的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);
});
}
效果圖如下