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 相关文章推荐
js 加载并解析XML字符串的代码
Dec 13 Javascript
浅谈JavaScript的Polymer框架中的事件绑定
Jul 29 Javascript
angular源码学习第一篇 setupModuleLoader方法
Oct 20 Javascript
浅谈javascript中的三种弹窗
Oct 21 Javascript
原生js封装添加class,删除class的实例
Nov 06 Javascript
webpack 4.0.0-beta.0版本新特性介绍
Feb 10 Javascript
node前端开发模板引擎Jade的入门
May 11 Javascript
vue中接口域名配置为全局变量的实现方法
Sep 20 Javascript
vuejs中监听窗口关闭和窗口刷新事件的方法
Sep 21 Javascript
深入理解 Koa 框架中间件原理
Oct 18 Javascript
微信小程序实现左滑动删除效果
Mar 30 Javascript
JavaScript点击按钮生成4位随机验证码
Jan 28 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
mysql 性能的检查和优化方法
2009/06/21 PHP
基于Windows下Apache PHP5.3.1安装教程
2010/01/08 PHP
Laravel搭建后台登录系统步骤详解
2016/07/26 PHP
jquery中对表单的基本操作代码
2010/07/29 Javascript
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
2013/06/19 Javascript
cookie.js 加载顺序问题怎么才有效
2013/07/31 Javascript
详细介绍8款超实用JavaScript框架
2013/10/25 Javascript
javascipt匹配单行和多行注释的正则表达式
2013/11/20 Javascript
jQuery动态显示和隐藏datagrid中的某一列的方法
2013/12/11 Javascript
js表单提交和submit提交的区别实例分析
2015/12/10 Javascript
JS实现的样式切换功能tableCSS实例
2016/12/30 Javascript
jQuery弹出层插件popShow(改进版)用法示例
2017/01/23 Javascript
JavaScript实现前端实时搜索功能
2020/03/26 Javascript
详解angularJS动态生成的页面中ng-click无效解决办法
2017/06/19 Javascript
vue 设置proxyTable参数进行代理跨域
2018/04/09 Javascript
React中使用async validator进行表单验证的实例代码
2018/08/17 Javascript
extract-text-webpack-plugin用法详解
2019/02/14 Javascript
微信小程序基于canvas渐变实现的彩虹效果示例
2019/05/03 Javascript
微信小程序使用自定义组件导航实现当前页面高亮
2020/01/02 Javascript
jQuery 选择方法及$(this)用法实例分析
2020/05/19 jQuery
vue大型项目之分模块运行/打包的实现
2020/09/21 Javascript
Python函数式编程指南(四):生成器详解
2015/06/24 Python
python根据日期返回星期几的方法
2015/07/06 Python
使用Python脚本和ADB命令实现卸载App
2017/02/10 Python
Python实现的rsa加密算法详解
2018/01/24 Python
python+pandas+时间、日期以及时间序列处理方法
2018/07/10 Python
python 计算两个列表的相关系数的实现
2019/08/29 Python
.NET面试题:什么是反射
2016/09/30 面试题
残疾人创业典型事迹
2014/02/01 职场文书
手机促销活动方案
2014/02/05 职场文书
春节晚会主持词
2014/03/24 职场文书
市场部经理岗位职责
2014/04/10 职场文书
大学生第一学年自我鉴定
2014/09/12 职场文书
十佳少年事迹材料
2014/12/25 职场文书
源码解读Spring-Integration执行过程
2021/06/11 Java/Android
MySQL 数据类型详情
2021/11/11 MySQL