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 相关文章推荐
JavaScript 构造函数 面相对象学习必备知识
Jun 09 Javascript
javascript 在firebug调试时用console.log的方法
May 10 Javascript
Extjs grid添加一个图片状态或者按钮的方法
Apr 03 Javascript
一个简单的jquery的多选下拉框(自写)
May 05 Javascript
有效提高JavaScript执行效率的几点知识
Jan 31 Javascript
Javascript实现检测客户端类型代码封包
Dec 03 Javascript
jQuery实现简单漂亮的Nav导航菜单效果
Mar 29 jQuery
ES6中Generator与异步操作实例分析
Mar 31 Javascript
jQuery实现火车票买票城市选择切换功能
Sep 15 jQuery
基于javascript中的typeof和类型判断(详解)
Oct 27 Javascript
js new Date()实例测试
Oct 31 Javascript
vue通过接口直接下载java生成好的Excel表格案例
Oct 26 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
各种战术和打法的原创者
2020/03/04 星际争霸
php使用MySQL保存session会话的方法
2015/06/26 PHP
PHP简单实现无限级分类的方法
2016/05/13 PHP
PHP编写登录验证码功能 附调用方法
2016/05/19 PHP
Yii实现的多级联动下拉菜单
2016/07/13 PHP
插件:检测javascript的内存泄漏
2007/03/04 Javascript
javascript各种复制代码收集
2008/09/20 Javascript
Domino中运用jQuery读取视图内容的方法
2009/10/21 Javascript
Jquery 滑入滑出效果实现代码
2010/03/27 Javascript
jquery如何改变html标签的样式(两种实现方法)
2013/01/16 Javascript
js的参数有长度限制吗?发现不能超过2083个字符
2014/04/20 Javascript
jQuery中has()方法用法实例
2015/01/06 Javascript
AngularJS全局警告框实现方法示例
2017/05/18 Javascript
React实践之Tree组件的使用方法
2017/09/30 Javascript
vue中本地静态图片路径写法
2018/03/06 Javascript
AngularJS中重新加载当前路由页面的方法
2018/03/09 Javascript
Vue对象赋值视图不更新问题及解决方法
2019/06/03 Javascript
js prototype深入理解及应用实例分析
2019/11/25 Javascript
Vue实现浏览器打印功能的代码
2020/04/17 Javascript
Python3中简单的文件操作及两个简单小实例分享
2017/06/18 Python
Python入门之后再看点什么好?
2018/03/05 Python
django用户注册、登录、注销和用户扩展的示例
2018/03/19 Python
在Python中通过getattr获取对象引用的方法
2019/01/21 Python
Python3.5以上版本lxml导入etree报错的解决方案
2019/06/26 Python
python3将变量写入SQL语句的实现方式
2020/03/02 Python
python修改linux中文件(文件夹)的权限属性操作
2020/03/05 Python
解决pytorch 交叉熵损失输出为负数的问题
2020/07/07 Python
Nisbets爱尔兰:英国最大的厨房和餐饮设备供应商
2019/01/26 全球购物
师恩难忘教学反思
2014/04/27 职场文书
申论倡议书范文
2014/05/13 职场文书
政风行风建设责任书
2014/07/23 职场文书
企业党的群众路线教育实践活动学习心得体会
2014/10/31 职场文书
党的群众路线教育实践活动个人整改措施材料
2014/11/04 职场文书
小学生大队委竞选稿
2015/11/20 职场文书
Python可变与不可变数据和深拷贝与浅拷贝
2022/04/06 Python
Python使用plt.boxplot()函数绘制箱图、常用方法以及含义详解
2022/08/14 Python