bootstraptable表头添加自定义搜索框（带文本,下拉,弹窗多选搜索）

已于 2022-02-28 08:05:36 修改
阅读量1.4w 收藏 61
点赞数 12
分类专栏： javascript bootstraptable 文章标签： bootstrap bootstraptable 列表搜索 table搜索 javascript
于 2021-01-25 10:40:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq243348167/article/details/113104285
版权

该示例是在bootstraptable表头每个字段上方新增了一行用于删选过滤，比较适用于多字段多筛选的报表开发，下面是表格具体功能演示：

前端代码

实现原理：使用bootstraptable多表头功能，在原有的表头基础上又新增了一行表头，并使用表头的title参数格式化搜索条件（比如：title: '<input type="text"  placeholder="客户" class="form-control" id="sCustomer" />'）

1、html部分

<div class="row">
    <div class="col-xs-12">
        <table id="table" style="width: 100%;">
        </table>
    </div>
</div>

2、JavaScript部分

var $table = $('#table');
var $table_queryParams = {};
var WorkProcedureIn_arry = [];
var WorkProcedureNotIn_arry = [];
//脚本入口
$(document).ready(function () {
    initTable();
    $(window).bind('keypress', function (event) {
        if (event.keyCode == "13") {
            Refresh();
        }
    });
});
//获取用户选择的筛选条件参数
function queryParams() {
    var _WorkProcedureIn = "";
    for (var i = 0; i < WorkProcedureIn_arry.length; i++) {
        _WorkProcedureIn += WorkProcedureIn_arry[i] + ",";
    }
    var _WorkProcedureNotIn = "";
    for (var i = 0; i < WorkProcedureNotIn_arry.length; i++) {
        _WorkProcedureNotIn += WorkProcedureNotIn_arry[i] + ",";
    }
    return {
        sCardNo: $("#sCardNo").val(),
        sMaterialLot: $("#sMaterialLot").val(),
        sCustomer: $("#sCustomer").val(),
        orderType: $("#orderType").val(),
        sMaterialTypeName: $("#sMaterialTypeName").val(),
        operationMode: $("#operationMode").val(),
        sChemicalGroup: $("#sChemicalGroup").val(),
        colorSeries: $("#colorSeries").val(),
        preProcessesQty: $("#preProcessesQty").val(),
        WorkProcedureIn: _WorkProcedureIn,
        WorkProcedureNotIn: _WorkProcedureNotIn
    };
}
//清空用户选择的筛选条件
function ClearCondition() {
    $("#sCardNo").val("");
    $("#sMaterialLot").val("");
    $("#sCustomer").val("");
    $("#orderType").val("");
    $("#sMaterialTypeName").val("");
    $("#operationMode").val("");
    $("#sChemicalGroup").val("");
    $("#colorSeries").val("");
    $("#preProcessesQty").val("");
    WorkProcedureIn_arry = [];
    WorkProcedureNotIn_arry = [];
    Refresh();
}
//初始化表格
function initTable() {
    $.post("/CommonModule/PM_CardNoProgressTrack/GetList", queryParams(), function (result, resultState) {
        $table.bootstrapTable({
            data: result,   //请求后台的URL（*）
            method: 'post',      //请求方式（*）
            toolbar: '#Toolbar',    //工具按钮用哪个容器
            striped: false,      //是否显示行间隔色
            cache: false,      //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: false,     //是否显示分页（*）
            sortable: false,      //是否启用排序
            sortOrder: "asc",     //排序方式
            queryParams: queryParams, //传递参数（*）
            sidePagination: "client",   //分页方式：client客户端分页，server服务端分页（*）
            pageSize: 50,
            pageList: [50, 100, 150, 200],  //可供选择的每页的行数（*）
            search: false,      //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
            strictSearch: false,
            showColumns: false,     //是否显示所有的列
            showRefresh: false,     //是否显示刷新按钮
            minimumCountColumns: 2,    //最少允许的列数
            clickToSelect: true,    //是否启用点击选中行
            height: $(window).height() - 80,      //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            uniqueId: "sCardNo",      //每一行的唯一标识，一般为主键列
            showToggle: false,     //是否显示详细视图和列表视图的切换按钮
            cardView: false,     //是否显示详细视图
            detailView: false,     //是否显示父子表
            iconSize: 'outline',
            onPostHeader: function () {
                InitFilter(result);
                for (var items in $table_queryParams) {
                    $("#" + items).val($table_queryParams[items]);
                }
            },
            columns: [
        [{
            field: 'state',
            align: 'center',
            valign: 'middle',
            title: ' ',
            width: 20,
            colspan: 1,
            rowspan: 1
        }, {
            width: '105px',
            title: '<button class="btn btn-primary" type="button" onclick="MultiplePayByCard()" style="padding:8px 4px;">下卡</button>'+
                   '<button class="btn btn-primary" type="button" onclick="ClearCondition()" style="padding:8px 4px;margin-left:6px;">清空</button>',
            colspan: 1,
            rowspan: 1
        }, {
            width: '90px',
            title: '<input type="text"  placeholder="卡号" class="form-control" id="sCardNo" />',
            colspan: 1,
            rowspan: 1
        }, {
            width: '90px',
            title: '<input type="text"  placeholder="批号" class="form-control" id="sMaterialLot"  />',
            colspan: 1,
            rowspan: 1
        }, {
            width: '100px',
            title: '<input type="text"  placeholder="客户" class="form-control" id="sCustomer" />',
            colspan: 1,
            rowspan: 1
        }, {
            width: '90px',
            title: '<select id="orderType"  class="form-control" style="width: 100%;padding:6px 0px;" onchange="Refresh()">' +
                        '<option value=""></option>' +
                        '<option value="订单">订单</option>' +
                        '<option value="市场">市场</option>' +
                    '</select>'
        }, {
            width: '90px',
            title: '<select id="operationMode"  class="form-control" style="width: 100%;padding:6px 0px; " onchange="Refresh()"></select>',
            colspan: 1,
            rowspan: 1
        }, {
            width: '180px',
            title: '<input type="text"  placeholder="物料大类" class="form-control" id="sMaterialTypeName" />',
            colspan: 1,
            rowspan: 1
        }, {
            width: '90px',
            title: '<select id="colorSeries"  class="form-control" style="width: 100%;padding:6px 0px; " onchange="Refresh()"></select>',
            colspan: 1,
            rowspan: 1
        }, {
            width: '80px',
            title: '',
            colspan: 1,
            rowspan: 1
        }, {
            width: '70px',
            title: '',
            colspan: 1,
            rowspan: 1
        },
        {
            width: '90px',
            title: '<select id="sChemicalGroup"  class="form-control" style="width: 100%;padding:6px 0px; " onchange="Refresh()"></select>',
            colspan: 1,
            rowspan: 1
        }, {
            width: '300px',
            title: '<input type="text"  placeholder="工序道数" class="form-control" id="preProcessesQty" style="width: 90px;float:left;margin-right:6px;" />' +
                   '<button class="btn btn-primary" type="button" onclick="WorkProcedureIn()" style="float:left;margin-right:6px;">包含</button>' +
                   '<button class="btn btn-primary" type="button" onclick="WorkProcedureNotIn()" style="float:left;margin-right:6px;">不包含</button>',
            colspan: 1,
            rowspan: 1

        }],
        [{
            field: 'state',
            checkbox: true,
            align: 'center',
            valign: 'middle',
            width: 20
        }, {
            width: '90px',
            title: '开卡日期',
            field: 'tCreateTime',
            formatter: function (value, item, index) {
                return value.substr(0, 10);
            }
        }, {
            width: '90px',
            title: '卡号',
            field: 'sCardNo'
        }, {
            width: '90px',
            title: '批号',
            field: 'sMaterialLot'
        }, {
            width: '100px',
            title: '客户',
            field: 'sCustomerFullName'
        }, {
            width: '90px',
            title: '订单类型',
            field: 'orderType'
        }, {
            width: '90px',
            title: '经营方式',
            field: 'operationMode'
        }, {
            width: '180px',
            title: '品种信息',
            field: 'sMaterialName'
        }, {
            width: '110px',
            title: '色号/色名',
            formatter: function (value, item, index) {
                return item.sColorNo + "<br/>" + item.sColorName;
            }
        }, {
            width: '80px',
            title: '颜色',
            formatter: function (value, item, index) {
                return "<div style='width:100%;height:30px;background:#" + item.IRGB_EXT + "'></div>";
            }
        }, {
            width: '70px',
            field: 'nPlanOutputQty',
            title: '计划米数'
        },
        {
            width: '90px',
            title: '配方组合',
            formatter: function (value, item, index) {
                return item.sChemicalGroup;
            }
        }, {
            width: '300px',
            title: '前处理工序进度',
            formatter: function (value, item, index) {
                var _sWorkingProcedureName = "";

                for (var i = 0; i < item.CardNoProgressTrack_ProgressList.length; i++) {
                    (function (j) {
                        if (item.CardNoProgressTrack_ProgressList[j].bIsCurrent == 1) {
                            _sWorkingProcedureName += "<span>";
                        } else if (item.CardNoProgressTrack_ProgressList[j].bIsComplete == 1) {
                            _sWorkingProcedureName += "<span style='color:#1ab394;'>";
                        } else if (item.CardNoProgressTrack_ProgressList[j].bIsComplete == 0) {
                            _sWorkingProcedureName += "<span style='color:#999;'>";
                        }
                        _sWorkingProcedureName += item.CardNoProgressTrack_ProgressList[j].sWorkingProcedureName;
                        _sWorkingProcedureName += "</span>-";
                    })(i)
                }
                if (_sWorkingProcedureName.length > 0) {
                    _sWorkingProcedureName = _sWorkingProcedureName.substr(0, _sWorkingProcedureName.length - 1);
                }
                return _sWorkingProcedureName;
            }
        }]
        ]
        });
    }, "json");
}
//初始化过滤下拉内容
function InitFilter(data) {
    var operationMode_arry = [''];
    var colorSeries_arry = [''];
    var sChemicalGroup_arry = [''];
    for (var i = 0; i < data.length; i++) {
        if (operationMode_arry.indexOf(data[i].operationMode) == -1 && data[i].operationMode != null) {
            operationMode_arry.push(data[i].operationMode);
        };
        if (colorSeries_arry.indexOf(data[i].colorSeries) == -1 && data[i].colorSeries != null) {
            colorSeries_arry.push(data[i].colorSeries);
        };
        if (sChemicalGroup_arry.indexOf(data[i].sChemicalGroup) == -1 && data[i].sChemicalGroup != null) {
            sChemicalGroup_arry.push(data[i].sChemicalGroup);
        };
    }
    var operationMode_option = "";
    for (var i = 0; i < operationMode_arry.length; i++) {
        operationMode_option += '<option value="' + operationMode_arry[i] + '">' + operationMode_arry[i] + '</option>';
    }
    $("#operationMode").append(operationMode_option);
    var colorSeries_option = "";
    for (var i = 0; i < colorSeries_arry.length; i++) {
        colorSeries_option += '<option value="' + colorSeries_arry[i] + '">' + colorSeries_arry[i] + '</option>';
    }
    $("#colorSeries").append(colorSeries_option);
    var sChemicalGroup_option = '';
    for (var i = 0; i < sChemicalGroup_arry.length; i++) {
        sChemicalGroup_option += '<option value="' + sChemicalGroup_arry[i] + '">' + sChemicalGroup_arry[i] + '</option>';
    }
    $("#sChemicalGroup").append(sChemicalGroup_option);
}
//刷新列表
function Refresh() {
    $table_queryParams = queryParams();
    $.post("/CommonModule/PM_CardNoProgressTrack/GetList", queryParams(), function (result, resultState) {
        $table.bootstrapTable('load', result);
    }, "json");
}
//多选弹窗
function WorkProcedureIn() {
        var index = layer.open({
            btn: ['确认', '取消'], //按钮
            yes: function (index, layero) {
                var data = parent.$("#layui-layer-iframe" + index)[0].contentWindow.getData();
                WorkProcedureIn_arry = [];
                for (var i = 0; i < data.length; i++) {
                    WorkProcedureIn_arry.push(data[i].Name);
                }
                Refresh();
                layer.close(index);
            }, btn2: function (index, layero) {
                layer.close(index);
            },
            type: 2,
            title: '工序',
            area: ['300px', '500px'],
            shadeClose: true, //开启遮罩关闭
            content: '/CommonModule/PM_CardNoProgressTrack/WorkProcedureList',
            success: function (layero, index) {
                parent.$("#layui-layer-iframe" + index)[0].contentWindow.setSelections(WorkProcedureIn_arry);

            }
        });
    }

3、弹窗代码


<table id="table">
</table>

<script>
    var $table = $('#table');

    $(document).ready(function () {
        initTable();
    });

    function queryParams(params) {
        var Parameters = [];
        return {
            order: params.order,
            limit: params.limit,
            offset: params.offset,
            ParameterJson: JSON.stringify(Parameters)
        };
    }

    function initTable() {
        $table.bootstrapTable({
            url: '@Url.Content("~/CommonModule/PM_CardNoProgressTrack/GetWorkProcedureList")',   //请求后台的URL（*）
            method: 'post',      //请求方式（*）
            toolbar: '#Toolbar',    //工具按钮用哪个容器
            striped: false,      //是否显示行间隔色
            cache: false,      //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: false,     //是否显示分页（*）
            sortable: false,      //是否启用排序
            sortOrder: "asc",     //排序方式
            queryParams: queryParams, //传递参数（*）
            sidePagination: "server",   //分页方式：client客户端分页，server服务端分页（*）
            pageList: [10, 25, 50, 100],  //可供选择的每页的行数（*）
            search: false,      //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
            strictSearch: false,
            showColumns: false,     //是否显示所有的列
            showRefresh: false,     //是否显示刷新按钮
            minimumCountColumns: 2,    //最少允许的列数
            clickToSelect: true,    //是否启用点击选中行
            height: 400,      //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            uniqueId: "Code",      //每一行的唯一标识，一般为主键列
            showToggle: false,     //是否显示详细视图和列表视图的切换按钮
            cardView: false,     //是否显示详细视图
            detailView: false,     //是否显示父子表
            iconSize: 'outline',
            columns: [{
                field: 'state',
                checkbox: true,
                align: 'center',
                valign: 'middle'
            }, {
                field: 'Name',
                title: '工序'
            }]
        });
    }
    function getData() {
        return $table.bootstrapTable('getSelections');
    }
    function setSelections(data) {
        setTimeout(function () {
            $table.bootstrapTable('checkBy', { field: 'Name', values: data });
        }, 500);
    }
    function Refresh() {
        $table.bootstrapTable('refresh');
    }
</script>

搬砖狗-小强
关注
  • 12
    点赞
  • 踩
  • 61
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
SptingMVC整合bootstrap-table 初始化数据-自定义搜索-弹出模态框
weixin_44033084的博客
10-11 206
bootstrap-table 初始化数据-自定义刷新 今天在写项目的时候遇见一个bootstrap自定义搜索的问题 正好记录一下 废话不多 直接上代码 初始化数据 HTML <table id="mytab"></table> JS $(function(){ // 这里是生成自定义操作按钮 function addFunctionAlty(value, row, index) { var id=index;
bootstrap table列和表头对不齐的解决方法
10-16
主要为大家详细介绍了bootstrap table列和表头对不齐的解决方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Bootstrap Table 搜索框和查询功能
08-28
主要介绍了Bootstrap Table 搜索框和查询功能，非常不错，具有参考借鉴价值,需要的朋友可以参考下
BootStrap入门到实战：BootStrap组件（二）- 输入框组、导航、导航条、路径导航（面包屑效果）
最新发布
林林一928的博客
06-04 758
导航标签用于在网页上创建各种风格的导航栏，包括水平标签页、胶囊式标签页、垂直堆叠的胶囊式标签页、两端对齐的胶囊式标签页、禁用的链接以及带下拉菜单的标签页。bootstrap的导航条是一个高度可定制的界面组件，它不仅支持丰富的界面元素配置，还提供了灵活的空间布局策略。在实际运用场景中，输入组（Input Group）在Bootstrap框架中主要用于提高表单的可读性和用户友好性，通过将相关控件组合在一起，为用户提供更直观、更易于操作的表单体验。添加相应的尺寸类，其内部包含的元素将自动调整自身的尺寸。
基于bootstraptable封装一个过滤组件（带文本,下拉,弹窗多选搜索）
qinglp的博客
04-16 441
else{if(search_value == “包含待定色”){if(search_value == “待定色” && bootstrapFiterTableUtils.likeIsMacth(“待定色”, items.sColorName)){if(search_value == “不包含待定色” &&!bootstrapFiterTableUtils.likeIsMacth(“待定色”, items.sColorName)){
基于bootstrap实现信息收集卡 实现 导航栏 搜索框 以及表格的使用
weixin_46673625的博客
07-05 610
使用bootstrap实现信息收集卡 实现 导航栏 搜索框 以及表格的使用
Bootstrap-table 表头筛选控件
Moxice的博客
11-18 1万+
Bootstrap-table 表头筛选控件,根据Bootstrap-table API,在表头添加筛选排序，支持文本搜索，数值搜索，日期搜索，单选和复选。 依赖js jQuery,Bootstrap,Bootstrap-table,select2 筛选类型说明 1. 文本类型（text） 提供模糊搜索功能，根据输入的参数模糊匹配返回对应的结果 2. 数值类型(num) 提供区间搜索功能，所搜列必须为数值，可以搜索最小值和最大值之间的结果，也可以搜索所有大于最小值或小于最大值的结果。
Bootstrap输入框组---搜索框实例
gyueh的博客
03-17 3894
搜索框样式1 <div class="col-lg-2 col-md-3 col-sm-3 col-xs-4 pull-right"> <div class="input-group"> <input type="text" class="form-control" placeholder="输入搜索内容"> <span class="in...
Bootstrap-table 自定义搜索--queryParams
qq_40890601的博客
07-10 1万+
页面效果如下所示： 因为插件自带的搜索没有特定的搜索列，所以搜索特定列就只能我们自己设置了 客户名称这个栏位只搜索客户名称，图纸编号只能搜索图纸编号 具体怎么实现呢？必须用到一个属性queryParams，初始化表格的时候先把toolbar设置好 我的toolbar，id为上面设置的toolbar <form class="form-inline " id="toolbar"> <input type="text" class="form-control mb-2 mr-s
Bootstrap3制作搜索框样式的方法
12-28
Bootstrap3中的很多样式，都是需要我们进行摸索着学习的，在制作类似百度的素搜索框时，一开始会不知道怎么做，其实很简单，利用内联图标方式就可以实现 <div class=input-group> <input type=text class=form-control input-lg><span class=input-group-addon>搜索</span> </div> 通过’.input-group’将span内联到输入框，我们只需要在这个span上面加上按钮的样式，就可以实现一个很不错的搜索框。 以上所述是小编给大家介绍的
jQuery bootstrap带分页表格数据搜索筛选代码
11-11
jQuery bootstrap带分页表格数据搜索筛选代码
bootstrap table插件动态加载表头
10-16
主要为大家详细介绍了bootstrap table插件动态加载表头，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
基于Bootstrap table组件实现多层表头的实例代码
08-29
Bootstrap Table多层表头实现实例代码 Bootstrap Table是一个功能强大的表格组件，它提供了许多有用的功能，包括多层表头的实现。在本文中，我们将分享基于Bootstrap Table组件实现多层表头的实例代码。 多层表头...
BootstrapTable后台分页和自定义查询前台后台
Hello_Old_Luo的博客
05-08 2369
bootstraptable是一款很好用的表格插件，自己浅浅的使用了一下，插件的属性事件就不再赘述，附上官网网址：官网：http://bootstrap-table.wenzhixin.net.cn/文档网址：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/使用bootstrap记得引用bootstrap.js和jquery....
bootstrap-table 怎么自定义搜索按钮实现点击按钮进行查询
weixin_30760895的博客
07-28 3247
bootstrap-table自带搜索框感觉有点丑，我们可以把搜索功能单独拉出来放到页面的某一个位置。 首先我们看一下官方演示： 如果你感觉集成的检索框不太好看，而且我们也不想让搜索框和列表放到一块去。那我们怎么来自定义一个属于自己的搜索框吧！首先我们看看这段代码： BootstrapTable.prototype.resetSearch = function (text) { ...
bootstroop table 自定义搜索
changliangwl的专栏
12-07 2077
bootstrap table自定义搜索字段（后台）
bootstrap-table 点击列头进行排序，搜索
热门推荐
我本名叫一休的博客
04-12 5万+
bootstrap-table 点击列头进行排序，搜索
layui table 的表头添加自定义图片
06-10
可以使用 layui 的 table 模块的 templet 属性来实现表头添加自定义图片的效果。具体操作如下： 1. 在表头中使用 templet 属性来自定义表头内容，例如： ```html <th lay-data="{field:'img', templet:'#imgTpl'}">图片</th> ``` 2. 在页面中添加模板代码： ```html <script type="text/html" id="imgTpl"> <img src="图片路径" alt="图片描述"> </script> ``` 其中，#imgTpl 是模板的 ID，可以根据需要自行修改。 3. 在 JavaScript 代码中使用 table 模块的 render() 方法来渲染表格，例如： ```javascript layui.use('table', function(){ var table = layui.table; //渲染表格 table.render({ elem: '#test', url: '/demo/table/user/', cols: [[ {field:'id', title:'ID', width:80}, {field:'username', title:'用户名', width:120}, {field:'img', title:'图片', templet:'#imgTpl'}, {field:'email', title:'邮箱', width:150}, {field:'sign', title:'签名', width:200}, {field:'sex', title:'性别', width:80}, {field:'city', title:'城市', width:100}, {field:'experience', title:'积分', width:80}, {field:'ip', title:'IP', width:120}, {field:'logins', title:'登入次数', width:100}, {field:'joinTime', title:'加入时间', width:120}, ]] }); }); ``` 在上述代码中，#test 是 table 的 ID，/demo/table/user/ 是表格数据的接口地址。其中，cols 数组定义了表格的列，包括自定义的图片列。 通过上述方法，就可以实现 layui table 的表头添加自定义图片的效果了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

搬砖狗-小强

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值