以下是我使用bootstrap-table渲染表格,但是表格表头不固定,应该怎么修改,谢谢
$('#tb_modu').bootstrapTable({
url: '/Module/get_modu', //请求后台的URL(*)
method: 'get', //请求方式(*)
toolbar:"#tlb_modu",
cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
pagination: true, //是否显示分页(*)
sortable: true, //是否启用排序
sortOrder: "asc", //排序方式 从小到大
queryParams: function (params) {
var temp = { //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的
limit: params.limit, //页面大小
offset: params.offset, //页码
search: '{"modu_code":"' + params.search + '","modu_name":"' + params.search + '","modu_state":"' + $('#conditions').val() + '"}'
};
return temp;
},//传递参数(*)
sidePagination: "server", //分页方式:client客户端分页,server服务端分页(*)
pageNumber: 1, //初始化加载第一页,默认第一页
pageSize: 100, //每页的记录行数(*)
pageList: [100, 150, 250, 500], //可供选择的每页的行数(*)
search: true, //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大
showColumns: true, //是否显示所有的列
showRefresh: true, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
height: $('.modu').height(),
uniqueId: 'modu_id', //每一行的唯一标识,一般为主键列
showToggle: false, //是否显示详细视图和列表视图的切换按钮
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
searchOnEnterKey: true,
showExport: true, //显示导出按钮
exportDataType: 'all', //导出类型
treeShowField: 'modu_name',
idField: 'modu_id',
parentIdField: 'modu_modu_id',
singleSelect: true,
onLoadSuccess: function (data) {
},
columns: [{
checkbox: true
}, {
field: 'modu_id',
title: '模块id',
visible: false,
formatter: function (value, row, index) {
if (row.disable_time != null) {
var a = '<span style="color:red;">' + value + '</span>';
} else {
var a = '<span>' + value + '</span>';
}
return a;
},
}, {
field: 'modu_modu_id',
title: '上级模块id',
visible: false,
formatter: function (value, row, index) {
if (row.disable_time != null) {
var a = '<span style="color:red;">' + value + '</span>';
} else {
var a = '<span>' + value + '</span>';
}
return a;
},
}, {
field: 'modu_code',
title: '模块编码',
formatter: function (value, row, index) {
if (row.disable_time != null) {
var a = '<span style="color:red;">' + value + '</span>';
} else {
var a = '<span>' + value + '</span>';
}
return a;
},
}, {
field: 'modu_name',
title: '模块名称',
formatter: function (value, row, index) {
if (row.disable_time != null) {
var a = '<span style="color:red;">' + value + '</span>';
} else {
var a = '<span>' + value + '</span>';
}
return a;
},
}, {
field: 'modu_url',
title: '模块url',
visible: false,
formatter: function (value, row, index) {
var val = (value == null ? '-' : value);
if (row.disable_time != null) {
var a = '<span style="color:red;">' + val + '</span>';
} else {
var a = '<span>' + val + '</span>';
}
return a;
},
}, {
field: 'modu_type_name',
title: '模块类型',
visible: false
}, {
field: 'modu_app_name',
title: '移动端模块',
visible: false,
formatter: function (value, row, index) {
if (row.modu_app_name == null) {
var a = '否';
} else {
var a = value;
}
return a;
}
}, {
field: 'modu_ico',
title: '模块图标',
visible: false
}, {
field: 'modu_app_ico',
title: '移动端图标',
visible: false
}, {
field: 'modu_desc',
title: '模块描述',
formatter: function (value, row, index) {
var val = (value == null ? '-' : value);
if (row.disable_time != null) {
var a = '<span style="color:red;">' + val + '</span>';
} else {
var a = '<span>' + val + '</span>';
}
return a;
},
}, {
field: 'create_user_id',
title: '创建人id',
visible: false
}, {
field: 'creator',
title: '创建人',
formatter: function (value, row, index) {
if (row.disable_time != null) {
var a = '<span style="color:red;">' + value + '</span>';
} else {
var a = '<span>' + value + '</span>';
}
return a;
},
}, {
field: 'create_time',
title: '创建时间',
formatter: function (value, row, index) {
if (row.disable_time != null) {
var a = '<span style="color:red;">' + value + '</span>';
} else {
var a = '<span>' + value + '</span>';
}
return a;
},
}, {
field: 'disable_time',
title: '停用时间',
visible: false,
formatter: function (value, row, index) {
var val = (value == null ? '-' : value);
if (row.disable_time != null) {
var a = '<span style="color:red;">' + val + '</span>';
} else {
var a = '<span>' + val + '</span>';
}
return a;
},
}]
});
bootstrap table支持js中配置和Html中对table配置两种方式,建议将通用配置放到js,每个表格不一样的在html中,如下
<thead>
<tr>
<th data-field="Code" data-width="105px">编号</th>
<th data-field="Name" data-switchable="false">姓名</th>
<th data-field="Sex" data-width="120px">性别</th>
<th data-field="Age" data-width="120px">年龄</th>
<th data-field="LoloOperate" data-width="30px">操作</th>
</tr>
</thead>
如果再想进一步“动态”,可以动态生成这部分th