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">
</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数据表格/搜索重加载/分条件操作/工具条监听
<div class="layui-layout layui-layout-admin" style="padding-left: 20px;"> ...
- JavaScript之加载表格、表单行数据[插件]
/*** * name:加载表格或表单数据[通用] * name:load-table-or-form-data-common.js * * author:zengtai * date:2017-07 ...
- jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法
博客分类: jquery-easyui jQueryAjax框架HTML 现象: AJAX返回的html无法做到自动渲染为EasyUI的样式.比如:class="easyui-layout ...
- layui table 根据条件改变更换表格颜色 高亮显示 数据筛选
请问想让当layui表格的某个字段符合某个条件的时候,让该行变颜色.这样可以实现么. layui数据表格怎么更换表格颜色 layui表格 通过判断某一行中的某一列的值进行设置这一行的颜色 LayUI之 ...
- layui table+复杂表头+合并单元格
效果图: 问题:行hover效果感觉错乱 所以改为透明色 代码: <!DOCTYPE html> <html lang="en"> <head> ...
- LayUI Table复杂表头实现
LayUI table官方文档中在介绍复杂表头时的用例仅使用了自动渲染的方式作为参考,而并未用到方法渲染的方式来做用例,这让部分不太熟悉layUI table的开发者会有些头疼,不知道如何在方法渲染中 ...
- 根据JSON对象动态加载表格--大数据量
EasyUI的DataGrid加载数据的时候,如果列数过多(300列以上),数据渲染及其缓慢. JSON对象格式: 1:rowno 2:title 3:colspan 4:rowspan 5:back ...
- Go 用JSON加载表格数据
支持热重载reload,但会有一些问题,下面注释有写 package table import ( "runtime/debug" ) //IntArray int类型数组 typ ...
- VC++ 动态创建单个工具条,并加载外部的位图（bmp）文件为工具栏图像
步骤: 1, 在框架类CMainFrame头文件里,增加图像变量和工具条变量. CMFCToolBarImages m_UserImages; CMFCToolBar m_wndToolBar; 2, ...
随机推荐
- 第60节:Java中的JavaScript技术
欢迎到我的简书查看我的文集 前言: JavaScript是什么呢?它是一种基于对象和事件驱动的脚本语言,主要是应用于客户端上的.JavaScript它可以做到信息的动态交互,具有交互性,它不允许直接访 ...
- Python学习笔记【第四篇】：基本数据类型
变量:处理数据的状态 变量名 = 状态值 类型 python中有以下基本数据类型: 1:整形 2:字符串类型 3:Bool类型 4:列表 5:元祖(不可变) 6:字典(无序) 7:集合 (无序.不重复 ...
- JSP内置对象的使用(一)
JSP九大内置对象是:request.response.session.application.out.pagecontext.config.page.exception. JSP常用的内置对象是:o ...
- centos 7 mariadb安装
centos 7 mariadb安装 1.安装MariaDB 安装命令 yum -y install mariadb mariadb-server 安装完成MariaDB,首先启动MariaDB sy ...
- Eureka客户端注册多网卡下IP选择问题
在使用Spring Cloud多人协作开发时有一个场景:我本机启动了Eureka注册中心,其他人机器需要将服务注册到我本机的Eureka.(服务端和客户端在不同机器上) 这时出现了一个问题:服务成功注 ...
- javaweb之Filter过滤器详解
快速入门 1.新建一个类,实现Filter接口 2.实现doFilter()方法,打印一句话,来证明能够进行拦截 3.在web.xml中进行配置(参照Servlet配置) 4.访问一个页面,看看能不能 ...
- leetcode — valid-number
/** * * Source : https://oj.leetcode.com/problems/valid-number/ * * * Validate if a given string is ...
- git 下载部分目录
需求 github上整个工厂比较大,下起来费劲,如何只下载一个单独的文件件呢? 方法一 以:https://github.com/eugenp/tutorials为例,下载其中的 spring-kaf ...
- Session提要
Session即会话,批一种持续性的.双向的链接.Sesstion和Cookie本质上没有什么区别,都是针对HTTP协议的局限性而提出的一种保持客户端和服务器间保持会话连接状态的机制. S ...
- LeetCode算法扫题系列83
原创作品,可以转载,但是请标注出处地址:https://www.cnblogs.com/V1haoge/p/9104582.html LeetCode算法第83题(难度:简单) 题目:给定一个排序链表 ...