layui 表格在排序之后没有重新渲染问题
问题描述:
在layui表格中,最后一列增加了操作按钮,并且在某些行设置了样式,但是在排序之后,按钮的点击事件失效了,样式也没有了,可能是没有执行done回调
原因:
done回调只有在render和reload的时候执行
解决办法:
在生成完表格之后,监听排序事件,在排序事件里面执行reload方法,重新执行done回调,并且初始化排序
例子:
html代码
<div id="tableTest" lay-filter="test"></div>
js代码:
var table = layui.table;
var dataList = [
{ No: 1, Name: '张三' },
{ No: 2, Name: '李四' }
];
var titleList = [[
{ field: 'No', title: '序号' },
{ field: 'Name', title: '名字' }
]];
table.render({ elem: '#tableTest', data: dataList, cols: titleList, id: 'tableId' });
table.on('sort(test)', function(obj) {
table.reload('tableId', {
initSort: obj
});
});
table.reload('tableId', {});
注意:
①sort事件()里面的test是初始容器里面的lay-filter属性的值
②reload里面的tableId是table.render里面的id值,唯一标识表格
layui 表格在排序之后没有重新渲染问题的更多相关文章
- layui表格点击排序按钮后,表格绑定事件失效解决方法
最近项目使用layui较为频繁,遇到了一个麻烦的问题,网上搜索也没有看到同类型的问题,故此记下来. 需求是点击上图右侧表格中某一个单元格,会触发点击事件如下代码: $("table>t ...
- layui表格参数
layui表格对数据进行用table样式展现 举个例子: <!doctype html> <html> <head> <meta charset=" ...
- FineUI第十六天---表格的排序和分页
表格的排序和分页 1.表格的排序需要: AllowSorting:是否允许排序. SortColumn:当前排序的列ID,当然也可以不设置此属性,而是在后台初始化代码中直接指定默认排序字段. Sort ...
- JS实现点击表头表格自动排序(含数字、字符串、日期)
这篇文章主要介绍了利用JS如何实现点击表头后表格自动排序,其中包含数字排序.字符串排序以及日期格式的排序,文中给出了完整的示例代码,并做了注释,相信大家都能看懂,感兴趣的朋友们一起来看看吧. < ...
- Layui表格编辑【不依赖Layui的动态table加载】
依赖jquer,layui/css <td class="My_edit"></td> Jquery代码 //-----[Layui表格编辑(<td ...
- datatable转layui表格【偏原理】
如题这个类负责把datatable转换为layui表格可以显示的内容.适合配合表格url字段的webapi服务端,为其返回响应字符串.代码如下:using System;using System.We ...
- layui 表格设置td的宽度
layui 表格设置td的宽度, td{ min-width: 150px; max-width: 200px; } 超出长度隐藏 overflow: hidden; text-overflow: e ...
- 设置layui表格cell的内边距
/*设置layui表格cell的内边距*/ .layui-table-cell { height: 50px !important; line-height: 50px !important; }
- 改造 layui 表格组件实现多重排序
layui 的表格组件目前只支持单列排序,在实际应用中并不能很好的支撑我们的业务需求.今天一时手痒,决定改造一番以支持多重排序. 实现思路也比较简单,只需要用一个数组来存放所有排序的列,再把这个数组传 ...
随机推荐
- Linux kill 命令 以及USR1 信号解释
kill 中的USR信号解释 USR1亦通常被用来告知应用程序重载配置文件:例如,向Apache HTTP服务器发送一个USR1信号将导致以下步骤的发生:停止接受新的连接,等待当前连接停止,重新载入配 ...
- 29 内置方法 eval | exec 元类 单例
eval与exec内置方法 将字符串作为执行目标,得到响应结果 eval常用作类型转换:该函数执行完有返回值 exec拥有执行更复杂的字符串:可以形成名称空间 eval内置函数的使用场景: 1.执 ...
- tensorflow--mnist注解
我自己对mnist官方例程进行了部分注解,希望分享出来有助于入门选手更好理解tensorflow的运行机制,可以拷贝到IDE再调试看看,看看具体数据流向还有一部分tensorflow里面用到的库.我用 ...
- 使用JMeter的HTTP代理服务器录制app脚本
1.添加一个线程组 2.添加一个HTTP代理服务器 3.设置手机网络连接 4.手机安装证书 a.进入jmeter安装目录,在bin目录下找到ApacheJMeterTemporaryRootCA.cr ...
- .Net Core 技巧
避免同步调用 正确的使用异步编程 async/await 使用异步编程尽量避免 Task.Await() 或者 Task.Result(因为会阻塞线程,直到任务完成,有违异步的设计思想) 尽量始终执行 ...
- Java实现一个简单的循环队列
在某些时候,我们不能被要求像数组一样可以使用索引随机访问,而是需要被限制顺序处理业务,今天介绍一种先进先出(FIFO)的线性数据结构:队列, 当然,还有后进先出(LIFO)的处理方式,即为栈(后续有时 ...
- CTO 能力模型(简化版)
最近思考了很多,我在大贲这几年的工作内容.从一开始到现在,伴随着大贲从一二十人,走到了现在的两百多人.我的工作也从一开始的带头冲锋陷阵,逐步转移到了带领产品研发,再到后来的全公司多业务线的技术管理工作 ...
- Idea远程调试undertow
1.修改jfinal.sh 添加远程调试配置,端口5555可自行设置 JAVA_OPTS="-Xdebug -Xrunjdwp:transport=dt_socket,suspend=n,s ...
- 【转载】详解一条sql语句的执行过程
转载自 https://www.cnblogs.com/cdf-opensource-007/p/6502556.html SQL是一套标准,全称结构化查询语言,是用来完成和数据库之间的通信的编程语言 ...
- js中的严格模式和非严格模式的比较
前言 es5的严格模式是采用具有限制性JavaScript变体的一种方式,从而使代码显示地脱离'懒散模式/非严格模式' 严格模式 严格模式通过抛出错误来消除一些原有静默错误 严格模式修复了一些导致Ja ...