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

更新时间：2020-09-14 20:24:02 作者：startmvc

改变头部原理：删除原来表格,重新建立DOM元素,重新加载table,实现表头改变明白了原理,我相

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

点击前效果：