基于bootstraptable封装一个过滤组件（带文本,下拉,弹窗多选搜索）

最近公司基于bootshraptable的表格过滤条件做的特别多，每个过滤框都要去写一个方法积压了一大堆方法，每次改动也非常麻烦，然后就基于之前的开发封装了一个通用过滤组件，下面是表格具体功能演示：

组件参数

 url: "",--获取表格数据的url
 filterData: {
     userName: { field: "userName", dataType: "text", defaultValue: null, mode: "server" },
     gender: { field: "gender",dataType: "dropDown" , data: [{ value:"1",name:"男"},{ value:"2",name:"女"}], defaultValue: null, mode: "client", title :"性别" },
     education: { field: "education", dataType: "pop", data: [], defaultValue: null, mode: "client"  },
     workProcedureIn:{ field: "workProcedureIn", dataType: "hidde", data: [], value:[], defaultValue: null, mode: "client" },
 },
     -- 过滤参数
     -- filterData 中的字段名会当做过滤参数的字段名称
     -- field 原表格数据字段名，会根据原表格列表数据汇总到data
     -- dataType 过滤类型 text dropDown pop hidde
     -- title 标题
     -- defaultValue 过滤控件默认值
     -- mode server 后台重新拉数据， client 前台根据原数据过滤
     -- data 如果为空，则会根据原表格数据汇总，有值则不加载原表格数据
     -- sortFunc 过滤条件排序函数
     -- fiterName:name(count)根据名字求和
 target: "",--表格元素的ID
 tableRefresh: function (tableDataList, filterData) {
        return tableDataList.filter(function (items) {
               var isMacth = true;
               if (isMacth && bootstrapFiterTableUtils.likeIsMacth(filterData.userName, items.userName)) { isMacth = true; } else { isMacth = false; };
               if (isMacth && bootstrapFiterTableUtils.equalIsMacth(filterData.gender, items.gender)) { isMacth = true; } else { isMacth = false; };
               return isMacth;
        })          
 }--刷新
 linkage:false --是否联动

代码示例

js部分

    var $table1 = $('#table1');    

    $(function () {
        initTable1();
        initBootstrapFiterTable1();
    })
    var bootstrapFiterTable1 = {};
    
    function initBootstrapFiterTable1() {
        bootstrapFiterTable1 = new bootstrapFiterTable({
            url: "/GetList",
            filterData: {
                sWorkingProcedureName: { field: "sWorkingProcedureName", dataType: "hidde", data: null, value: GetQuery1("sWorkingProcedureName"), defaultValue: null, mode: "server" },
                startDate: { field: "startDate", dataType: "text", defaultValue: null, mode: "server" },
                endDate: { field: "endDate", dataType: "text", defaultValue: null, mode: "server" },
                sCardNo: { field: "sCardNo", dataType: "text", defaultValue: null, mode: "client"  },
                sWorkCentreName: { field: "sWorkCentreName", dataType: "dropDown", data: [], defaultValue: null, mode: "client",title:"车间" },
                sMaterialLot: { field: "sMaterialLot", dataType: "text", defaultValue: null, mode: "client"  },
                sCustomerFullName: { field: "sCustomerFullName", dataType: "pop", data: [], defaultValue: null, fiterName: 'name(count)', mode: "client" },
                orderType: { field: "orderType", dataType: "dropDown", data: [], defaultValue: null, mode: "client", title:"订单类型" },
                operationMode: { field: "operationMode", dataType: "pop", data: [], defaultValue: null, mode: "client"  },
                sMaterialTypeName: { field: "sMaterialTypeName", dataType: "pop", data: [], defaultValue: null, mode: "client"  },
                sColorName: { field: "sColorName",dataType: "dropDown"
                            , data: [
                                        { value:"包含待定色",name:"包含待定色"},
                                        { value:"待定色",name:"待定色"},
                                        { value:"不包含待定色",name:"不包含待定色"},
                                        { value:"不包含公共色号",name:"不包含公共色号"}
                                    ]
                            , defaultValue: null, mode: "client" },
                sChemicalGroup: { field: "sChemicalGroup", dataType: "dropDown", data: [], defaultValue: null, mode: "client", title :"配方"  },
                colorSeries: { field: "colorSeries", dataType: "dropDown", data: [], defaultValue: null, mode: "client", title: "色系分组"  },
                ProductionSign: { field: "ProductionSign", dataType: "pop", data: [], defaultValue: null, mode: "client"  },
                workProcedureIn:{ field: "workProcedureIn", dataType: "hidde", data: [], value:[], defaultValue: null, mode: "client" },
                workProcedureNotIn:{ field: "workProcedureNotIn", dataType: "hidde", data: [], value:[], defaultValue: null, mode: "client" },
                classes: { field: "Classes", dataType: "pop", data: [], defaultValue: null, mode: "client",sortFunc:classesSort  },
                cylinderNo: { field: "CylinderNo", dataType: "pop", data: [], defaultValue: null, mode: "client" }
            },
            target: "table1",
            tableRefresh: function (tableDataList, filterData) {
                return tableDataList.filter(function (items) {
                    var isMacth = true;
                    if (isMacth && bootstrapFiterTableUtils.likeIsMacth(filterData.sCardNo, items.sCardNo)) { isMacth = true; } else { isMacth = false; };
                    if (isMacth && bootstrapFiterTableUtils.equalIsMacth(filterData.sWorkCentreName, items.sWorkCentreName)) { isMacth = true; } else { isMacth = false; };
                    if (isMacth && bootstrapFiterTableUtils.likeIsMacth(filterData.sMaterialLot, items.sMaterialLot)) { isMacth = true; } else { isMacth = false; };
                    if (isMacth && bootstrapFiterTableUtils.equalIsMacth(filterData.sCustomerFullName, items.sCustomerFullName)) { isMacth = true; } else { isMacth = false; };
                    if (isMacth && bootstrapFiterTableUtils.equalIsMacth(filterData.orderType, items.orderType)) { isMacth = true; } else { isMacth = false; };
                    if (isMacth && bootstrapFiterTableUtils.multipleEqualIsMacth(filterData.operationMode, items.operationMode)) { isMacth = true; } else { isMacth = false; };
                    if (isMacth && bootstrapFiterTableUtils.multipleEqualIsMacth(filterData.sMaterialTypeName, items.sMaterialTypeName)) { isMacth = true; } else { isMacth = false; };
                    if (isMacth && sColorNameIsMacth(filterData.sColorName,items)){ isMacth = true;}else{ isMacth = false;};
                    if (isMacth && bootstrapFiterTableUtils.equalIsMacth(filterData.sChemicalGroup, items.sChemicalGroup)) { isMacth = true; } else { isMacth = false; };
                    if (isMacth && colorSeriesIsMacth(filterData.colorSeries, items)) { isMacth = true; } else { isMacth = false; };
                    if (isMacth && bootstrapFiterTableUtils.multipleEqualIsMacth(filterData.ProductionSign, items.ProductionSign)) { isMacth = true; } else { isMacth = false; };
                    if (isMacth && workProcedureInIsMacth(bootstrapFiterTable1.option.filterData.workProcedureIn.value,items)){ isMacth = true;}else{ isMacth = false;};
                    if (isMacth && workProcedureNotInIsMacth(bootstrapFiterTable1.option.filterData.workProcedureNotIn.value, items)) { isMacth = true; } else { isMacth = false; };
                    if (isMacth && bootstrapFiterTableUtils.multipleEqualIsMacth(filterData.classes, items.Classes)) { isMacth = true; } else { isMacth = false; };
                    if (isMacth && bootstrapFiterTableUtils.equalIsMacth(filterData.cylinderNo, items.CylinderNo)) { isMacth = true; } else { isMacth = false; };
                    return isMacth;
                })
            },
            linkage:true
        });
        bootstrapFiterTable1.init();
    }
    function classesSort(a, b) {
        var _a = "";
        var _b = "";
        var _a1 = 0;
        var _b1 = 0;
        if (a.name == null) { _a = "1900-01-01_白班" } else { _a = a.name; if (_a.split('_')[1] == "白班") { _a1 = 0 } else { _a1 = 0.00001 } };
        if (b.name == null) { _b = "1900-01-01_白班" } else { _b = b.name; if (_b.split('_')[1] == "白班") { _b1 = 0 } else { _b1 = 0.00001 } };            
        return new Date(_a.split('_')[0]) - new Date(_b.split('_')[0]) + (_a1 -_b1);
    }
    function sChemicalGroupIsMacth(search_value,items){
        var isMacth = false;
        if(search_value  =="√"){
            if(items.sChemicalGroup != "" || items.sChemicalGroup != null){
                isMacth = true;
            }
        }else if(bootstrapFiterTableUtils.equalIsMacth(search_value,items.sChemicalGroup)){
            isMacth = true;
        }
        return isMacth;
    }
    function nPlanOutputQtyIsMacth(search_value,items){
        var isMacth = false;
        if(search_value == ""){
            isMacth = true;
        }else{
            if(parseFloat(search_value)<=items.nPlanOutputQty){
                isMacth = true;
            }
        }
        return isMacth;
    }
    function colorSeriesIsMacth(search_value,items){
        var isMacth = false;
        if(bootstrapFiterTableUtils.equalIsMacth(search_value,items.colorSeries)){
            isMacth = true;
        }
        if(search_value  == "公共色号" && items.sColorName  == "本白"){
            isMacth = false;
        }
        return isMacth;
    }
    function sColorNameIsMacth(search_value,items){
        var isMacth = false;
        if(search_value == ""){
            isMacth = true;
        }else{
            if(search_value == "包含待定色"){
                isMacth = true;
            }
            if(search_value == "待定色" && bootstrapFiterTableUtils.likeIsMacth("待定色", items.sColorName)){
                isMacth = true;
            }
            if(search_value == "不包含待定色" && !bootstrapFiterTableUtils.likeIsMacth("待定色", items.sColorName)){
                isMacth = true;
            }
            if(search_value == "不包含公共色号" && items.sColorNo.length >7){
                isMacth = true;
            }
            
        }
        return isMacth;
    }
    function iPrintCountIsMacth(search_value,items){
        var isMacth = false;
        if(search_value == ""){
            isMacth = true;
        }else{
            if(search_value == "未打印" && parseFloat(search_value) == 0){
                isMacth = true;
            }
        }
        return isMacth;
    }
    function workProcedureInIsMacth(search_value,items){
        var isMacth = false;
        if(search_value.length==0){
            isMacth = true;
        }else{
            search_value.forEach(function(search_items){
                if(bootstrapFiterTableUtils.likeIsMacth(";"+search_items+"-", items.workingProcedureList)){
                    isMacth = true;
                }
            })
        }
        return isMacth;
    }
    function workProcedureNotInIsMacth(search_value,items){
        var isMacth = true;
        if(search_value.length==0){
            isMacth = true;
        }else{
            search_value.forEach(function(search_items){
                if(!bootstrapFiterTableUtils.likeIsMacth(";"+search_items+"-", items.workingProcedureList)){
                    isMacth = false;
                }
            })
        }
        return isMacth;
    }
    function btn_workProcedureIn() {
        var index = layer.open({
            btn: ['确认', '取消'], //按钮
            yes: function (index, layero) {
                var data = parent.$("#layui-layer-iframe" + index)[0].contentWindow.getData();
                bootstrapFiterTable1.option.filterData.workProcedureIn.value = [];
                for (var i = 0; i < data.length; i++) {
                    bootstrapFiterTable1.option.filterData.workProcedureIn.value.push(data[i].Name);
                }
                bootstrapFiterTable1.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(bootstrapFiterTable1.option.filterData.workProcedureIn.value);

            }
        });
    }
    function btn_workProcedureNotIn() {
        var index = layer.open({
            btn: ['确认', '取消'], //按钮
            yes: function (index, layero) {
                var data = parent.$("#layui-layer-iframe" + index)[0].contentWindow.getData();
                bootstrapFiterTable1.option.filterData.workProcedureNotIn.value =[];
                for (var i = 0; i < data.length; i++) {
                    bootstrapFiterTable1.option.filterData.workProcedureNotIn.value.push(data[i].Name);
                }
                bootstrapFiterTable1.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(bootstrapFiterTable1.option.filterData.workProcedureNotIn.value);

            }
        });
    }
    function initTable1() {
        $table1.bootstrapTable({
            data: [],
            method: 'post',      //请求方式（*）
            striped: false,      //是否显示行间隔色
            cache: false,      //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,     //是否显示分页（*）
            sortable: true,      //是否启用排序
            sortOrder: "asc",     //排序方式
            sidePagination: "client",   //分页方式：client客户端分页，server服务端分页（*）
            pageList: [50, 100, 150, 200],  //可供选择的每页的行数（*）
            search: false,      //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
            strictSearch: false,
            showColumns: false,     //是否显示所有的列
            showRefresh: false,     //是否显示刷新按钮
            minimumCountColumns: 2,    //最少允许的列数
            clickToSelect: true,    //是否启用点击选中行
            height: $(window).height() - 130,      //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            uniqueId: "",      //每一行的唯一标识，一般为主键列
            showToggle: false,     //是否显示详细视图和列表视图的切换按钮
            cardView: false,     //是否显示详细视图
            detailView: false,     //是否显示父子表
            iconSize: 'outline',
            showFooter: true,
            columns:  [{
                width: '90px',
                title: '完成日期',
                field: 'tFactEndTime',
                sortable: true,
                formatter: function (value, item, index) {
                    return value.substr(0, 10);
                },
                footerFormatter: function (items) {
                    return "合计：";
                }
            }, {
                width: '130px',
                title: '卡号',
                field: 'sCardNo',
                formatter: function (value, item, index) {
                    var span ="";
                    span += item.sCardNo + "<br/>";
                    span += item.tCreateTime.substr(0,10) + "<br/>";
                    span += item.sWorkCentreName + "<br/>";
                    span += item.operationMode;
                    return span;
                },
                footerFormatter: function (items) {
                    var count = 0;
                    for (var i in items) {
                        count++;
                    }
                    return "合计：" + count;
                },
                sortable: true
            }, {
                width: '120px',
                title: '批号',
                field: 'sMaterialLot',
                formatter: function (value, item, index) {
                    var span ="";
                    span += item.sMaterialLot + "<br/>";
                    span += item.sCustomerFullName + "<br/>";
                    span += item.sSalesName + "<br/>";
                    span += item.orderType;
                    return span;
                },
                sortable: true
            }, {
                width: '100px',
                title: '品种',
                field: 'sMaterialName',
                formatter: function (value, item, index) {
                    var span ="";
                    span += item.sMaterialName + "<br/>";
                    span += Utils.isnull(item.ProofingClothState,'') + "<br/>";
                    return span;
                },
                sortable: true
            }, {
                width: '190px',
                title: '规格',
                sortable: true,
                field: 'OrderComponent'
            }, {
                width: '210px',
                title: '加工要求',
                sortable: true,
                field: 'OrderFinishingMethod',
                formatter: function (value, item, index) {
                    var span ="";
                    span += item.OrderFinishingMethod + "<br/>";
                    span += item.OrderRemark + "<br/>";
                    return span;
                }
            }, {
                width: '120px',
                title: '色号',
                field: 'sColorNo',
                formatter: function (value, item, index) {
                    var span ="";
                    span += item.sColorNo + "<br/>" + item.sColorName;
                    if(item.ProductionSign != null)
                    {
                        span += "<br/><span style='color:Red;'>" + item.ProductionSign +"<span>";
                    }
                    return span;
                },
                footerFormatter: function (f_list) {
                    var f_arr = [];
                    for (var i = 0; i < f_list.length; i++) {
                      if(f_arr.findIndex((item, index) => {return item == f_list[i].sColorNo;})==-1){
                            f_arr.push(f_list[i].sColorNo);
                      }
                    }
                    return f_arr.length;
                },
                sortable: true
            }, {
                width: '120px',
                title: '颜色',
                field: 'sColorNo',
                formatter: function (value, item, index) {
                    var span ="";
                    span += Utils.isnull(item.colorSeries,"") +"/" + Utils.isnull(item.ColorSystem2,"") + "<br/>";
                    span +="<div data_sColorNo='" + item.sColorNo + "' ondblclick='RecipeList(this)' style='width:100%;height:30px;background:#" + item.IRGB_EXT + "'></div>";
                    span +=  Utils.isnull(item.sChemicalGroup,"");
                    return span;
                },
                sortable: true
            }, {
                width: '70px',
                field: 'nPlanOutputQty',
                title: '米数',
                sortable: true,
                footerFormatter: function (items) {
                    var count = 0;
                    for (var i in items) {
                        count += items[i][this.field];
                    }
                    return count;
                }
            }, {
                width: '300px',
                field: 'workingProcedureList',
                title: '工序进度',
                formatter: function (value, item, index) {
                    var workingProcedureList = value.split('-');
                    var _sWorkingProcedureName = "";

                    for (var i = 0; i < workingProcedureList.length; i++) {
                        (function (j) {
                            var workingProcedure = workingProcedureList[j].split(';');
                            if (workingProcedure[0] == 1) {
                                _sWorkingProcedureName += "<span>";
                            } else if (workingProcedure[1] == 1) {
                                _sWorkingProcedureName += "<span style='color:#1ab394;'>";
                            }
                            _sWorkingProcedureName += workingProcedure[2];
                            _sWorkingProcedureName += "</span>-";
                        })(i)
                    }
                    if (_sWorkingProcedureName.length > 0) {
                        _sWorkingProcedureName = _sWorkingProcedureName.substr(0, _sWorkingProcedureName.length - 1);
                    }
                    return _sWorkingProcedureName;
                },
                sortable: true
            },
            {
                width: '90px',
                title: '计划工序',
                field: 'sWorkingProcedureName',
                sortable: true
            }, 
            {
                width: '90px',
                title: '班次',
                field: 'Classes',
                formatter: function (value, item, index) {
                    var span ="";
                    if(item.sWorkingProcedureName !=null){
                        span += item.sWorkingProcedureName +"<br/>";
                    }
                    if(item.Classes !=null){
                        span += item.Classes;
                    }
                    return span;
                },
                sortable: true
            },
            {
                width: '90px',
                title: '机台号',
                field: 'CylinderNo',
                sortable: true
            },
            {
                width: '90px',
                title: '计划工艺参数',
                field: 'Speed',
                sortable: true,
                formatter: function (value, item, index) {
                    var div = "<span>";
                    if(sWorkingProcedureName == "平幅OS退浆" || sWorkingProcedureName == "BO退浆"){
                        div += "<span>车速：" + Utils.isnull(item.AvgRunSpeed,"") +"</span></br>";
                        div += "<span>碱浓：" + Utils.isnull(item.AvgAlkalinity,"") +"</span></br>"; 
                    }
                    if(sWorkingProcedureName == "松式碱量"){
                        div += "<span>碱浓：" + Utils.isnull(item.AvgAlkalinity,"") +"</span></br>"; 
                        div += "<span>温度：" + Utils.isnull(item.Temperature,"") +"</span></br>";
                        div += "<span>保温时间：" + Utils.isnull(item.WarmTime,"") +"</span></br>";
                    }
                    if(sWorkingProcedureName == "冷堆"){
                        div += "<span>车速：" + Utils.isnull(item.AvgRunSpeed,"") +"</span></br>"; 
                        div += "<span>温度：" + Utils.isnull(item.Temperature,"") +"</span></br>";
                        div += "<span>碱浓：" + Utils.isnull(item.AvgAlkalinity,"") +"</span></br>"; 
                    }
                    div += "<span>备注：" + Utils.isnull(item.PlanRemark,"") +"</span></br>";
                    div += "</span>";  
                    return div;
                }
            },
            {
                width: '90px',
                title: '实际工艺参数',
                field: 'Speed',
                sortable: true,
                formatter: function (value, item, index) {
                    var div = "<span>";
                    if(sWorkingProcedureName == "平幅OS退浆" || sWorkingProcedureName == "BO退浆"){
                        div += "<span>车速：" + Utils.isnull(item.ActualAvgRunSpeed,"") +"</span></br>";
                        div += "<span>碱浓：" + Utils.isnull(item.ActualAvgAlkalinity,"") +"</span></br>"; 
                    }
                    if(sWorkingProcedureName == "松式碱量"){
                        div += "<span>碱浓：" + Utils.isnull(item.ActualAvgAlkalinity,"") +"</span></br>"; 
                        div += "<span>温度：" + Utils.isnull(item.ActualTemperature,"") +"</span></br>";
                        div += "<span>保温时间：" + Utils.isnull(item.ActualWarmTime,"") +"</span></br>";
                    }
                    if(sWorkingProcedureName == "冷堆"){
                        div += "<span>车速：" + Utils.isnull(item.ActualAvgRunSpeed,"") +"</span></br>"; 
                        div += "<span>温度：" + Utils.isnull(item.ActualTemperature,"") +"</span></br>";
                        div += "<span>碱浓：" + Utils.isnull(item.ActualAvgAlkalinity,"") +"</span></br>"; 
                    }
                    div += "</span>";  
                    return div;
                }
            }]
        });
    }

html部分

    <div class="searchBox">
        <div style="width: 70px; padding: 10px 0px;float: left;margin-left:6px;">日期范围：</div>
        <input class="form-control" style="width: 100px; padding: 6px 0px;float: left;"  onclick="WdatePicker({dateFmt:'yyyy-MM-dd'})" id="startDate" onchange="bootstrapFiterTable1.reload()" value="@DateTime.Now.ToString("yyyy-MM-dd")" />
        <div style="width: 15px; padding: 10px 0px 10px 5px;float: left;">-</div>
        <input class="form-control" style="width: 100px; padding: 6px 0px; float: left;"  onclick="WdatePicker({dateFmt:'yyyy-MM-dd'})" id="endDate" onchange="bootstrapFiterTable1.reload()" value="@DateTime.Now.ToString("yyyy-MM-dd")" />
        <input type="text"  placeholder="卡号" class="form-control" id="sCardNo" onchange="bootstrapFiterTable1.refresh()" />
        <select id="sWorkCentreName"  class="form-control" style="padding:6px 0px; " onchange="bootstrapFiterTable1.refresh()">
        </select>
        <input type="text"  placeholder="批号" class="form-control" id="sMaterialLot" onchange="bootstrapFiterTable1.refresh()" />
        <input id="sCustomerFullName"  type="text" onclick="bootstrapFiterTableUtils.filterSingleElection_onclick('sCustomerFullName','sCustomerFullName',bootstrapFiterTable1)"  placeholder="客户" class="form-control" readonly="readonly" style="background:#ffffff" />
        <select id="orderType"  class="form-control" style="padding:6px 0px;" onchange="bootstrapFiterTable1.refresh()">
        </select>
        <input id="operationMode"  type="text" onclick="bootstrapFiterTableUtils.filterMultipleElection_onclick('operationMode','operationMode',bootstrapFiterTable1)"  placeholder="经营方式" class="form-control" readonly="readonly" style="background:#ffffff" />
        <input id="sMaterialTypeName"  type="text" onclick="bootstrapFiterTableUtils.filterMultipleElection_onclick('sMaterialTypeName','sMaterialTypeName',bootstrapFiterTable1)"  placeholder="物料大类" class="form-control" readonly="readonly" style="background:#ffffff" />
        <select id="sColorName"  class="form-control" style="padding:6px 0px; " onchange="bootstrapFiterTable1.refresh()">
        </select>
        <select id="sChemicalGroup"  class="form-control" style="padding:6px 0px; " onchange="bootstrapFiterTable1.refresh()">
        </select>
        <select id="colorSeries"  class="form-control" style="padding:6px 0px; " onchange="bootstrapFiterTable1.refresh()">
        </select>
        <button class="btn btn-primary btn1" type="button" onclick="btn_workProcedureIn()" style="float:left;margin-right:12px;">工序包含</button>
         <button class="btn btn-primary btn1" type="button" onclick="btn_workProcedureNotIn()" style="float:left;margin-right:12px;">工序不包含</button>
        <input id="ProductionSign"  type="text" onclick="bootstrapFiterTableUtils.filterMultipleElection_onclick('ProductionSign','ProductionSign',bootstrapFiterTable1)"   placeholder="生产进度" class="form-control" readonly="readonly" style="background:#ffffff" />
        <input id="classes"  type="text" onclick="bootstrapFiterTableUtils.filterMultipleElection_onclick('classes','classes',bootstrapFiterTable1)"  placeholder="班次" class="form-control" readonly="readonly" style="background:#ffffff" />
        <input id="cylinderNo"  type="text" onclick="bootstrapFiterTableUtils.filterSingleElection_onclick('cylinderNo','cylinderNo',bootstrapFiterTable1)"  placeholder="机台号" class="form-control" readonly="readonly" style="background:#ffffff" />
        <div style="clear:both;"></div>
    </div>
    <table id="table1">
    </table>

组件地址：https://gitee.com/BrickDog/bootstrap-fiter-table