改变头部原理：删除原来表格, 重新建立DOM元素, 重新加载table,实现表头改变
明白了原理, 我相信大家都能写出来了, table.reload(ID, options)目前好像还不支持cons的基础函数变动,只能使用其他方式了,简单暴力,哈哈哈哈哈哈哈哈嗝！！
下面是示例：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 | <!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> |
点击前效果：
点击后效果：