文档章节

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

o
 osc_gu9d45li
发布于 2019/04/04 13:15
字数 654
阅读 11
收藏 0

精选30+云产品,助力企业轻松上云!>>>

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


点击前效果:

 

 

点击后效果:

 

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
layUI订单实现思路

控制器用到的方法:   首页视图,首页获取数据, 例如:public ActionResult Index() { return View(); }   添加视图,保存添加数据,   编辑视图,保存编辑数据,   删除数据,订单...

osc_3rgq3dae
2019/08/20
0
0
layui 2.4.0 发布,初秋第一版

欢迎来到 layui 2.4。本次除了 table 组件较大幅度的加强,还特别添加了业界比较常见的两款新组件:colorpicker 和 slider 。依然没有看到 tree?多选框等等你想要的功能性组件?不必着急,我...

贤心
2018/08/30
1.5W
36
layui后台管理—table 数据表格详细讲解

1.layui介绍 layui是一款采用自身模块规范编写的前端UI框架,遵循原生HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用,非常适合界面的快速开发。layui区别于那些基于MVVM底层的UI框架,不...

osc_2g0zdjro
06/24
8
0
layui table指定某一行样式

###1.想指定layui table中某一行的样式,找了这个资源可行。转自: https://blog.csdn.net/weixin44729896/article/details/100524824 效果如下图: ####2.设置Layui表格字段的字体颜色,这个...

osc_k9z4xzi8
2019/11/05
16
0
layui表格——table.render(options)(转)

一、使用方法 1、在页面代码里写一个table标签和id属性 <table id="demo" lay-filter="test"></table> 1 2、layui导入table模块 layui.use('table',function(){ var table = layui.table; t......

osc_f85py9gf
2019/05/13
23
0

没有更多内容

加载失败,请刷新页面

加载更多

聚焦餐饮行业,研究院昨发布数据显示

谈话,聚焦餐饮行业,研究院昨发布数据显示,今年上半年,全国餐饮行业招聘需求增长46.18%,平均月薪6387元.随着餐饮行业的快速发展,"如何留人"也成为餐饮企业的思考题. 记者了解到,中国饭店协会...

点击fojewio
34分钟前
20
0
3·15晚会曝光上海氪信、招财旺旺SDK包泄露隐私 后台上传交易验证码敏感信息

来源 | 央视 7月16日,央视3·15晚会曝光国美易卡、美的空调遥控器、姨妈日历、银码头等50多款软件中内嵌的SDK包读取、上传用户隐私问题。上海氪信信息技术有限公司、北京招财旺旺信息技术有...

镭射财经
44分钟前
14
0
名称=''的无效表单控件不可聚焦 - An invalid form control with name='' is not focusable

问题: I have an acute problem on my website. 我的网站上有一个严重的问题。 In Google Chrome some customers are not able to proceed to my payment page. 在Google Chrome浏览器中,某......

技术盛宴
45分钟前
14
0
Hacker News 简讯 2020-07-17

更新时间: 2020-07-17 00:00 D 2.093.0 - (dlang.org) D 2.093.0 得分:32 | 评论:2 Let’s avoid talk of ‘chemical imbalance’: it’s people in distress - (psyche.co) 让我们避免谈论“......

FalconChen
50分钟前
80
0
【LeetCode】 59 在排序数组中查找元素的第一个和最后一个位置

题目: 解题思路: 二分法 https://leetcode-cn.com/problems/find-first-and-last-position-of-element-in-sorted-array/solution/zai-pai-xu-shu-zu-zhong-cha-zhao-yuan-su-de-di-yi-/ 代......

JaneRoad
昨天
17
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部