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 相关文章推荐
漂亮的仿flash菜单,来自蓝色经典
Jun 26 Javascript
extjs 列表框(multiselect)的动态添加列表项的方法
Jul 31 Javascript
javascript 设为首页与加入收藏兼容多浏览器代码
Jan 11 Javascript
获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)
Feb 14 Javascript
javascript语言结构小记(一)
Sep 10 Javascript
jQuery EasyUI API 中文文档 - NumberBox数字框
Oct 13 Javascript
推荐6款基于jQuery实现图片效果插件
Dec 07 Javascript
基于构造函数的五种继承方法小结
Jul 27 Javascript
Vue父组件调用子组件事件方法
Feb 23 Javascript
实现Vue的markdown文档可以在线运行的方法示例
Dec 11 Javascript
其实你可以少写点if else与switch(推荐)
Jan 10 Javascript
Javascript实现html转pdf高清版(提高分辨率)
Feb 19 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批量删除、清除UTF-8文件BOM头的代码实例
2014/04/14 PHP
Laravel框架中扩展函数、扩展自定义类的方法
2014/09/04 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
JavaScript 轻松搞定快捷留言功能 只需一行代码
2010/04/01 Javascript
用jquery实现自定义风格的滑动条实现代码
2011/04/26 Javascript
IE6-IE9不支持table.innerHTML的解决方法分享
2012/09/14 Javascript
JS验证控制输入中英文字节长度(input、textarea等)具体实例
2013/06/21 Javascript
基于jquery的文字向上跑动类似跑马灯的效果
2014/09/22 Javascript
jquery+CSS3实现淘宝移动网页菜单效果
2015/08/31 Javascript
jquery特效 点击展示与隐藏全文
2015/12/09 Javascript
JS实现间歇滚动的运动效果实例
2016/12/22 Javascript
Vuex之理解Mutations的用法实例
2017/04/19 Javascript
nodejs 十六进制字符串型数据与btye型数据相互转换
2018/07/30 NodeJs
vue基于element的区间选择组件
2018/09/07 Javascript
Vue实现指令式动态追加小球动画组件的步骤
2020/12/18 Vue.js
Python中使用asyncio 封装文件读写
2016/09/11 Python
python处理xml文件的方法小结
2017/05/02 Python
Python学习入门之区块链详解
2017/07/25 Python
Python列表推导式与生成器表达式用法示例
2018/02/08 Python
Django框架模板文件使用及模板文件加载顺序分析
2019/05/23 Python
对Django中static(静态)文件详解以及{% static %}标签的使用方法
2019/07/28 Python
WxPython实现无边框界面
2019/11/18 Python
Python读取分割压缩TXT文本文件实例
2020/02/14 Python
Python的Django框架实现数据库查询(不返回QuerySet的方法)
2020/05/19 Python
利用纯css3实现的文字亮光特效的代码演示
2014/11/27 HTML / CSS
欧舒丹美国官网:L’Occitane美国
2018/02/23 全球购物
联想印度官方网上商店:Lenovo India
2019/08/24 全球购物
Eclipse面试题
2014/03/22 面试题
会计专业毕业生自我评价
2013/09/25 职场文书
大学毕业感言
2014/01/10 职场文书
幼儿园教师请假制度
2014/01/16 职场文书
公司节能减排方案
2014/05/16 职场文书
公司门卫工作职责
2014/06/28 职场文书
员工辞退通知书
2015/04/17 职场文书
Python实战之实现简易的学生选课系统
2021/05/25 Python
python内置模块之上下文管理contextlib
2022/06/14 Python