layui table动态表头 改变表格头部 重新加载表格的方法
更新时间：2019年09月21日 09:58:01 作者：```...简单点
今天小编就为大家分享一篇layui 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>
点击前效果：
点击后效果：
以上这篇layui table动态表头 改变表格头部 重新加载表格的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了JS前向后瞻正则表达式定义与用法,分析了前向后瞻正则表达式的具体定义、功能及具体使用技巧,需要的朋友可以参考下2016-12-12
这篇文章主要给大家介绍了关于微信小程序实现2048小游戏的相关资料,文中将实现的代码介绍的非常详细,对大家学习或者使用微信小程序具有一定的参考学习价值,需要的朋友可以参考下2021-09-09
最近用js写了一个计算器的页面。基本上使用到了，ul li的几点用法。用来布局，并且创造出了很不错的鼠标悬停效果。2010-04-04
在 ASP.NET Form 中使用 jBox 的时候，在按钮注册的客户端点击事件中，会发现不能弹出对话框问题2012-11-11
这篇文章主要给大家介绍了关于在Typescript中如何使用for...in的相关资料,以及TypeScript中使用for...in遍历对象属性会报错的解决办法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-03-03
对象其实就是一组数据和功能的集合。对象可以通过执行new操作符后跟要创建的对象类型的名称来创建。而创建Object类型的实例并为其添加属性和（或）方法，就可以创建自定义对象2016-01-01
这篇文章主要介绍了JS+WCF实现进度条实时监测数据加载量的方法,结合实例形式分析了大量数据导入过程中前台js与后台WCF交互实现实时显示加载进度的相关操作技巧,需要的朋友可以参考下2017-12-12
最近领导安排做一个小程序之做头部做导航分类效果，下面小编给大家分享实现代码，需要的朋友参考下吧2017-10-10
本文为大家介绍了一个简单的 JavaScript 项目，可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片，只需点击一下即可将其转换为 PDF 文件，感兴趣的可以动手尝试一下2022-07-07
本篇文章主要介绍了js制作简单的音乐播放器的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
最新评论