本文在bootstraptable表头添加筛选条件,代码如下:
var personStatuCode = ""; //保存查询的状态值
function iniTable() {
let $table = $("#table");
$table.bootstrapTable("destroy");
$table.bootstrapTable({
method: "post",
dataType: "json",
contentType: "application/json",
url: "",
dataField: "rows",
queryParamsType: "json",
queryParams: function (params) {
return {
"pageNum": params.pageNumber,
"pageSize": params.pageSize,
...
"personStatu": personStatuCode
};
},
pageNumber: 1,
pagination: true,
sidePagination: "server",
pageSize: 10,
pageList: [5, 10, 20, 30, 50, 100],
striped: false,
clickToSelect: true,
search: true,
locale: "zh-CN",
onPostHeader: function () {
//刷新完列表,表头也跟着刷新了,所以把状态值复制进去
//保证选择筛选条件后列表刷新完还是选择的刚刚选择的条件,不然每次选择完条件显示的都是默认的选项
$("#personStatu").val(personStatuCode)
},
columns: [
{
field: 'checked',
checkbox: true,
},
{
title: "姓名",
field: "name",
align: "center",
},
{
title: "<select id='personStatu' class='form-control' style='width: 100%;padding:6px 0px;' οnchange='filtrate()'>" +
"<option value=''>全部状态</option>" +
"<option value='0'>在职</option>" +
"<option value='1'>病假</option>" +
"<option value='2'>事假</option>" +
"<option value='3'>产假</option>" +
"</select>",
field: "personStatu",
align: "center",
formatter: function (value, row, index) {
if (value === "0") {
return "<span style='color:lightgreen;font-weight: bold'>在职</span>";
} else {
return "<span style='color:red;font-weight: bold'>" + personStatu[value] + "</span>";
}
}
}
...
]
});
}
function filtrate(){
//保存状态值
personStatuCode = $("#personStatu").val();
//并刷新列表
iniPersonTable();
}
还可以增加一层表头、搜索框、多选等等,具体可以看下方链接。
参考文章
bootstraptable表头添加自定义搜索框(带文本,下拉,弹窗多选搜索)
更多推荐
在bootstraptable表头中添加筛选条件
发布评论