问题描述:

在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 表格在排序之后没有重新渲染问题的更多相关文章

  1. layui表格点击排序按钮后,表格绑定事件失效解决方法

    最近项目使用layui较为频繁,遇到了一个麻烦的问题,网上搜索也没有看到同类型的问题,故此记下来. 需求是点击上图右侧表格中某一个单元格,会触发点击事件如下代码: $("table>t ...

  2. layui表格参数

    layui表格对数据进行用table样式展现 举个例子: <!doctype html> <html> <head> <meta charset=" ...

  3. FineUI第十六天---表格的排序和分页

    表格的排序和分页 1.表格的排序需要: AllowSorting:是否允许排序. SortColumn:当前排序的列ID,当然也可以不设置此属性,而是在后台初始化代码中直接指定默认排序字段. Sort ...

  4. JS实现点击表头表格自动排序(含数字、字符串、日期)

    这篇文章主要介绍了利用JS如何实现点击表头后表格自动排序,其中包含数字排序.字符串排序以及日期格式的排序,文中给出了完整的示例代码,并做了注释,相信大家都能看懂,感兴趣的朋友们一起来看看吧. < ...

  5. Layui表格编辑【不依赖Layui的动态table加载】

    依赖jquer,layui/css <td class="My_edit"></td> Jquery代码 //-----[Layui表格编辑(<td ...

  6. datatable转layui表格【偏原理】

    如题这个类负责把datatable转换为layui表格可以显示的内容.适合配合表格url字段的webapi服务端,为其返回响应字符串.代码如下:using System;using System.We ...

  7. layui 表格设置td的宽度

    layui 表格设置td的宽度, td{ min-width: 150px; max-width: 200px; } 超出长度隐藏 overflow: hidden; text-overflow: e ...

  8. 设置layui表格cell的内边距

    /*设置layui表格cell的内边距*/ .layui-table-cell { height: 50px !important; line-height: 50px !important; }

  9. 改造 layui 表格组件实现多重排序

    layui 的表格组件目前只支持单列排序,在实际应用中并不能很好的支撑我们的业务需求.今天一时手痒,决定改造一番以支持多重排序. 实现思路也比较简单,只需要用一个数组来存放所有排序的列,再把这个数组传 ...

随机推荐

  1. 【Linux】常见基础命令之文件操作

    vi:编辑文件 lilip@ubuntu:~/test/page$ vi test.txt i         切换到输入模式,以输入字符. x        删除当前光标所在处的字符. :      ...

  2. git自动部署到服务器

    1.现在服务器配置空仓库 mkdir -p test/project.git chmod 777 test cd test/project.git/ git init --bare . cd .. c ...

  3. router-link 返回上页 和 新窗口打开链接

    1.如果使用了Vue-router的话,就可以用 this.$router.go(-1) 实现返回: 2.如果没使用vue-router,就可以用 window.history.go(-1) 实现返回 ...

  4. RabbitMQ开启服务却无法登录

    我之前无聊之际修改了我的电脑名,后来发现我的rabbitmq服务无法开启,后来我又把电脑名改回去了还是不行,我从网上看了很多教程都没有成功,后来看到了这个方法,出处忘记了,不好意思,发出来记忆一下 包 ...

  5. 2018-2019-2 20165206《网络对抗技术》Exp1 PC平台逆向破解

    - 2018-2019-2 20165206<网络对抗技术>Exp1 PC平台逆向破解 - 实验任务 本次实践的对象是一个名为pwn1的linux可执行文件. 该程序正常执行流程是:mai ...

  6. Linux支持ntfs,exfat格式文件系统

    sudo apt-get install exfat-utilssudo apt-get install ntfs-3g ntfs-config exFAT最高支持16EB的文件,并且exfat在wi ...

  7. James Munkres Topology: Sec 22 Exer 3

    Exercise 22.3 Let \(\pi_1: \mathbb{R} \times \mathbb{R} \rightarrow \mathbb{R}\) be projection on th ...

  8. hbase 问题整理

    阅读本文可以带着下面问题:1.HBase遇到问题,可以从几方面解决问题?2.HBase个别请求为什么很慢?你认为是什么原因?3.客户端读写请求为什么大量出错?该从哪方面来分析?4.大量服务端excep ...

  9. 对接携程供应商php加密解密类

    php加密解密类 <?php class Aes{ private $key = '6b4d63211b4ba869'; private $iv = 'dbbf079b95004f65'; pu ...

  10. 使用chrome-devtools定位元素

    2.1使用chrome-devtools 这是谷歌提供的一个移动端Web开发调试工具,通过它我们可以调试手机页面.通过调试我们可以看到wap页面的源码,从而进行元素的定位.那么这个工具该如何使用呢?首 ...