改变头部原理: 删除原来表格, 重新建立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">

</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动态表头 改变表格头部 重新加载表格的更多相关文章

  1. Layui数据表格/搜索重加载/分条件操作/工具条监听

    <div class="layui-layout layui-layout-admin" style="padding-left: 20px;"> ...

  2. JavaScript之加载表格、表单行数据[插件]

    /*** * name:加载表格或表单数据[通用] * name:load-table-or-form-data-common.js * * author:zengtai * date:2017-07 ...

  3. jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法

    博客分类: jquery-easyui jQueryAjax框架HTML  现象: AJAX返回的html无法做到自动渲染为EasyUI的样式.比如:class="easyui-layout ...

  4. layui table 根据条件改变更换表格颜色 高亮显示 数据筛选

    请问想让当layui表格的某个字段符合某个条件的时候,让该行变颜色.这样可以实现么. layui数据表格怎么更换表格颜色 layui表格 通过判断某一行中的某一列的值进行设置这一行的颜色 LayUI之 ...

  5. layui table+复杂表头+合并单元格

    效果图: 问题:行hover效果感觉错乱  所以改为透明色 代码: <!DOCTYPE html> <html lang="en"> <head> ...

  6. LayUI Table复杂表头实现

    LayUI table官方文档中在介绍复杂表头时的用例仅使用了自动渲染的方式作为参考,而并未用到方法渲染的方式来做用例,这让部分不太熟悉layUI table的开发者会有些头疼,不知道如何在方法渲染中 ...

  7. 根据JSON对象动态加载表格--大数据量

    EasyUI的DataGrid加载数据的时候,如果列数过多(300列以上),数据渲染及其缓慢. JSON对象格式: 1:rowno 2:title 3:colspan 4:rowspan 5:back ...

  8. Go 用JSON加载表格数据

    支持热重载reload,但会有一些问题,下面注释有写 package table import ( "runtime/debug" ) //IntArray int类型数组 typ ...

  9. VC++ 动态创建单个工具条,并加载外部的位图（bmp）文件为工具栏图像

    步骤: 1, 在框架类CMainFrame头文件里,增加图像变量和工具条变量. CMFCToolBarImages m_UserImages; CMFCToolBar m_wndToolBar; 2, ...

随机推荐

  1. OWIN 自托管静态网站

    我们知道,借助OWIN,WebApi,SignalR,WCF 都可以创建自托管(Self-Host)实例,完全不需要IIS,静态网站也可以. 最近做一个服务器监控小工具,用 SignalR 通信,监控 ...

  2. Linux 用脚本编写搭建yum本地仓库

    Linux 用脚本编写搭建yum本地仓库 源码如下: #!/bin/bash #该脚本用于自动化搭建本地yum仓库 #挂载光盘 #作者:雨中落叶 #博客:https://www.cnblogs.com ...

  3. Effective Java 第三版——60. 需要精确的结果时避免使用float和double类型

    Tips 书中的源代码地址:https://github.com/jbloch/effective-java-3e-source-code 注意,书中的有些代码里方法是基于Java 9 API中的,所 ...

  4. 1.numpy的用法

    numpy创建ndarray对象的三种方法 1.1.list转化 In [8]: import numpy as np In [9]: a = [1,2,3,4] In [10]: x1 = np.a ...

  5. Docker 镜像、容器、仓库的概念及基本操作

    Docker 包括三个基本概念: 镜像(Image)容器(Container)仓库(Repository) 这三部分组成了Docker的整个生命周期,如下图所示,容器是由镜像实例化而来的,这和我们学习 ...

  6. sql server 备份与恢复系列四 大容量模式下的备份与还原

    一. 概述 在sql server 备份与恢复系列的第一篇里,有讲到大容量模式下备份与还原的相关知识.这篇重点来演示在大容量模式下常用的备份与还原模式“完整备份+差异备份+日志备份”. 在大容量恢复模 ...

  7. sql server 性能调优之 资源等待SOS_SCHEDULER_YIELD

    一.概念 SOS_SCHEDULER_YIELD等待类型是一个任务自愿放弃当前的资源占用,让给其他任务使用.   这个等待类型与CPU有直接关系,与内存与也有间接关系,与CPU有关系是因为在sql s ...

  8. 浅谈Unity3D 骨骼动画

    转载请标明出处http://www.cnblogs.com/zblade/ 最近研究了一下游戏中模型的骨骼动画的原理,做一个学习笔记,便于大家共同学习探讨. ps:最近改bug改的要死要活,博客写的吭 ...

  9. 微信小程序 WXS实现json数据需要做过滤转义（filter）

    前言 最近有在做小程序开发,在开发的过程中碰到一点小问题,描述一下先. 本人在职的公司对于后台获取的 json 数据需要做过滤转义的很多,不同的状态码会对应不同的文字,但是在微信小程序中又没有类似 v ...

  10. shiro 获取请求头中的 rememberMe

    前言: 上一篇提到了, 将 sessionId 放到请求头中去, 那rememberMe是否也可以放到请求头中去呢. 其实不管是sessionId还是rememberMe, shiro都会默认往coo ...