layui fixbar 返回顶部_干活!layui动态显示表格的列 自己动手 丰衣足食

本文主要是介绍layui fixbar 返回顶部_干活!layui动态显示表格的列 自己动手 丰衣足食,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

众所周知啊,layui是可以手动筛选列的。但是这个筛选只限当前,你要是重新关闭当前页面或者登录进来,就又显示默认的列。可能有的人会说:那就直接给出别人想要的默认的列就行了嘛。但是众口难调啊。我就真的遇到这种奇葩情况:

A说:XX工啊,我这个用户工号用不到啊,你直接去了吧。你看表格这么多列,我看的都烦。

OK,听你的,我去掉.....

结果没几天,HR那边来问题了:XX工啊,我只有姓名怎么知道这个人到底是谁啊,厂里5000多个人,好多人重名的,你这边肯定要加上工号的啊。

805b2c199bc5c8e6c6dc3edf23a24d26.png

what?

这帮臭婆娘,哎!尽不干人事。。。。

那咋办嘛?

也简单,我把列放出来给你们自己选,这下总没这么多事了吧。

但是layui本身只在前台做筛选,我关闭页面或者重新登录就gg了啊。

没事,遇事不决先百度。好家伙,网上一顿顿找找......嘿,我就奇怪了,根本连类似的答案都没有。这......这......这一giao我里giaogiao啊。

好在,终于官方给出了回答。

先上demo:

d1bee329b803d117879bec22bedd63a6.png

layui官方解决方案

图片的大意是:当你使用table.reload重载表格的cols的时候,是没有办法做到的。直白的说就是旧的cols不会因为你在table.reload中添加新的cols而被替换。那到底怎么解决嘛。别急,官方这么说:

f164711f8b9e82e3b1b13087e98addd8.png

layui官方解决方案

我给大伙翻译翻译:

修改 src/lay/modules/table.js下的Class.prototype.reload方法(可能有的版本是I.prototype.reload),增加:

if (options.cols && options.cols.constructor === Array) delete that.config.cols;

注意,此处的options在你的代码中到底是options还是e,而且我的版本还得写成如下的格式:

e.cols && e.cols.constructor === Array && delete i.config.cols,

所以具体的还得看你的layui版本,不过思路都是一样的。

从上面代码可以看出,增加的代码的意思无非就是多了一层判断:

以前reload的时候,只替换load中的data,现在不仅替换了data,还增加了cols的内容替换。

好了,看一下我这边的总体代码要怎么使用(假设此处已经修改了table.js):

820b22188220469953a2cb1f8428da76.png

代码一

1a4ac8702449d6d3f2b803e97969a15a.png

代码二

c25bd4a354539db6b08eb6ec9d3c3883.png

代码三

看得头疼是不是?没关系,我写的,没人review代码,嘿嘿。你不用在乎上面每句代码做了啥,就关心一件事:上面的所有操作都是用来给array_col赋值用的,重点在下面:

c719f57a1f9ea86d94ed84659392191f.png

table.redner

关注这一行: cols: [array_col],

这里的array_col就是上文通过一系列操作得到的array_col,每次table.render的时候,都会根据array_col的最新值来渲染table。那么如何记住呢?没办法,只能每次点击查询的时候,向数据库插入最新的查询条件......

在这里我再说明一下:此处table.render的时候我并没有加上url,取而代之的是data: [],目的是为了防止首次页面加载的时候去加载表格(为什么这么做我已经忘记了-_-,怪我,代码规范做得不好)。那么url具体放到哪里呢?没错,就是在table.reload的时候。

好了,看看最终的样子吧:

a7346ad03812dc5eb566cc24c61d7592.png

筛选一

5361588c28cdf9258879af9b77dd6d7c.png

筛选二

97dbe1cce69269a955c1b73629c78ce8.png

筛选三

这篇关于layui fixbar 返回顶部_干活!layui动态显示表格的列 自己动手 丰衣足食的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/154574

相关文章

Prompt - 将图片的表格转换成Markdown

Prompt - 将图片的表格转换成Markdown 0. 引言1. 提示词2. 原始版本 0. 引言 最近尝试将图片中的表格转换成Markdown格式,需要不断条件和优化提示词。记录一下调整好的提示词,以后在继续优化迭代。 1. 提示词 英文版本: You are an AI assistant tasked with extracting the content of

动手学深度学习【数据操作+数据预处理】

import osos.makedirs(os.path.join('.', 'data'), exist_ok=True)data_file = os.path.join('.', 'data', 'house_tiny.csv')with open(data_file, 'w') as f:f.write('NumRooms,Alley,Price\n') # 列名f.write('NA

Android中如何实现adb向应用发送特定指令并接收返回

1 ADB发送命令给应用 1.1 发送自定义广播给系统或应用 adb shell am broadcast 是 Android Debug Bridge (ADB) 中用于向 Android 系统发送广播的命令。通过这个命令,开发者可以发送自定义广播给系统或应用,触发应用中的广播接收器(BroadcastReceiver)。广播机制是 Android 的一种组件通信方式,应用可以监听广播来执行

struts2中的json返回指定的多个参数

要返回指定的多个参数,就必须在struts.xml中的配置如下: <action name="goodsType_*" class="goodsTypeAction" method="{1}"> <!-- 查询商品类别信息==分页 --> <result type="json" name="goodsType_findPgae"> <!--在这一行进行指定,其中lis是一个List集合,但

vue2实践:el-table实现由用户自己控制行数的动态表格

需求 项目中需要提供一个动态表单,如图: 当我点击添加时,便添加一行;点击右边的删除时,便删除这一行。 至少要有一行数据,但是没有上限。 思路 这种每一行的数据固定,但是不定行数的,很容易想到使用el-table来实现,它可以循环读取:data所绑定的数组,来生成行数据,不同的是: 1、table里面的每一个cell,需要放置一个input来支持用户编辑。 2、最后一列放置两个b

关于使用cspreadsheet读写EXCEL表格数据的问题

前几天项目有读写EXCEL表格的需求,我就找了大概有几种,大致分为:COM方法、ODBC方法、OLE方法、纯底层格式分析方法。由于COM方法要求必须安装有OFFICE的EXCEL组件,纯底层格式分析方法又很多功能需要自行去完善,所有最终选择了数据库的方法,用数据库的方法去存取xls格式的数据。网上有一个高手写的CSpreedSheet,看了一下提供的接口,感觉挺好用的。在使用的过程中发现几个

自动化表格处理的革命:智能文档系统技术解析

在当今数据驱动的商业环境中,表格数据的自动化处理成为了企业提高效率、降低成本的关键。企业智能文档系统在智能表格识别方面展现出卓越的性能,通过精准识别和处理各种通用表格,显著提升了企业文档管理的智能化水平。本文将深入探讨该系统在表格识别方面的关键技术和应用优势,以及如何通过行业定制化服务满足不同行业的需求。 1. 通用表格识别 智能文档系统通过先进的OCR技术和表格结构识别算法,能够精准

python读取pdf内容写入到Excel表格中

要从每个 PDF 文件中提取全文内容,并将这些内容粘贴到一个新的或现有的表格中,你可以使用 Python 的库来完成这一任务。以下是一个简化的步骤和示例代码,展示如何实现这个过程。 步骤概述 读取文件夹中的所有 PDF 文件。提取每个 PDF 文件的全文内容。创建一个新的 Excel 表格或使用现有的表格。将提取的内容粘贴到表格中,每个 PDF 的内容放在一个垂直单元格中。保存表格文件。 所

通过Ajax请求后台数据,返回JSONArray(JsonObject),页面(Jquery)以table的形式展示

点击“会商人员情况表”,弹出层,显示一个表格,如下图: 利用Ajax和Jquery和JSONArray和JsonObject来实现: 代码如下: 在hspersons.html中: <!DOCTYPE html><html><head><meta charset="UTF-8"><title>会商人员情况表</title><script type="text/javasc

【动手学深度学习】04 数据操作 + 数据预处理(个人向笔记)

数据操作 N维数组是机器学习和神经网络的主要数据结构其中 2-d 矩阵中每一行表示每一行表示一个样本 当维度来到三维的时候则可以表示成一张图片,再加一维就可以变成多张图片,再加一维则可以变成一个视频 访问元素 冒号表示从冒号左边的元素到冒号右边的前一个元素(开区间),其中如果左边为空,那么表示从第一个开始,如果右边为空,那么表示访问到最后一个,如果两边都为空,则表示全部访问其中一行中我们指