Layui实现根据条件改变表头

最新推荐文章于 2023-05-20 14:11:02 发布
最新推荐文章于 2023-05-20 14:11:02 发布
阅读量1.7k 收藏 6
点赞数
分类专栏： 前端 文章标签： javascript html5 jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44104099/article/details/107335224
版权

一： 需求

使用layui框架，请求后台数据并将数据渲染到表格中。

要求：根据 收支科目 调整表头展示项。

二：数据源 - cols.js

/**
 * 表格头部数据
 * @type {{title: *[]}}
 */
let tableTitle = {
    title: [
        {
            id: '0',
            data: [
                {field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left'}
                , {field: 'username', title: '用户名', width: 80}
                , {field: 'sex', title: '性别', width: 80, sort: true}
                , {field: 'sign', title: '签名', width: 177}
                , {field: 'wealth', title: '财富', width: 135, sort: true}
            ]
        },
        {
            id: '1',
            data: [
                {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: '财富', width: 135, sort: true}
            ]
        },
        {
            id: '2',
            data: [
                {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: 'classify', title: '职业', width: 80}
                , {field: 'wealth', title: '财富', width: 135, sort: true}
            ]
        }
    ]
};

/**
 * 数据源
 * @type {*[]}
 */
let tableData = [{
    "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
}, {
    "id": 10010,
    "username": "user-10",
    "sex": "女",
    "city": "城市-10",
    "sign": "签名-10",
    "experience": 1016,
    "logins": 182,
    "wealth": 71294671,
    "classify": "诗人",
    "score": 34
}, {
    "id": 10011,
    "username": "user-11",
    "sex": "女",
    "city": "城市-11",
    "sign": "签名-11",
    "experience": 492,
    "logins": 107,
    "wealth": 8062783,
    "classify": "诗人",
    "score": 6
}, {
    "id": 10012,
    "username": "user-12",
    "sex": "女",
    "city": "城市-12",
    "sign": "签名-12",
    "experience": 106,
    "logins": 176,
    "wealth": 42622704,
    "classify": "词人",
    "score": 54
}, {
    "id": 10013,
    "username": "user-13",
    "sex": "男",
    "city": "城市-13",
    "sign": "签名-13",
    "experience": 1047,
    "logins": 94,
    "wealth": 59508583,
    "classify": "诗人",
    "score": 63
}, {
    "id": 10014,
    "username": "user-14",
    "sex": "男",
    "city": "城市-14",
    "sign": "签名-14",
    "experience": 873,
    "logins": 116,
    "wealth": 72549912,
    "classify": "词人",
    "score": 8
}, {
    "id": 10015,
    "username": "user-15",
    "sex": "女",
    "city": "城市-15",
    "sign": "签名-15",
    "experience": 1068,
    "logins": 27,
    "wealth": 52737025,
    "classify": "作家",
    "score": 28
}, {
    "id": 10016,
    "username": "user-16",
    "sex": "女",
    "city": "城市-16",
    "sign": "签名-16",
    "experience": 862,
    "logins": 168,
    "wealth": 37069775,
    "classify": "酱油",
    "score": 86
}, {
    "id": 10017,
    "username": "user-17",
    "sex": "女",
    "city": "城市-17",
    "sign": "签名-17",
    "experience": 1060,
    "logins": 187,
    "wealth": 66099525,
    "classify": "作家",
    "score": 69
}, {
    "id": 10018,
    "username": "user-18",
    "sex": "女",
    "city": "城市-18",
    "sign": "签名-18",
    "experience": 866,
    "logins": 88,
    "wealth": 81722326,
    "classify": "词人",
    "score": 74
}, {
    "id": 10019,
    "username": "user-19",
    "sex": "女",
    "city": "城市-19",
    "sign": "签名-19",
    "experience": 682,
    "logins": 106,
    "wealth": 68647362,
    "classify": "词人",
    "score": 51
}, {
    "id": 10020,
    "username": "user-20",
    "sex": "男",
    "city": "城市-20",
    "sign": "签名-20",
    "experience": 770,
    "logins": 24,
    "wealth": 92420248,
    "classify": "诗人",
    "score": 87
}, {
    "id": 10021,
    "username": "user-21",
    "sex": "男",
    "city": "城市-21",
    "sign": "签名-21",
    "experience": 184,
    "logins": 131,
    "wealth": 71566045,
    "classify": "词人",
    "score": 99
}, {
    "id": 10022,
    "username": "user-22",
    "sex": "男",
    "city": "城市-22",
    "sign": "签名-22",
    "experience": 739,
    "logins": 152,
    "wealth": 60907929,
    "classify": "作家",
    "score": 18
}, {
    "id": 10023,
    "username": "user-23",
    "sex": "女",
    "city": "城市-23",
    "sign": "签名-23",
    "experience": 127,
    "logins": 82,
    "wealth": 14765943,
    "classify": "作家",
    "score": 30
}, {
    "id": 10024,
    "username": "user-24",
    "sex": "女",
    "city": "城市-24",
    "sign": "签名-24",
    "experience": 212,
    "logins": 133,
    "wealth": 59011052,
    "classify": "词人",
    "score": 76
}, {
    "id": 10025,
    "username": "user-25",
    "sex": "女",
    "city": "城市-25",
    "sign": "签名-25",
    "experience": 938,
    "logins": 182,
    "wealth": 91183097,
    "classify": "作家",
    "score": 69
}, {
    "id": 10026,
    "username": "user-26",
    "sex": "男",
    "city": "城市-26",
    "sign": "签名-26",
    "experience": 978,
    "logins": 7,
    "wealth": 48008413,
    "classify": "作家",
    "score": 65
}, {
    "id": 10027,
    "username": "user-27",
    "sex": "女",
    "city": "城市-27",
    "sign": "签名-27",
    "experience": 371,
    "logins": 44,
    "wealth": 64419691,
    "classify": "诗人",
    "score": 60
}, {
    "id": 10028,
    "username": "user-28",
    "sex": "女",
    "city": "城市-28",
    "sign": "签名-28",
    "experience": 977,
    "logins": 21,
    "wealth": 75935022,
    "classify": "作家",
    "score": 37
}, {
    "id": 10029,
    "username": "user-29",
    "sex": "男",
    "city": "城市-29",
    "sign": "签名-29",
    "experience": 647,
    "logins": 107,
    "wealth": 97450636,
    "classify": "酱油",
    "score": 27
}];

/**
 * 获取表格头部
 * @param id 条件
 * @returns {*[]|*} 表格头部数据
 */
function getTableTitle(id) {
    console.log("我进来了---");
    let result = tableTitle.title[0].data;
    tableTitle.title.forEach(item => {
        if (id === item.id) {
            result = item.data
        }
    });
    return result;
}

三：代码实现


<html>
<head>
    <meta charset="utf-8">
    <title>激励分Demo</title>
    <meta content="webkit" name="renderer">
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-control" content="no-cache">
    <meta http-equiv="Cache" content="no-cache">
    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"
          name="viewport">
    <link href="layuiadmin/layui/css/layui.css" media="all" rel="stylesheet">
    <link href="layuiadmin/style/admin.css" media="all" rel="stylesheet">
    <link href="layuiadmin/style/login.css" media="all" rel="stylesheet">

    <style>
        .layui-table th {
            font-weight: bold;
        }
    </style>
</head>

<body>
<div class="layui-form demoTable" style="padding-top: 14px;">
    <div class="layui-row layui-col-space12 layui-form-item">
        <div class="layui-col-md3">
            <label class="layui-form-label">职位:</label>
            <div class="layui-input-inline">
                <select name="classify" id="classify">
                    <option value="-1"></option>
                    <option value="0">作家</option>
                    <option value="1">词人</option>
                    <option value="2">诗人</option>
                </select>
            </div>
        </div>
        <div class="layui-col-md2">
            <button class="layui-btn" data-type="reload">查 询</button>
        </div>
    </div>
</div>

<table class="layui-hide" id="test"></table>

<script src="layuiadmin/layui/layui.js"></script>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="cols.js"></script>
<script>
    layui.config({
        base: 'layuiadmin/'
    }).extend({
        index: 'lib/index'
    }).use('table', function () {
        let table = layui.table;
        let id = $('#classify').val();
        table.render({
            elem: '#test'
            , data: tableData
            , cols: [getTableTitle(id)]
            , id: 'testReload'
            , page: true
            , limits: [10, 15, 20]
            , limit: 15
            , size: 'sm'
        });
        let active = {
            reload: function () {
                let id2 = $('#classify').val();
                table.reload('testReload', {
                    cols: [getTableTitle(id2)]
                    , page: {curr: 1}
                });
            }
        };

        $('.demoTable .layui-btn').on('click', function () {
            let type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });

</script>

</body>
</html>

四：效果展示

在这里插入图片描述

在这里插入图片描述

五：存在问题

问题：当表头列数多于下一次需要渲染的列数时，多余的列数并不会清楚

解决方法：每一次查询都去删除表头，再重新添加
实现：

  1. 添加div，将table包住
<div id="myTable">
    <table class="layui-hide" id="test"></table>
</div>
  1. 修改查询方法实现
let active = {
	reload: function () {
		let id2 = $('#classify').val();
		
        $("#myTable").empty();
        $("#myTable").append('<table class="layui-hide" id="test"></table>');

         table.render({
			elem: '#test'
            , data: tableData
            , cols: [getTableTitle(id2)]
            , id: 'testReload'
            , page: true
            , limits: [10, 15, 20]
            , limit: 15
            , size: 'sm'
		});
	}
};
Yaien_jacky
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
layui动态表头的实现代码
10-16
主要介绍了layui动态表头的实现代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
layUI-table动态表格表头
Rella的博客
10-24 3934
layUI-table动态表格表头
layui表格添加title属性
JS逻辑运算符
08-19 2989
layui表格添加title属性 ,{field:'sign', title:'签名', templet:function(b){ console.log('悬停数据',b) var box="<div title='"+ b.sign +"'>"+b.sign+"</div>" return box } }
layui中table表头样式修改方法
10-18
今天小编就为大家分享一篇layui中table表头样式修改方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
layui设置表格表头字体_layui中table表头样式修改方法
weixin_39657521的博客
12-20 2482
layui.use('table', function () {var table = layui.table;table.render({elem: '#desTable', url: '${ctx}/alarm/queryEventShowScatter', even: true, page: { //支持传入 laypage 组件的所有参数(某些参数除外，如：jump/elem) - 详见文...
layui 数据表格表头动态修改
u011267841的博客
06-20 1万+
一般情况下,数据表格表头是固定的,不会轻易改变,但是由于业务的需要,表格的表头需要动态修改,有很多方法: 1.在html页面分别设置成不同的数据表格,根据点击事件来show或者hide,这样可以达到我们的目的,但是,这样违法了代码精简的原则,出现了很多重复的代码. 2.直接通过js来实现不同的表格,通过点击事件来做if-else操作,这样会造成js代码的冗余,不符合代码精简的原则. 3.我们...
layui table 更换 表格头信息
萌神30号 ↝
12-09 364
前言 layui会自动封装 table各种参数，包括自动生成好 表格 头信息，当查询数据返回时，会自动填充 例子 done: function (res, curr, count) { if(0 != count) { var name = res.data[0].name; var id = res....
layui设置表格表头字体_Layui表格自定义表格字体样式
weixin_39751453的博客
12-20 280
该楼层疑似违规已被系统折叠隐藏此楼查看此楼Layui表格中单元格样式可通过templet-自定义模板改变单元格内容样式：在默认情况下，单元格的内容是完全按照数据接口返回的content原样输出的，如果你想对某列的单元格添加链接等其它元素，你可以借助templet参数来轻松实现。这是一个非常实用且强大的功能，你的表格内容会因此而丰富多样。templet 提供了三种使用方式，请结合实际场景选择最合适...
layui table动态表头 改变表格头部 重新加载表格的方法
10-16
今天小编就为大家分享一篇layui table动态表头 改变表格头部 重新加载表格的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
layui请求接口后table.rander设置表格的表头和数据
来一颗砂糖橘
05-20 1万+
在layui中，用ajax获取接口数据后，对表格进行表头cols和数据列表data的设置。
layui table 表头动态修改
G_ruirui的博客
03-11 1935
layui table 表头动态修改
layui动态修改表格内容
热门推荐
Ghjkku的博客
03-19 13万+
layui动态表格，动态修改表格内容 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Layui</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> .
Layui表格的修改
执笔诉情思的博客
07-26 786
Layui表格的修改 开发工具与关键技术： Visual Studio 2015 – jQuery 作者：廖亚星 撰写时间：2019年 7 月 20日 当数据在Layui在表格上显示的时候，我们可以对表格中的数据进行修改，只需要在cols中设置 edit: true就可以修改了，默认选择商品的数量为1，现在我将其中一条数据的数量修改为10，可以发现，虽然表格中的数据修改了，但是下...
layui layer.open 弹窗，title标题根据不同场景显示不同的值
旺仔milk的博客
07-01 2746
以表格操作弹窗为例 表格有添加，修改，查看等等共用一个编辑弹窗，这时候弹窗标题就需要根据操作变化发生变化 废话少说，具体操作代码如下： parent.$(".layui-layer-title")[0].innerText= “要修改的内容”; //情况不同可能不需要parent的就别加 $(".layui-layer-title")[0].innerText= “要修改的内容”; ...
layui 修改弹框标题 title
乐逍遥
06-01 939
layui 修改弹框标题 title
vxetable 表头字段在查询后变换
菜鸟Gaga的博客
09-28 656
vxetable表头变换
layui-数据表格之表头
分外蓝
11-15 3474
在数据表格的div中添加 lay-filter=“roles”，以便监听 <div class="layui-inline" title="新增" lay-event="add"><i class="layui-icon layui-icon-add-1"></i></div> <div class="layui-inline" title=...
layui 数据表格 动态标题栏
qq_36636312的博客
10-21 5143
效果图 步骤 1，前端设置url 2，后端根据传递参数，查询表的元字段数据，传入前端 3，前端接收数据，遍历循环放入列中 代码 前端代码： var cols = []; function dydatagrid() { if(!interId){ dLong.layerInfo("请选择接口！"); return; } var postdata={ interId:
layui自定义导出过程(自定义标题)
星银色飞行船的博客
02-23 1494
目录 源代码修改 JS一句话导出 自定义导出的好处 一、 源代码修改 源代码修改如下：为了支持自定义导出excel的标题 找到layui.all.js文件 搜索exportFile 将d.exportFile=function(e,t,i)修改为d.exportFile=function(e,t,i,name) name这个参数就是标题名称 搜索download 将s.download=(l.title||“table_”+(l.index||"")) 修改为s.download=(name||l.t
layui实现左侧表头的表格
最新发布
09-03
以上就是使用Layui实现左侧表头的表格的两种方法。通过这些方法，我们可以方便地创建出符合需求的表格，并且能够灵活地对表格进行数据加载和操作。 ### 回答3： Layui是一款轻量级的前端框架，可以快速地实现各种...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值