2023年6月20日发(作者：)
bootstraptable表头固定、冻结列、横向纵向滚动条前提：引⼊对应的js,css1 添加样式，设置列宽由表格宽度和列宽度设定：.table{table-layout: fixed;}2 bootstrapTable初始化的时候 field设置宽度{ field : '', title : '' ,align: 'center', valign: 'middle',width:120}3 bootstrapTable初始化的时候 height设置⾼度(表头设置有两种⽅法，这⾥使⽤的是在bootstrapTble设置height ，这种⽅法有缺陷，表格⾼度固定，这就需要写额外的js去动态设置table的⾼度)var h = $(window).height() - 100;$('#table').bootstrapTable("destroy").bootstrapTable({method : 'get', // 服务器数据的请求⽅式 get or posturl : "/attendance/record/recordList", // 服务器数据的加载地址height:h, tips：动态设置⾼度可以使⽤ $(window).resize();4 bootstrapTable初始化的时候 设置fixedColumns 和fixedNumberfixedColumns: true,fixedNumber: 55 table 标签外的div 添加class=table-responsive
6 动态设置冻结列的⾼度（通过看源码可以知道，冻结列是通过在table前加div，并是div置于table对应的div之上来实现的）$(window).resize(function () {var h = $(window).height();var w = $(window).width();var $fixedTableBody = $("#table").closest("div"),$fixedTableBodyColumns = $(),$FixedtableContainer = $t("div");$(h - 200);$(h - 253);});最后贴出部分代码（bootstarpTalbe初始）var columns = [];var t1 = { field : 'name', title : '姓名' ,align: 'center', valign: 'middle',width:120};var t2 = { field : 'username', title : '账号' ,align: 'center', valign: 'middle',width:120};var t3 = { field : 'deptName', title : '部门' ,align: 'center', valign: 'middle',width:120};var t4 = { field : 'groupName', title : '考勤组' ,align: 'center', valign: 'middle',width:120};(t1);(t2);(t3);(t4);var h = $(window).height() - 100;$('#table').bootstrapTable("destroy").bootstrapTable({method : 'get', // 服务器数据的请求⽅式 get or posturl : "/attendance/record/recordList", // 服务器数据的加载地址height:h,iconSize : 'outline',striped : true, // 设置为true会有隔⾏变⾊效果dataType : "json", // 服务器返回的数据类型pagination : true, // 设置为true会在底部显⽰分页条// queryParamsType : "limit",// //设置为limit则会发送符合RESTFull格式的参数singleSelect : false, // 设置为true将禁⽌多选// contentType : "application/x-www-form-urlencoded",// //发送到服务器的数据编码类型pageList: [ 5, 10, 20],pageSize : 5, // 如果设置了分页，每页数据条数pageNumber : 1, // 如果设置了分布，⾸页页码//search : true, // 是否显⽰搜索框showColumns : false, // 是否显⽰内容下拉框（选择显⽰的列）sidePagination : "server", // 设置在哪⾥进⾏分页，可选值为"client" 或者 "server"queryParams : function(params) {return {//说明：传⼊后台的参数包括offset开始索引，limit步长，sort排序列，order：desc或者,以及所有列的键值对limit: ,offset:};},columns:columns,fixedColumns: true,fixedNumber: 5});$("#table").colResizable();};
2023年6月20日发(作者：)
bootstraptable表头固定、冻结列、横向纵向滚动条前提：引⼊对应的js,css1 添加样式，设置列宽由表格宽度和列宽度设定：.table{table-layout: fixed;}2 bootstrapTable初始化的时候 field设置宽度{ field : '', title : '' ,align: 'center', valign: 'middle',width:120}3 bootstrapTable初始化的时候 height设置⾼度(表头设置有两种⽅法，这⾥使⽤的是在bootstrapTble设置height ，这种⽅法有缺陷，表格⾼度固定，这就需要写额外的js去动态设置table的⾼度)var h = $(window).height() - 100;$('#table').bootstrapTable("destroy").bootstrapTable({method : 'get', // 服务器数据的请求⽅式 get or posturl : "/attendance/record/recordList", // 服务器数据的加载地址height:h, tips：动态设置⾼度可以使⽤ $(window).resize();4 bootstrapTable初始化的时候 设置fixedColumns 和fixedNumberfixedColumns: true,fixedNumber: 55 table 标签外的div 添加class=table-responsive
6 动态设置冻结列的⾼度（通过看源码可以知道，冻结列是通过在table前加div，并是div置于table对应的div之上来实现的）$(window).resize(function () {var h = $(window).height();var w = $(window).width();var $fixedTableBody = $("#table").closest("div"),$fixedTableBodyColumns = $(),$FixedtableContainer = $t("div");$(h - 200);$(h - 253);});最后贴出部分代码（bootstarpTalbe初始）var columns = [];var t1 = { field : 'name', title : '姓名' ,align: 'center', valign: 'middle',width:120};var t2 = { field : 'username', title : '账号' ,align: 'center', valign: 'middle',width:120};var t3 = { field : 'deptName', title : '部门' ,align: 'center', valign: 'middle',width:120};var t4 = { field : 'groupName', title : '考勤组' ,align: 'center', valign: 'middle',width:120};(t1);(t2);(t3);(t4);var h = $(window).height() - 100;$('#table').bootstrapTable("destroy").bootstrapTable({method : 'get', // 服务器数据的请求⽅式 get or posturl : "/attendance/record/recordList", // 服务器数据的加载地址height:h,iconSize : 'outline',striped : true, // 设置为true会有隔⾏变⾊效果dataType : "json", // 服务器返回的数据类型pagination : true, // 设置为true会在底部显⽰分页条// queryParamsType : "limit",// //设置为limit则会发送符合RESTFull格式的参数singleSelect : false, // 设置为true将禁⽌多选// contentType : "application/x-www-form-urlencoded",// //发送到服务器的数据编码类型pageList: [ 5, 10, 20],pageSize : 5, // 如果设置了分页，每页数据条数pageNumber : 1, // 如果设置了分布，⾸页页码//search : true, // 是否显⽰搜索框showColumns : false, // 是否显⽰内容下拉框（选择显⽰的列）sidePagination : "server", // 设置在哪⾥进⾏分页，可选值为"client" 或者 "server"queryParams : function(params) {return {//说明：传⼊后台的参数包括offset开始索引，limit步长，sort排序列，order：desc或者,以及所有列的键值对limit: ,offset:};},columns:columns,fixedColumns: true,fixedNumber: 5});$("#table").colResizable();};
发布评论