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

于 2024-07-17 08:41:22 发布
阅读量732 收藏 24
点赞数 22
文章标签： 前端 java javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_85377403/article/details/140483849
版权

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 + “
”;

span += item.tCreateTime.substr(0,10) + “
”;

span += item.sWorkCentreName + “
”;

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 + “
”;

span += item.sCustomerFullName + “
”;

span += item.sSalesName + “
”;

span += item.orderType;

return span;

},

sortable: true

}, {

width: ‘100px’,

title: ‘品种’,

field: ‘sMaterialName’,

formatter: function (value, item, index) {

var span =“”;

span += item.sMaterialName + “
”;

span += Utils.isnull(item.ProofingClothState,‘’) + “
”;

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 + “
”;

span += item.OrderRemark + “
”;

return span;

}

}, {

width: ‘120px’,

title: ‘色号’,

field: ‘sColorNo’,

formatter: function (value, item, index) {

var span =“”;

span += item.sColorNo + “
” + item.sColorName;

if(item.ProductionSign != null)

{

span += “
” + item.ProductionSign +“”;

}

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,“”) + “
”;

span +=“

”;

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 += “”;

} else if (workingProcedure[1] == 1) {

_sWorkingProcedureName += “”;

}

_sWorkingProcedureName += workingProcedure[2];

_sWorkingProcedureName += “-”;

})(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 +“
”;

}

if(item.Classes !=null){

span += item.Classes;

}

return span;

},

sortable: true

},

{

width: ‘90px’,

title: ‘机台号’,

field: ‘CylinderNo’,

sortable: true

最后

2020年在匆匆忙忙慌慌乱乱中就这么度过了，我们迎来了新一年，互联网的发展如此之快，技术日新月异，更新迭代成为了这个时代的代名词，坚持下来的技术体系会越来越健壮，JVM作为如今是跳槽大厂必备的技能，如果你还没掌握，更别提之后更新的新技术了。

更多JVM面试整理：

able: 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 +“
”;

}

if(item.Classes !=null){

span += item.Classes;

}

return span;

},

sortable: true

},

{

width: ‘90px’,

title: ‘机台号’,

field: ‘CylinderNo’,

sortable: true

最后

2020年在匆匆忙忙慌慌乱乱中就这么度过了，我们迎来了新一年，互联网的发展如此之快，技术日新月异，更新迭代成为了这个时代的代名词，坚持下来的技术体系会越来越健壮，JVM作为如今是跳槽大厂必备的技能，如果你还没掌握，更别提之后更新的新技术了。

[外链图片转存中…(img-ZSDtPPZM-1721176871979)]

更多JVM面试整理：

[外链图片转存中…(img-fn7UOCv2-1721176871979)]

2401_85377403
关注
  • 22
    点赞
  • 踩
  • 24
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
bootstrap-table-filter:这是Bootstrap表jquery插件的扩展，基于另一个扩展表过滤器控件，该扩展为服务器端和客户端提供了列过滤器控件
05-18
自举表过滤器 这是jquery插件的扩展，基于另一个扩展 ，它为服务器端和客户端提供了列过滤器控件。 参考 -v.3用于选择过滤器控件 -v.1.10用于datepicker过滤器控件 用法 步骤1 包括jQuery，Bootstrap，Bootstrap-table，然后包含Bootstrap-table过滤器 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"> <link rel="stylesheet" hre
table-filter:基于 Bootstrap + JQuery 的 HTML 表格过滤插件
06-21
表过滤器 基于 Bootstrap + JQuery 的 HTML 表格过滤器插件，您只需将表格的 id 传递给 tableFilter.filter('id of the table') 方法，点击此按钮将打开一个过滤器弹出窗口 一个 二 1 三1 one2 二 2 三 2 一个3 二三 三三 one4 二 4 三四 one5 两个5 三五 one6 两个6 三6 one7 27 三七 We are done, just click on the button you will see filter popup. Thanks.
bootstrap-table-filter实现后台过滤，不使用源码的前端过滤
做你的时光机的博客
07-25 6633
首先引入所需的css和js <link href="${ctx}/ftl/common/table/filter-control/bootstrap-table-filter-control.css" rel="stylesheet"> <script type="text/javascript" src="${ctx}/ftl/common/ta...
bootstrap-table设置select过滤器值（filterData）
木辰風的博客
02-01 1418
filterControl设置select（选择控件），默认是数据当前不重复，但如果是分页或者筛选数据时，select的数据就不完整。bootstrap-table官网上有三种方法设置select过滤器的值，用于。控制器格式键值对，否则url就获取不到。注：如果网络有延迟，不推荐使用url。注：grade要经过转码（输出字符串。），因为直接输出json和数组会报错。加载或从json字符串加载。加载或从远程json文件。2、URL格式（不推荐）
基于Element封装一个表格组件tableList的使用方法
10-15
Element UI 是一个基于 Vue.js 的前端框架，用于快速搭建美观且易于维护的网页界面。在现代网页开发中，表格组件作为展示数据的基本组件之一，需要频繁使用。Element UI 自带的表格组件（el-table）提供了丰富的功能...
vue3 封装一个全局通用弹窗提示组件（利用js调用 类似于element）
06-21
本篇文章将详细介绍如何利用Vue3的特性来封装一个类似于Element UI的全局通用弹窗提示组件，并通过JavaScript进行调用。 首先，我们需要了解Vue3中的Composition API。Vue3引入了Composition API，它允许我们在组件...
Vue v-model组件封装(类似弹窗组件)
10-15
现在，让我们转向封装一个类似弹窗的组件。这个组件接收一个 `value` 属性，该属性是一个布尔值，用于控制弹窗的显示与隐藏： ```html 这是v-model的弹窗组件 export default { props: { value: { type...
使用Vue组件实现一个简单弹窗效果
08-27
使用Vue组件实现一个简单弹窗效果 本文主要介绍了使用Vue组件实现一个简单弹窗效果，涉及到弹窗遮罩的实现、slot插槽的使用方式、props和$emit传参等内容。 弹窗遮罩的实现 弹窗遮罩是实现弹窗效果的关键部分。...
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
10-22
标题“jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)”和描述“Selectator是一款实现多选和搜索过滤功能的jQuery下拉列表框插件。下文给大家介绍jQuery使用Selectator插件实现多选下拉列表过滤框，...
Element ui 下拉多选时新增一个选择所有的选项
10-16
Element UI是一个基于Vue 2.0的桌面端组件库，它为开发者提供了丰富的组件来构建优雅的用户界面。在Element UI中，el-select组件用于创建下拉选择框，而el-option组件则用于创建选项。通过设置el-select的multiple...
微信小程序---弹窗封装（组件）
08-02
1、为了统一展示弹窗页面，封装成了一个组件 2、功能：可以自定义“取消”“确定”按钮文案，可以自定义是否显示单个按钮或多个按钮，可以调用相应方法即可进行相应的js执行 3、方便快捷，下载直接放进组件里面，...
基于bootstrap4封装的消息对话框组件
12-11
**基于Bootstrap4封装的消息对话框组件** 在网页开发中，用户界面的交互性与美观性是至关重要的。Bootstrap4作为一款流行的前端框架，为开发者提供了丰富的样式和组件，以简化网页设计过程。本项目则是在Bootstrap4...
Vue 实现一个命令式弹窗组件功能
10-16
在Vue框架中，实现一个命令式弹窗组件意味着创建一个可控制其显示和隐藏的弹窗，通常通过调用一个函数来触发显示。文章《Vue实现一个命令式弹窗组件功能》就提供了实现这样一个弹窗组件的方法和思路。 首先，弹窗...
bootstrap table 表格中增加下拉菜单末行出现滚动条的快速解决方法
08-31
Bootstrap Table 是一个基于 Bootstrap 框架的轻量级组件，用于创建功能丰富的、响应式的表格。在实际应用中，我们常常需要在表格的操作列中添加下拉菜单，以提供更多的用户交互选项。然而，当表格数据较多时，可能...
html表格根据查询条件去,bootstrap table filterBy数据刷选过滤器和查询条件
weixin_36051281的博客
06-09 1714
bootstrap table filterBy数据刷选过滤器和查询条件bootstrap table filterBy数据刷选过滤器，对表格数据进行刷选，比如找出ID为1、10 用户名为itxst的数据。注意这个方法只针对前端有效，如果要服务器后端刷选请参考我们的服务器端分页教程。filterBy方法参数名称filter刷选条件，如果刷选Id字段为1和10的数据{Id:[1,10]}option...
推荐使用：FilterBuilder - 灵活高效的查询过滤组件
最新发布
gitblog_00032的博客
05-28 422
推荐使用：FilterBuilder - 灵活高效的查询过滤组件 项目地址:https://gitcode.com/akumatus/FilterBuilder 项目介绍 FilterBuilder 是一款基于 Vue 2.0 和 Bootstrap & AdminLTE.css 的强大UI组件，专门用于构建复杂的查询和过滤器。它提供了一个直观的界面，让用户可以轻松地创建和管理自定义查询条...
组件过滤功能
u011386922的专栏
09-05 831
组件过滤是指面板展示时，用户可通过过滤面板设置参数，在组件内容中查看需要的数据。在制作报表（暂支持复杂报表）时，直接在报表中插入报表的通用查询功能，并且设置通用查询的条件、排版等。保存带有通用查询的报表后，在组件向导即可设置过滤面板的展现形式。  过滤面板展现提供了三种展现形式： ·         在弹出层中输入条件 ·         在组件中切换过滤面板 ·         
写一个vue项目封装一个弹窗公共组件
04-21
好的，我可以回答你的问题。关于封装弹窗的公共组件，其实可以使用Vue的组件化开发，将弹窗逻辑封装在一个组件中，然后在需要使用弹窗的地方，通过调用该组件来显示弹窗。具体步骤可以参考以下流程： 1.创建弹窗组件，可以使用Vue的单文件组件（.vue文件），并在其中设置弹窗的样式、内容等。 2.在需要使用弹窗的地方，引入该组件并注册为局部组件。 3.通过点击某个按钮或者其他交互方式触发弹窗的显示，可以使用Vue提供的v-if或者v-show指令控制组件的显示与隐藏。 4.如有需要，可以在组件中添加一些事件（例如点击确认或取消按钮时执行一些操作）。 5.如果还需要对弹窗进行一些样式上的调整，可以在该组件的父级组件中通过CSS样式控制。 希望以上步骤可以帮到你。如果你有更多问题需要咨询，可以继续问我。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值