在layui表格中把数据库的“状态”显示出来并填充颜色

在layui表格中把数据库的“状态”显示出来并填充颜色，如下图一
图二是我的数据库状态的字段，最后附上了我在layui表格中实现“状态”的代码

{
                    field: 'state',
                    title: '状态',
                    templet: function (d) {
                        let msg = '未出账';
                        if (d.state == '1') {
                            msg = '已出账';
                        }
                        return msg;
                    }
                }

img

img

源于chatGPT仅供参考

要在Layui表格中显示数据库中的“状态”并填充颜色，您可以使用Layui的模板引擎来自定义表格列的内容，并结合CSS样式来设置颜色。以下是一个示例代码：

```html
<table id="dataTable" lay-filter="dataFilter"></table>

<script type="text/html" id="stateTpl">
  {{# if(d.state === '1'){ }}
    <span style="color: green;">已出账</span>
  {{# } else { }}
    <span style="color: red;">未出账</span>
  {{# } }}
</script>

<script>
layui.use(['table'], function() {
  var table = layui.table;

  // 渲染表格
  table.render({
    elem: '#dataTable',
    url: '/api/data', // 数据接口 URL
    cols: [
      [
        { field: 'shopName', title: '店铺名称' },
        { field: 'state', title: '状态', templet: '#stateTpl' }
      ]
    ],
    page: true
  });
});
</script>

在上述代码中，我们使用了Layui的模板引擎来自定义“状态”列的内容。根据状态的值，我们设置了不同的文字颜色，通过<span>标签和内联样式来实现。这里假设当状态为1时，文字颜色为绿色；当状态为其他值时，文字颜色为红色。

请注意，上述代码仅提供了一种示例实现方式。根据您的具体情况，您可能需要根据实际的数据字段和数据源进行适当的修改，并调整样式以满足您的需求。

```

  • 你可以参考下这个问题的回答, 看看是否对你有帮助, 链接: https://ask.csdn.net/questions/7485513
  • 你也可以参考下这篇文章：使用layui分页查询，模糊查询，查所有
  • 除此之外, 这篇博客: layUI框架表格中图片展示完整实例中的 四、layUI和layUIMINI整合页面 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

  • 导入layUI包和layUImini的lib包和css包到static目录下

    在这里插入图片描述


    新建productList.html，通过thymeleaf导入相关包

    <!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
        <link rel="stylesheet" th:href="@{/css/layuimini.css?v=2.0.4.2}" media="all">
        <link rel="stylesheet" th:href="@{/css/themes/default.css}" media="all">
        <link rel="stylesheet" th:href="@{/lib/font-awesome-4.7.0/css/font-awesome.min.css}" media="all">
    </head>
    <body>
        
        <script th:src="@{/lib/jquery-3.4.1/jquery-3.4.1.min.js}" charset="utf-8"></script>
        <script th:src="@{/layui/layui.js}" charset="utf-8"></script>

    </body>
</html>

    整合layui数据表格

    <table id="table-product"></table>


<script th:inline="javascript">
    var ctxPath = [[@{/}]];
    layui.use('table', function(){
        var table = layui.table;

        table.render({
            elem: '#table-product'
            ,url: ctxPath + 'product' //数据接口
            ,limit: 15
            ,cols: [[ //表头，下面为表中个字段
                {field: 'id', title: '编号', width:80, sort: true, align:'center'}
                ,{field: 'name', title: '商品名称', width:100, align:'center'}
                ,{field: 'pic', title: '图片', width:120, align:'center', templet:function (d) {
                    return '<img src="/file/download?filename='+d.pic+'"/>'}}
                ,{field: 'sale', title: '销量', width:80, sort: true, align:'center'}
                ,{field: 'price', title: '价格', width: 100, sort: true, align:'center'}
                ,{field: 'description', title: '描述', width: 200, align:'center'}
                ,{field: 'stock', title: '库存', width: 120, sort: true, align:'center'}
                ,{field: 'weight', title: '重量(kg)', width: 120, align:'center'}
                ,{field: 'brandName', title: '品牌', width: 150, align:'center'}
            ]]
        });
    });
</script>

    展示图片重点在于：
    templet:function (d) {return '<img src="/file/download?filename='+d.pic+'"/>'}
    效果如下

    在这里插入图片描述


    图片展示不全，审查元素，找到展示图片所在的标签

    在这里插入图片描述


    然后对图片的样式自定义

    <style type="text/css">
    .layui-table-cell{
        text-align:center;
        height: auto;
        white-space: normal;
    }
    .layui-table img{
        max-width:100%
    }
</style>

    注意：单纯修改pic字段的width并不起作用，这里的width主要是控制表格列的宽度，高度不能通过height修改，所以需要按上面的方式改变图片样式，将图片完全展示出来。

    最终product.html

    <!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
        <link rel="stylesheet" th:href="@{/css/layuimini.css?v=2.0.4.2}" media="all">
        <link rel="stylesheet" th:href="@{/css/themes/default.css}" media="all">
        <link rel="stylesheet" th:href="@{/lib/font-awesome-4.7.0/css/font-awesome.min.css}" media="all">
    </head>
    <body>

        <table id="table-product"></table>

        <style type="text/css">
            .layui-table-cell{
                text-align:center;
                height: auto;
                white-space: normal;
            }
            .layui-table img{
                max-width:100%
            }
        </style>

        <script th:src="@{/lib/jquery-3.4.1/jquery-3.4.1.min.js}" charset="utf-8"></script>
        <script th:src="@{/layui/layui.js}" charset="utf-8"></script>
        <script th:inline="javascript">
            var ctxPath = [[@{/}]];
                layui.use('table', function(){
                    var table = layui.table;

                    table.render({
                        elem: '#table-product'
                        ,url: ctxPath + 'product' //数据接口
                        ,limit: 15
                        ,cols: [[ //表头,下面为表中个字段
                            {field: 'id', title: '编号', width:80, sort: true, align:'center'}
                            ,{field: 'name', title: '商品名称', width:100, align:'center'}
                            ,{field: 'pic', title: '图片', width:120, align:'center', templet:function (d) {
                           		return '<img src="/file/download?filename='+d.pic+'"/>'}}
                            ,{field: 'sale', title: '销量', width:80, sort: true, align:'center'}
                            ,{field: 'price', title: '价格', width: 100, sort: true, align:'center'}
                            ,{field: 'description', title: '描述', width: 200, align:'center'}
                            ,{field: 'stock', title: '库存', width: 120, sort: true, align:'center'}
                            ,{field: 'weight', title: '重量(kg)', width: 120, align:'center'}
                            ,{field: 'brandName', title: '品牌', width: 150, align:'center'}
                        ]]
                    });
                });
        </script>
    </body>
</html>

    最后展示样式

    在这里插入图片描述

  • 您还可以看一下 张旭老师的【造物者】手把手带你做快递管理系统课程中的 【造物者】第三节·Layui基础用法 小节, 巩固相关知识点