Kendo Grid 行样式（根据条件改变行颜色）

最新推荐文章于 2025-05-06 12:57:44 发布

原创最新推荐文章于 2025-05-06 12:57:44 发布 · 1w 阅读

3 ·

CC 4.0 BY-SA版权

实用同时被 2 个专栏收录

738 篇文章

订阅专栏

Kendo

71 篇文章

订阅专栏

本文介绍如何使用 KendoSmartGrid 进行高级定制，包括通过 HTML 页面初始化设置列属性，如条件样式应用；及通过 JavaScript 后置处理实现更复杂的样式变化和数据展示效果。

方法一：HTML页面，初始化时设置

    <script>
        //isgen == 1 红色（颜色）
        $("#gridMaster").kendoSmartGrid({
            columns: [
                { field: "shp_no", title: "分店", width: 60, attributes: {style: "#=isgen === true ? 'color:red;' : ''#"} },
                { field: "emp_no", title: "職員編號", width: 80, attributes: { style: "#=isgen === true ? 'color:red;' : ''#" } },
                { field: "emp_nme_en", title: "姓名", width: 200, attributes: { style: "#=isgen === true ? 'color:red;' : ''#" } },
                { field: "remark", title: "備註", width: 300, attributes: { style: "#=isgen === true ? 'color:red;' : ''#" } },
            ],
        });
    </script>

方法二：初始化后通过JS处理

        var grid = $("#gridMaster").data("kendoSmartGrid");    // 行样式
        var rows = grid.tbody.find("tr");
        rows.each(function (i, row) {
            var data = grid.dataItem(row);
            var bCancel = data.cot_print_flg === "C";
            var bPrint = data.cot_print_flg === "Y";
            var bSigned = data.cot_sign_user !== "NULL" && data.cot_sign_user !== "";
            var bComplete = data.cot_comp_user !== "NULL" && data.cot_comp_user !== "";

            if (bCancel) {
                $(row).css("color", "gray").css("text-decoration","line-through");
            }
            else if (!bPrint && !bSigned) {
                $(row).css("color", "red");
            }
            else if (bPrint && !bSigned){ 
                $(row).css("color", "blue");
            }
        });

更复杂的情况，如下图:

代码

    getDutyDataList: function () {
        var that = this;
        var search = this.dm.search;
        var gridMaster = $("#gridMaster").data("kendoSmartGrid");
        var gridDetail = $("#gridDetail").data("kendoSmartGrid");

        //判斷是否輸入年月日
        if (!that.checkSearchValue()) {
            return;
        }

        var month = search.date.format("MM");
        var year = search.date.format("yyyy");

        var params = [
            newParam("year", year),
            newParam("month", month),
            newParam("shp_no", search.shp_no),
        ];

        bocaller.getDataSet("hr_duty_tab", "GetDutyTabAndChg", params, function (ds) {

            //創建新grid時，清空舊grid
            gridMaster.setDataSource(new kendo.data.DataSource());

            //不變列
            var option = {
                columns: [
                  { field: "shop_no", title: "SHOP", width: 60 },
                  { field: "emp_no", title: "編號", width: 80 },
                  {
                      title: "<div style='text-align:center'>姓名</div>", columns: [
                          { field: "emp_nme_zh", title: "中文名", width: 70 },
                          { field: "emp_nme_en", title: "英文名", width: 120 },
                      ],
                  },
                  { field: "ini_days", title: "上月剩餘假期", width: 100, attributes: { style: "text-align: right" } },
                  { field: "gain_days", title: "本人本月假期", width: 100, attributes: { style: "text-align: right" } },
                ]
            };

            var holidayData = ds[4].data;
            var day = (new Date(year, month, 0)).format("dd");
            var week = ['日', '一', '二', '三', '四', '五', '六'];

            //根據所選日期，計算日期的月份天數，循環數為當月天數
            for (var i = 1; i < parseInt(day) + 1; i++) {
                var date = new Date(year, month - 1, i);
                var holiday = false;
                var weekDay = week[date.getDay()];
                var field = (i >= 10 ? i : "0" + i).toString();

                if (holidayData.length > 0) {
                    for (var j = 0; j < holidayData.length; j++) {
                        if (holidayData[j].holiday.format("yyyy-MM-dd") === date.format("yyyy-MM-dd")) {
                            holiday = true;
                            break;
                        }
                    }
                }

                if (weekDay == "六" || weekDay == "日" || holiday) {
                    option.columns.push({
                        title: field, columns: [
                            {
                                field: "d" + field, title: "<span style='color:red'>" + weekDay.toString() + "</span>", width: 38,
                                attributes: {
                                    "class": "gridtext",
                                    style: "#=u" + field + " == 1 ? 'background-color:yellow!important;color:red;' : ''#"
                                }
                            },
                        ],
                    });
                }
                else {
                    option.columns.push({
                        title: field, columns: [
                               {
                                   field: "d" + field, title: weekDay.toString(), width: 38,
                                   attributes: { style: "#=u" + field + " == 1 ? 'background-color:yellow;color:red;' : ''#" }
                               },
                        ],
                    })
                }
            }

            //不變列
            option.columns.push(
                { field: "used_days", title: "本月已用假期", width: 100, attributes: { style: "text-align: right" } },
                { field: "adj_days", title: "假期調整", width: 80, attributes: { style: "text-align: right" } },
                { field: "bal_days", title: "剩餘假期", width: 80, attributes: { style: "text-align: right" } });

            gridMaster.setOptions(option);

            //錄入數據
            var masterData = ds[0].data;
            if (masterData.length > 0) {
                gridMaster.setDataSource(new kendo.data.DataSource({ data: masterData }));
            }
            else {
                gridMaster.setDataSource(new kendo.data.DataSource());
            }

            var detailsData = ds[1].data;
            if (detailsData.length > 0) {
                gridDetail.setDataSource(new kendo.data.DataSource({ data: detailsData }));
            }
            else {
                gridDetail.setDataSource(new kendo.data.DataSource());
            }

            //set排表確認
            var confirmData = ds[2].data;
            if (confirmData.length > 0) {
                $("#confirm").html("<b style='color: red; font-size: 15px; width: 150px'>" + confirmData[0].conf_date.format('dd/MM/yyyy') + " 由 " + confirmData[0].conf_user + " 確認</b>");
                that.confirm = true;
            }
            else {
                $("#confirm").html("<b style='color: black; font-size: 15px; width: 150px'>未確認</b>");
                that.confirm = false;
            }

            //set假期
            var holidayData = ds[3].data;
            $("#holiday").html("<b style='color: blue; font-size: 15px'>" + holidayData[0].Column1 + " 日</b>");

            //设定Page的gridMaster
            gridMaster.select(gridMaster.tbody.find("tr:eq(0)"));
            that.gridMaster = gridMaster;
        });

    },