问题描述:

在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启动activemq失败

    第一种情况: 在网上查找错误,通过./activemq console命令可以查看到activemq启动的错误信息,另外在data/activemq.log文件中可以查看到错误日志. java.io. ...

  2. 使用scrapy爬虫,爬取17k小说网的案例-方法二

    楼主准备爬取此页面的小说,此页面一共有125章 我们点击进去第一章和第一百二十五章发现了一个规律 我们看到此链接的  http://www.17k.com/chapter/271047/6336386 ...

  3. C++多态、虚函数、纯虚函数、抽象类、虚基类

    一.C++多态 C++的多态包括静态多态和动态多态.静态多态包括函数重载和泛型编程,动态多态包括虚函数.静态多态是指在编译期间就可以确定,动态多态是指在程序运行时才能确定. 二.虚函数 1.虚函数为类 ...

  4. Linux中普通用户配置sudo权限(带密或免密)

    配置步骤如下: 1.登陆或切换到root用户下: 2.添加sudo文件的写权限,命令是:chmod u+w /etc/sudoers 3.编辑sudoers文件:vi /etc/sudoers 找到这 ...

  5. 关于element-ui表单验证(自定义验证规则)

    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-widt ...

  6. 小米Note 2简单卡刷开发版启用root超级权限的步骤

    小米的机器不同手机型号一般MIUI官方论坛都提供两个不同版本,分别为稳定版和开发版,稳定版没有提供Root超级权限管理,开发版中就开启了Root超级权限,较多时候我们需要使用的一些功能强大的软件,都需 ...

  7. net core 接入 Google Authenticator

    一.什么谷歌身份验证器 1.英文名:Authenticator 许网站都需要绑定用以对相关账号进行“二步验证”保护,也叫“双重身份验证”的谷歌身份验证器,以加强安全级别. 2.作用: 这东西就相当于银 ...

  8. 二维条码扫描模组在肯德基KFC的无纸化点餐解决方案

    在如今提倡节约资源的环境下,肯德基在品牌发展中,逐渐实现无纸化点餐,不仅节约了纸质点餐单,而且还具有节约资源的示范作用.而其中二维码扫描模组是这套无纸化点餐方案的重点,在整套设备中,加入二维码扫描模组 ...

  9. redis与memacache的区别(转)

    redis和memecache的不同在于:1.存储方式:memecache 把数据全部存在内存之中,断电后会挂掉,数据不能超过内存大小redis有部份存在硬盘上,这样能保证数据的持久性.2.数据支持类 ...

  10. python3控制语句---选择结构语句

    python中的控制语句主要有if.if--else.if--slif--else.pass语句.其实python的控制语句与其他语言的控制语句工作原理基本一样.控制语句可以分为选择结构语句和循环结构 ...