在bootstraptable表头中添加筛选条件

最新推荐文章于 2025-01-09 10:40:00 发布

chen_xionxion

最新推荐文章于 2025-01-09 10:40:00 发布

阅读量4.8k

点赞数

分类专栏： JAVA 文章标签： javascript 前端 bootstrap

本文链接：https://blog.csdn.net/Adobe_java/article/details/122079898

版权

JAVA 专栏收录该内容

29 篇文章

订阅专栏

本文介绍如何在BootstrapTable中添加表头筛选条件，通过代码示例展示如何实现自定义搜索框，包括文本、下拉菜单和弹窗多选搜索功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文在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();
}