layui table动态表头 改变表格头部 重新加载表格的方法


Posted in Javascript onSeptember 21, 2019

改变头部原理:删除原来表格, 重新建立DOM元素, 重新加载table,实现表头改变

明白了原理, 我相信大家都能写出来了, table.reload(ID, options)目前好像还不支持cons的基础函数变动,只能使用其他方式了,简单暴力,哈哈哈哈哈哈哈哈嗝!!

下面是示例:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="static/layui/css/layui.css" rel="external nofollow" >
</head>
<body>
<div id="myTable">
  <table id="demo" lay-filter="test"></table>
</div>
<button id="buttonChangeTitle" class="layui-btn ">点击改变表头</button>

<script type="text/javascript" src="static/layui/layui.js" charset="utf-8"></script>
<script>
  layui.use(['element', 'jquery', 'table'], function () {
    var $ = layui.jquery
      , table = layui.table
      , element = layui.element; //Tab的切换功能,切换事件监听等,需要依赖element模块

    var data = [
      {
        "id": 10000,
        "username": "user-0",
        "sex": "女",
        "city": "城市-0",
        "sign": "签名-0",
        "experience": 255,
        "logins": 24,
        "wealth": 82830700,
        "classify": "作家",
        "score": 57
      }, {
        "id": 10001,
        "username": "user-1",
        "sex": "男",
        "city": "城市-1",
        "sign": "签名-1",
        "experience": 884,
        "logins": 58,
        "wealth": 64928690,
        "classify": "词人",
        "score": 27
      }, {
        "id": 10002,
        "username": "user-2",
        "sex": "女",
        "city": "城市-2",
        "sign": "签名-2",
        "experience": 650,
        "logins": 77,
        "wealth": 6298078,
        "classify": "酱油",
        "score": 31
      }, {
        "id": 10003,
        "username": "user-3",
        "sex": "女",
        "city": "城市-3",
        "sign": "签名-3",
        "experience": 362,
        "logins": 157,
        "wealth": 37117017,
        "classify": "诗人",
        "score": 68
      }, {
        "id": 10004,
        "username": "user-4",
        "sex": "男",
        "city": "城市-4",
        "sign": "签名-4",
        "experience": 807,
        "logins": 51,
        "wealth": 76263262,
        "classify": "作家",
        "score": 6
      }, {
        "id": 10005,
        "username": "user-5",
        "sex": "女",
        "city": "城市-5",
        "sign": "签名-5",
        "experience": 173,
        "logins": 68,
        "wealth": 60344147,
        "classify": "作家",
        "score": 87
      }, {
        "id": 10006,
        "username": "user-6",
        "sex": "女",
        "city": "城市-6",
        "sign": "签名-6",
        "experience": 982,
        "logins": 37,
        "wealth": 57768166,
        "classify": "作家",
        "score": 34
      }, {
        "id": 10007,
        "username": "user-7",
        "sex": "男",
        "city": "城市-7",
        "sign": "签名-7",
        "experience": 727,
        "logins": 150,
        "wealth": 82030578,
        "classify": "作家",
        "score": 28
      }, {
        "id": 10008,
        "username": "user-8",
        "sex": "男",
        "city": "城市-8",
        "sign": "签名-8",
        "experience": 951,
        "logins": 133,
        "wealth": 16503371,
        "classify": "词人",
        "score": 14
      }, {
        "id": 10009,
        "username": "user-9",
        "sex": "女",
        "city": "城市-9",
        "sign": "签名-9",
        "experience": 484,
        "logins": 25,
        "wealth": 86801934,
        "classify": "词人",
        "score": 75
      }]
    var title =
      [ //表头
        {field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left'}
        , {field: 'username', title: '用户名', width: 80}
        , {field: 'sex', title: '性别', width: 80, sort: true}
        , {field: 'city', title: '城市', width: 80}
        , {field: 'sign', title: '签名', width: 177}
        , {field: 'experience', title: '积分', width: 80, sort: true}
        , {field: 'score', title: '评分', width: 80, sort: true}
        , {field: 'classify', title: '职业', width: 80}
        , {field: 'wealth', title: '财富', sort: true}
      ]
    var title2 =
      [ //表头
        {field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left'}
        , {field: 'username', title: '用户名', width: 80}
        , {field: 'wealth', title: '财富', sort: true}
      ]

    //第一个实例
    var tableIns = table.render({
      elem: '#demo'
      , id: 'demoTest'
      , height: 312
      // ,url: '/demo/table/user/' //数据接口
      , data: data
      , page: true //开启分页
      , cols: [title]
    });

    $("#buttonChangeTitle").on("click", function () {
      $("#myTable").empty();
      $("#myTable").append('<table id="demo"></table>');

      //第一个实例
      var tableIns2 = table.render({
        elem: '#demo'
        , id: 'demoTest'
        , height: 312
        // ,url: '/demo/table/user/' //数据接口
        , data: data
        , page: true //开启分页
        , cols: [title2]
      });
    })


  })
</script>

</body>
</html>

点击前效果:

layui table动态表头 改变表格头部 重新加载表格的方法

点击后效果:

layui table动态表头 改变表格头部 重新加载表格的方法

以上这篇layui table动态表头 改变表格头部 重新加载表格的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ajax 同步请求和异步请求的差异分析
Jul 04 Javascript
分享JavaScript获取网页关闭与取消关闭的事件
Dec 13 Javascript
jfreechart插件将数据展示成饼状图、柱状图和折线图
Apr 13 Javascript
flash+jQuery实现可关闭及重复播放的压顶广告
Apr 15 Javascript
详解Node.js包的工程目录与NPM包管理器的使用
Feb 16 Javascript
浅谈$('div a') 与$('div&gt;a')的区别
Jul 18 Javascript
jQuery layui常用方法介绍
Jul 25 Javascript
[js高手之路]单例模式实现模态框的示例
Sep 01 Javascript
js移动端图片压缩上传功能
Aug 18 Javascript
vue实现图片滚动的示例代码(类似走马灯效果)
Mar 03 Javascript
详解如何构建一个Angular6的第三方npm包
Sep 07 Javascript
vue实现数字动态翻牌的效果(开箱即用)
Dec 08 Javascript
原生js实现3D轮播图
Mar 21 #Javascript
解决layui弹出层layer的area过大被遮挡的问题
Sep 21 #Javascript
关于layui flow loading占位图的实现方法
Sep 21 #Javascript
layui switch 开关监听 弹出确定状态转换的例子
Sep 21 #Javascript
微信小程序实现3D轮播图效果(非swiper组件)
Sep 21 #Javascript
微信小程序自定义波浪组件使用方法详解
Sep 21 #Javascript
LayUi使用switch开关,动态的去控制它是否被启用的方法
Sep 21 #Javascript
You might like
PHP Memcached应用实现代码
2010/02/08 PHP
PHP 命令行参数详解及应用
2011/05/18 PHP
PHP数组遍历的几种常见方式总结
2019/02/15 PHP
疯掉了,尽然有js写的操作系统
2007/04/23 Javascript
数组方法解决JS字符串连接性能问题有争议
2011/01/12 Javascript
8个实用的jQuery技巧
2014/03/04 Javascript
详细解密jsonp跨域请求
2015/04/15 Javascript
JS实现窗口加载时模拟鼠标移动的方法
2015/06/03 Javascript
分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug
2016/01/10 Javascript
基于jQuery的checkbox全选问题分析
2016/11/18 Javascript
基于vue2框架的机器人自动回复mini-project实例代码
2017/06/13 Javascript
浅谈JavaScript find 方法不支持IE的问题
2017/09/28 Javascript
基于JavaScript实现幸运抽奖页面
2020/07/05 Javascript
修改npm全局安装模式的路径方法
2018/05/15 Javascript
JS实现的检验身份证格式并输出出生日期,年龄,性别,出生地示例
2019/05/17 Javascript
JS中的算法与数据结构之链表(Linked-list)实例详解
2019/08/20 Javascript
vue获取验证码倒计时组件
2019/08/26 Javascript
vue+element实现图片上传及裁剪功能
2020/06/29 Javascript
Vue项目配置跨域访问和代理proxy设置方式
2020/09/08 Javascript
python计算圆周长、面积、球体体积并画出圆
2014/04/08 Python
Python中的面向对象编程详解(下)
2015/04/13 Python
Django中使用locals()函数的技巧
2015/07/16 Python
Python爬取阿拉丁统计信息过程图解
2020/05/12 Python
Python-split()函数实例用法讲解
2020/12/18 Python
CSS3 实现的缩略图悬停效果
2020/12/09 HTML / CSS
简单介绍HTML5中的文件导入
2015/05/08 HTML / CSS
美国知名日用品连锁超市:Dollar General(多来店)
2017/01/14 全球购物
Shopbop中文官网:美国亚马逊旗下时尚购物网站
2020/12/15 全球购物
促销活动策划方案
2014/01/12 职场文书
中学生检讨书范文
2014/11/03 职场文书
2014年检验员工作总结
2014/11/19 职场文书
2015年小学中秋节活动总结
2015/03/23 职场文书
学雷锋献爱心倡议书
2015/04/27 职场文书
因工资原因离职的辞职信范文
2015/05/12 职场文书
NodeJs内存占用过高的排查实战记录
2021/05/10 NodeJs
MySql统计函数COUNT的具体使用详解
2022/08/14 MySQL