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

2、JavaScript部分

var $table = $(‘#table’);

var $table_quer 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 yParams = {};

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) {

KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲" + 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) {