bootstraptable表头添加自定义搜索框（带文本,下拉,弹窗多选搜索）
该示例是在bootstraptable表头每个字段上方新增了一行用于删选过滤，比较适用于多字段多筛选的报表开发，下面是表格具体功能演示：
前端代码
实现原理：使用bootstraptable多表头功能，在原有的表头基础上又新增了一行表头，并使用表头的title参数格式化搜索条件（比如：title: ''）
1、html部分
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: ''+
'',
colspan: 1,
rowspan: 1
}, {
width: '90px',
title: '',
colspan: 1,
rowspan: 1
}, {
width: '90px',
title: '',
colspan: 1,
rowspan: 1
}, {
width: '100px',
title: '',
colspan: 1,
rowspan: 1
}, {
width: '90px',
title: ''
}, {
width: '90px',
title: '',
colspan: 1,
rowspan: 1
}, {
width: '180px',
title: '',
colspan: 1,
rowspan: 1
}, {
width: '90px',
title: '',
colspan: 1,
rowspan: 1
}, {
width: '80px',
title: '',
colspan: 1,
rowspan: 1
}, {
width: '70px',
title: '',
colspan: 1,
rowspan: 1
},
{
width: '90px',
title: '',
colspan: 1,
rowspan: 1
}, {
width: '300px',
title: '' +
'' +
'',
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 + "
" + item.sColorName;
}
}, {
width: '80px',
title: '颜色',
formatter: function (value, item, index) {
return "";
}
}, {
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 += "";
} else if (item.CardNoProgressTrack_ProgressList[j].bIsComplete == 1) {
_sWorkingProcedureName += "";
} else if (item.CardNoProgressTrack_ProgressList[j].bIsComplete == 0) {
_sWorkingProcedureName += "";
}
_sWorkingProcedureName += item.CardNoProgressTrack_ProgressList[j].sWorkingProcedureName;
_sWorkingProcedureName += "-";
})(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 += '';
}
$("#operationMode").append(operationMode_option);
var colorSeries_option = "";
for (var i = 0; i < colorSeries_arry.length; i++) {
colorSeries_option += '';
}
$("#colorSeries").append(colorSeries_option);
var sChemicalGroup_option = '';
for (var i = 0; i < sChemicalGroup_arry.length; i++) {
sChemicalGroup_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、弹窗代码