翔奕时代

A year's plan starts with spring.

0%

layui table列属性以、判断以及加css属性

发表于 分类于 4.6k 4 分钟

这里介绍layui table前端渲染、判断、css属性添加等处理方法，在遇到需要判断的某些列值的时候可以加入这种方式

在layui.js的 table 组件中，cols 属性是用于定义表格列的配置项。
每个列的配置都是一个对象，包含了一些属性，下面是一些常用的属性及其作用：

  • field：列字段名，对应数据源中的属性名。
  • title：列标题，显示在表头中。
  • width：列宽度，可以是数字或百分比。
  • sort：是否开启排序功能，可选值为 true 或者 false。
  • align：列的水平对齐方式，可选值为 left、center 或 right。
  • templet：自定义列模板，可以是一个函数或者一个 HTML 字符串。
  • toolbar：绑定工具条，可以是一个 HTML 字符串或者一个选择器。
  • edit：是否开启单元格编辑功能，可选值为 text、select 或者 checkbox。
  • fixed：列固定，可选值为 left、right 或者 true（固定在左侧）或者 true（固定在右侧）。

处理实例：

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
$(function () {
        $('#OplogData').layTable({
            even: true, height: 'full',
            sort: {field: 'id', type: 'desc'},
            cols: [[   // 字段渲染板块
                {checkbox: true},
                {field: 'id', title: 'ID', width: 60, sort: true, align: 'center'},
                {field: 'uid', title: 'X-UID', minWidth: 60, sort: true, align: 'center'},
                {field: 'nickname', title: '昵称', minWidth: 80, sort: true, align: 'center'},
                {field: 'phone', title: '手机号码', minWidth: 50, templet: '#ViewPhoneTpl', event: "viewPhone"},
                {field: 'channel', title: '渠道', minWidth: 80},
                {field: 'origin_channel', title: '归因渠道', minWidth: 30},
                {field: 'system', title: '操作系统', minWidth: 60},
                {field: 'versionname', title: 'APP版本', minWidth: 50},
                {field: 'versioncode', title: 'APP版本值', minWidth: 50},
                {field: 'is_vip', title: 'VIP状态', minWidth: 40, align: 'center'},
                {field: 'vip_type', title: 'VIP类型', minWidth: 40, align: 'center'},
                {field: 'created_at', title: '添加时间', minWidth: 160, align: 'center'},
                {field: 'expired_at', title: 'vip到期时间', minWidth: 160, align: 'center'},
                {field: 'state', title: '状态', minWidth: 110, align: 'center', templet: '#StatusSwitchTpl'},
                {toolbar: '#toolbar', title: '操作面板', minWidth: 250, align: 'center'},
            ]],
            // 对某些字段的处理 判断、css属性
            done: function(res, curr, count) {
                $("[data-field='is_vip']").children().each(function() {
                    if ($(this).text() == 1) {
                        $(this).text("是").css('color', 'red');
                    }
                    if ($(this).text() == 0) {
                        $(this).text("否").css('color', '#ccc');
                    }
                });
                // 会员状态 0：非会员   1=>天 2=>月 3=>季 4=>年 6=>手动 10=>终身
                $("[data-field='vip_type']").children().each(function (){
                    if ($(this).text() == 1) {
                        $(this).text("天会员").css('color', '#00FF00');
                    }
                    if ($(this).text() == 2) {
                        $(this).text("月会员").css('color', '#008000');
                    }
                    if ($(this).text() == 3) {
                        $(this).text("季会员").css('color', '#FFFF00');
                    }
                    if ($(this).text() == 4) {
                        $(this).text("年会员").css('color', '#FF8C00');
                    }
                    if ($(this).text() == 6) {
                        $(this).text("临时会员").css('color', '#20B2AA');
                    }
                    if ($(this).text() == 10) {
                        $(this).text("永久会员").css('color', '#DC143C');
                    }
                    if ($(this).text() == 0) {
                        $(this).text("暂无").css('color', '#ccc');
                    }
                });
            }
        });
        // 监听点击事件
        layui.table.on('tool(table)', function (result) {
            let event = result.event;
            let row = result.data;
            if (event === "viewPhone") {
                // 处理你的业务逻辑
                layer.confirm('确定要查看该用户手机号码吗？', {
                    btn: ['确定', '取消'] //按钮
                }, function () {
                    $.form.load("{:url('viewphone')}", {id: row.id}, 'post', function (ret) {
                        if (ret.code < 1) {
                            $.msg.error(ret.info, 3, function () {
                                layer.alert(ret.info, {icon: 1});
                            });
                        } else {
                            result.update({
                                'phone': ret.data
                            });
                        }
                        layer.closeAll();
                        return false;
                    }, false);
                }, function () {
                    layer.closeAll();
                });
            }
        })

        // 数据状态切换操作
        layui.form.on('switch(StatusSwitch)', function (obj) {
            $.form.load("{:url('state')}", {
                id: obj.value,
                state: obj.elem.checked > 0 ? 1 : 2
            }, 'post', function (ret) {
                if (ret.code < 1) $.msg.error(ret.info, 3, function () {
                    $('#RoleData').trigger('reload'); // 操作异常时重载数据
                });
                return false;
            }, false);
        });
    });