该示例是在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>
