layui table根据值（1,2,3）显示中文

效果

实战

1、字段如下

, cols: [[ //表头
        {field: 'id', title: 'ID', width: 60, sort: false, fixed: 'left'}
        , {field: 'title', title: '标题', width: 180}
        , {field: 'authorName', title: '作者', width: 80, sort: false}
        , {field: 'category', title: '分类', width: 100, sort: false}
        , {field: 'tags', title: '标签', width: 100, sort: false}
        , {field: 'viewCount', title: '浏览量', width: 90, sort: true}
        , {field: 'commentCount', title: '评论数', width: 90, sort: true}
        , {field: 'canComment', title: '评论开关', width: 90, sort: false}
        , {field: 'putTop', title: '置顶', width: 80, sort: true}
        , {field: 'status', title: '状态', width: 80, sort: true}
        , {field: 'createTime', title: '发布时间', width: 170, sort: true}
        , {title: '操作', minWidth: 50, templet: '#currentTableBar', fixed: "right", align: "center"}
]]

其中，putTop、canComment、status使用的Integer格式，前端需求是展示中文

2、根据需求更改

, done: function (res, curr, count) {
        // 对应putTop字段
        $("[data-field = 'putTop']").children().each(function () {
            if ($(this).text() == '1') {
                $(this).text("置顶");
            } else if ($(this).text() == '0') {
                $(this).text("取消");
            }
        });
        // 对应status字段
        $("[data-field = 'status']").children().each(function () {
            if ($(this).text() == '1') {
                $(this).text("展示");
            } else if ($(this).text() == '0') {
                $(this).text("隐藏");
            }
        });
        // 对应canComment字段
        $("[data-field = 'canComment']").children().each(function () {
            if ($(this).text() == '1') {
                $(this).text("开启");
            } else if ($(this).text() == '0') {
                $(this).text("关闭");
            }
        });
}

完整代码

layui.use(['form', 'table'], function () {
        const $ = layui.jquery,
            form = layui.form,
            table = layui.table;

        // 表单渲染
        table.render({
            elem: '#currentTableId'
            , url: '/article/list' //数据接口
            // , page: true //开启分页
            , request: {
                pageName: 'curr' //页码的参数名称，默认：page
                , limitName: 'size' //每页数据量的参数名，默认：limit
            }
            , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                , curr: 1 //设定初始在第 5 页
                , groups: 3 //只显示 3 个连续页码
                , first: '首页' //首页
                , prev: '上一页'
                , next: '下一页'
                , last: '尾页' //尾页
                , limit: 10
                , limits: [10, 15, 20, 50, 100]
            }
            , cols: [[ //表头
                {field: 'id', title: 'ID', width: 60, sort: false, fixed: 'left'}
                , {field: 'title', title: '标题', width: 180}
                , {field: 'authorName', title: '作者', width: 80, sort: false}
                , {field: 'category', title: '分类', width: 100, sort: false}
                , {field: 'tags', title: '标签', width: 100, sort: false}
                , {field: 'viewCount', title: '浏览量', width: 90, sort: true}
                , {field: 'commentCount', title: '评论数', width: 90, sort: true}
                , {field: 'canComment', title: '评论开关', width: 90, sort: false}
                , {field: 'putTop', title: '置顶', width: 80, sort: true}
                , {field: 'status', title: '状态', width: 80, sort: true}
                , {field: 'createTime', title: '发布时间', width: 170, sort: true}
                , {title: '操作', minWidth: 50, templet: '#currentTableBar', fixed: "right", align: "center"}
            ]]
            , done: function (res, curr, count) {
                $("[data-field = 'putTop']").children().each(function () {
                    if ($(this).text() == '1') {
                        $(this).text("置顶");
                    } else if ($(this).text() == '0') {
                        $(this).text("取消");
                    }
                });
                $("[data-field = 'status']").children().each(function () {
                    if ($(this).text() == '1') {
                        $(this).text("展示");
                    } else if ($(this).text() == '0') {
                        $(this).text("隐藏");
                    }
                });
                $("[data-field = 'canComment']").children().each(function () {
                    if ($(this).text() == '1') {
                        $(this).text("开启");
                    } else if ($(this).text() == '0') {
                        $(this).text("关闭");
                    }
                });
            }
        });

        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {
            //执行搜索重载
            table.reload('currentTableId', {
                page: {
                    curr: 1
                }
                , url: '/article/list' //数据接口
                , where: {
                    title: data.field.title,
                    authorName: data.field.authorName,
                    id: data.field.id,
                }
            }, 'data');
            return false;
        });

        // 删除.编辑
        table.on('tool(currentTableFilter)', function (obj) {
            const data = obj.data;
            // console.log(obj.data.id);
            if (obj.event === 'edit') {
                layer.alert('编辑行：<br>' + JSON.stringify(data))
            } else if (obj.event === 'delete') {
                layer.confirm('真的删除行么？', function (index) {
                    $.ajax({
                        url: "/article/delete?id=" + obj.data.id,
                        type: "post",
                        async: false,
                        success: function (data) {
                            layer.alert(data.msg);
                            if (data.code === 200) {
                                obj.del();
                                layer.close(index);
                            }
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            layer.alert("删除失败！");
                        }
                    });
                });
            }
        });
    });