layui筛选功能组件

最新推荐文章于 2025-05-16 18:07:24 发布

xhong_

最新推荐文章于 2025-05-16 18:07:24 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/xhong_/article/details/116491924

layui原生不支持筛选字段功能，但可通过第三方扩展layui-soul-table实现。该组件提供数据筛选、拖拽导出等功能，使用前需下载组件包，并在JS中导入，具体操作可参照官方文档。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

layui并没有自带筛选字段值的功能，只能支持隐藏列
但是，在layui的第三方扩展组件库中有一个组件可以完成数据筛选
layui-soul-table
它不仅支持数据筛选，还有拖拽导出及其他功能
下好组件包
在这里插入图片描述
在要使用的js 进行导入

layui.config({
   
   
    base:'js文件所在位置'
}).extend({
   
   //定义别名
    soulTable: 'soulTable',

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

xhong_

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

layui根据条件显示列_layui框架的table字段筛选功能介绍

weixin_39854867的博客

12-19

2347

首先是在这个是针对字段的，所以给cols新增一个配置项，来决定哪些列需要有过滤的功能，一般来说只有那些数据可以归纳成几种分布的列才有做这个过滤的需求，比如例子中的性别列还有职业列，id列这些的意义不大，当然也不是绝对的，有的就是需要呢。所以新增了一个配置项filter: true/false/null然后在表格渲染完毕之后给表头对应的字段添加上过滤的那个图标和事件这个是主要的代码篇幅太长没办法全显...

layui根据条件显示列_layui-soul-table

weixin_39835321的博客

12-19

1827

给 layui-table 注入点灵魂扩展功能表头筛选、自定义条件(支持前端筛选、后台筛选介绍请看三、后台筛选)拖动列调整顺序、隐藏显示列excel导出(根据筛选条件和列顺序导出)子表(表中表、无限层级、子表同样支持前3个功能)5.拖动行6.右击快捷菜单7.合计栏支持固定列8.双击自适应列宽9.右侧固定列列宽拖动改到单元格左侧效果1.表头筛选效果2.编辑筛选效果筛选明代姓张的或唐代姓李的的...

参与评论您还未登录，请先登录后发表或查看评论

基于layui实现高级搜索（筛选）功能

10-16

主要为大家详细介绍了基于layui实现高级搜索、筛选功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

关于Layui Table自定义列（列拖动）

最新发布

LL548542的博客

05-16

287

如果soulTable.JS报错。

layui表格筛选查询

九亿宅男的梦的博客

05-25

3937

<form class="layui-form" id="searchForm" οnsubmit="return false"> <div class="layui-inline"> <div class="layui-form-item" style="margin:0"> <label class="layui-form-label">机构</label> <div class="lay...

layui表格可搜索过滤可分页

03-25

layui表格可搜索过滤可分页layui表格

layui.tree组件的使用以及搜索节点功能的实现

10-16

在本篇文章中，我们将探讨如何使用layui.tree组件，并着重讲解如何实现搜索节点的功能。首先，layui.tree组件的使用涉及到以下几个主要步骤： 1. 引入layui库：在HTML文件中，需要引入layui的CSS和JS文件，确保...

layui实现多选筛选条件（类似于网购多选），时间联动

qq_27387133的博客

05-12

3272

一.实现功能类似于淘宝可以多选筛选条件，同一筛选条件如果选项过多可以设置一个“更多”按钮，超过一行的数据会隐藏掉，时间筛选可以进行联动（下拉框样式稍作改动）。效果如下图: 1.主图 2.时间联动 3.选中条件，下方动态添加已选条件。重新点击条件可以进行反选或者在已选条件中亦可删除，上下会进行联动。超过一个已选条件时，会出现“清空筛选”按钮。二.关键的html代码 <body> <div class="layui-fluid"> <div

layui数据表格实现内容筛选的全选和反选功能

weixin_41614732的博客

06-23

3697

最近完成了一个需求，记录一下，就是实现layui table的内容筛选的全选和反选功能，layui自带的头部工具里面的筛选功能因为没有全选反选这个功能，所以自己写了一个表格筛选的函数，功能如图筛选框布局代码 <form class="layui-form layui-form-pane" action=""> <div class="layui-form-item" pane="">

【前端】基于layui写的一个高级搜索（筛选）功能

qq_42007423的博客

03-26

1万+

基于layui写的一个高级搜索（筛选）功能。效果图：是一位萌新，所有写的有点儿乱。（放在上面，供新手们参考，也是自己做一个记录。）代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&g...

layui-soul-table:layui-table 表头筛选、列顺序调整、列快速隐藏、excel导出等

05-05

给 layui-table 注入点灵魂当前layui版本 v2.5.6 在线demo及文档：国内下载地址: 扩展功能表头筛选、自定义条件（支持前端筛选、后台筛选介绍请看）拖动列调整顺序、隐藏显示列 excel导出（根据筛选条件和列顺序导出）子表（表中表、无限层级、子表同样支持前3个功能） 5.拖动行 6.右击快捷菜单 7.合计栏支持固定列 8.双击自适应列宽 9.右侧固定列列宽拖动改到单元格左侧效果 1.表头筛选效果 2.编辑筛选效果筛选明代姓张的或唐代姓李的的诗词 3.拖动列调整顺序、隐藏显示列左右拖动调整顺序，鼠标移出表格后松开--快速隐藏列 4.子表快速上手 1.将下面模块放到自己项目中: soulTable.js 总入口 tableFilter.js 表头筛选 excel.js excel导出 tableChild.js 子表

LayUi组件TableSelect

08-09

LayUi组件：TableSelect

XSSFWorkbook 设置单元格样式_一招鲜，一招鲜吃遍天下之一：高级筛选，实现个性化筛选设置...

weixin_39568659的博客

11-13

536

使用高级筛选功能，能够实现更加个性化的筛选设置。筛选同时符合多个条件的记录如图7-36 所示，需要在销售数据表中筛选出销售人员“白露”销售金额超过 20 000 元的数据记录。操作步骤如下。步骤一选中表格的1到4行，按组合键，在原表格上方插入4个空行。步骤二在C1:D2 单元格中设置筛选条件，注意筛选条件区域的列标题需要与数据源中的列标题完全相同，如图 7-37 所示。步...

layui表格筛选框多页选中分页置顶+扩展搜索

漫游游的博客

12-17

1229

不是操作骚也不是组件不够完美总会遇到这样的需求,记录一下分析有点坑就是全选返选 obj.data 是空的那就只能初始化的时候把数据带进去取了这么多ID 怎么用? ...

layui实现分页，筛选功能

loveisbunny的博客

11-30

4924

layui实现分页筛选操作

layui框架实战案例(25):table组件筛选列记忆功能

漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）

12-19

1922

即点击当前表格右上角筛选图标后，对表头进行显示隐藏勾选，再刷新页面依然保留当前筛选状态。

layui table 方法渲染筛选重载和搜索重载实现