bootstrap-table 使用遇到的问题总结

时间:2024-08-16 23:37:02

bootstrap-table 使用遇到的问题总结

问题一:右上角button样式自定义

  方法:

//修改bootstrap-table右上角按钮样式
$(".table-box .columns-right button").removeClass("btn-secondary").css({"backgroundColor": "#fafafa","border": "1px solid #c2c2c2","color": "#333333"});

问题二:.右上角引用图标自定义

iconsPrefix: 'fa',                        //定义图标集名称('glyphicon'或'fa'FontAwesome)。默认情况下'fa'用于Bootstrap v4。
icons: {
refresh: 'fa-refresh',
columns: 'fa-th-list',
toggleOff: 'fa-toggle-off',
toggleOn: 'fa-toggle-on',
detailOpen: 'fa-plus',
detailClose: 'fa-minus',
fullscreen: 'fa-arrows-alt'
},

问题三:表头/表格内容显示不对齐

//在文件【bootstrap-table.js】中找到BootstrapTable.prototype.resetView方法,将其中的

this.resetHeader();
padding += this.$header.outerHeight(); //这两句代码注释掉。

问题四:自定义设置表头及表格边框样式

.fixed-table-container thead th , .fixed-table-container tbody td{
border:0px;
border-bottom: 1px solid #c2c2c2;
}
rowStyle: function (row, index) {
return {
css: {
"border": "0px",
"border-bottom":"1px solid red",//此处设置border后,复选框一列没有border值,最好还是用css设置tr的border
"height": "30px",
"padding": "0 10px"
}
};
},

问题五:表格宽度自适应

columns参数中设置固定宽度width: '70'。当页面宽度大于表格总宽度时,表格会自动放宽,

问题六:提交数据后,后台接受到的值为null。设置contentType后,问题解决

contentType: "application/x-www-form-urlencoded",//发送到服务器的数据编码类型

问题七:sortName设置的跟接口文档中字段名称一致,但加载页面报500。修改为与数据库一致后,问题解决

sortName: "user_login_name",            //名称要与数据库一致

问题八:提交数据后,刷新table

$("#userTable").bootstrapTable("refresh", {
silent: true //静态刷新
});

问题九:自定义查询条件配置

queryParams : function (params) {
//这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的
var temp = {
size: params.limit, //页面大小
current: (params.offset / params.limit) + 1, //页码
sort: params.sort, //排序列名
sortOrder: params.order, //排位命令(desc,asc)
userName : $("#search-user-name").val(),
userState : $("#search-user-state").val()
};
return temp;
},

问题十: 获取选中行的数据,根据返回值的length判断是否有选中的数据

var checkedRows = $("#userTable").bootstrapTable('getSelections');
if(checkedRows.length == 0){
layer.msg("请先选择需要删除的数据!");
}else if(checkedRows.length >= 1){
……
}