layui表格【根據不同字段動態顯示不同顏色】

前言：博主在做項目的時候遇到這樣一個問題，前端用layui表格，需要實現根據後端狀態不同，在前端動態顯示不同顏色。那麼如何實現呢，下面和大家分享一下。

（一）效果圖

1.【根據不同字段動態顯示不同顏色】

因爲博主做的是關於公司合同中獎勵規則的內容，合同中有四種裝填，分別是：未通過（紅色）、已通過（綠色）、待審覈（橙色）、已提交（黑色）。【這個規則仿照紅綠燈規則】

2.【在表格中設置一個按鈕點擊顯示詳情】

（二）代碼

  <script type="text/javascript">
                layui.use('table', function () {
                    var table = layui.table;
                    table.render({
                        elem: '#demo',
                        heigh: 300,
                        page: false,
                        url: layui.cache.manage + "no1/awardDetailsController/selectAllInSchoolOrganization",
                        parseData: function (res) {
                            if (res.data.length == 0) {
                                return {
                                    "code": 0,
                                    "msg": "",
                                    "data": res.data
                                }
                            }
                            else {
                                return {
                                    "code": 0,
                                    "msg": "",
                                    "count": res.data[0].total,
                                    "data": res.data
                                }
                            }
                        },
                        cols: [[ //表頭【根據不同字段動態顯示不同顏色】
                            { field: 'organizationName', title: '期數' }
                            , {
                                field: 'checkState', title: '獎勵狀態',
                                templet: function (d) {
                                    if (d.checkState == "已通過") {
                                        return '<span style="color:#008000;">' + d.checkState + '</span>'
                                    }
                                    if (d.checkState == "未通過") {
                                        return '<span style="color:#c00;">' + d.checkState + '</span>'
                                    }
                                    if (d.checkState == "待審覈") {
                                        return '<span style="color:#FF4500;">' + d.checkState + '</span>'
                                    }
                                    if (d.checkState == "未提交") {
                                        return '<span style="color:#000000;">' + d.checkState + '</span>'
                                    }

                                }
                            }
                            , { title: '獎勵規則詳情', templet: '#barDemo' }//此處爲表格中設置的按鈕
                        ]]
                    });
                    //監聽行工具事件(查看獎勵規則詳情)【在表格中設置一個按鈕點擊顯示詳情】
                    table.on('tool(test)', function (obj) {
                     //注：tool 是工具條事件名，test 是 table 原始容器的屬性 lay-filter="對應的值"
                        var data = obj.data.organizationId //獲得當前行數據
                            , layEvent = obj.event; //獲得 lay-event 對應的值
                        if (layEvent === 'detail') {
                            table.render({
                                elem: '#demo'
                                , heigh: 300
                                , page: false
                                , url: layui.cache.manage + 'no1/awardDetailsController/selectAwardByOrganizationId?organizationId=' + data
                                , parseData: function (res) {
                                    if (res.data.length == 0) {
                                        return {
                                            "code": 0,
                                            "msg": "",
                                            "data": res.data
                                        }
                                    }
                                    else {
                                        return {
                                            "code": 0,
                                            "msg": "",
                                            "count": res.data[0].total,
                                            "data": res.data
                                        }
                                    }
                                }
                                , cols: [[ //表頭
                                    { field: 'awardRules', title: '獎勵規則' }
                                    , { field: 'awardMoney', title: '獎勵金額' }
                                    , { field: 'awardDescribe', title: '獎勵規則描述' }
                                    , { field: 'remark', title: '備註' }
                                ]]
                            });
                        }
                    });
                });
   </script>

總結：在項目的學習中能夠成長很多，通過總結將積累的內容分享，希望對大家有幫助。如果有什麼問題，歡迎給博主留言。