通过Class改变单元格样式(cell)

来源：互联网发布：数据双活编辑：程序博客网时间：2024/04/26 01:55

效果

HTML （加上样式）

        .bg-color-yellow{            background-color: yellow;            color:black;        }        .bg-color-green{            background-color: LightGreen;            color:black;        }

JS (栏目定义)

columns: [  { field: "cur_no", title: "Currency", editor: editors.ws.cur_no, width: 70 },  { field: "rate", title: "Rate", width: 60, attributes: { style: "text-align: right;" }, editor: editors.readonly },  { field: "hkd_cost", title: "折算成港幣", width: 85, attributes: { style: "text-align: right;" }, editor: editors.readonly, format: "{0:n}" },  { field: "adj_fee_rate", title: "加收運費%", width: 85, attributes: { style: "text-align: right;" }, editor: editors.com.price },  {     field: "new_cost", title: "New Cost", width: 75,     attributes: {       class: "#=(data.new_cost>data.old_cost) ? 'bg-color-yellow' : ((data.new_cost<data.old_cost) ? 'bg-color-green' : '')#", //控制顏色(黃升，綠跌)       "data-highlight": "1",       style: "text-align: right;"       },     format: "{0:n}", editor: editors.com.price   },],

补充

【字段值发生变化时】            //顏控制            if (e.field == 'old_cost' || e.field == 'new_cost') {                if (editorPage !== undefined && editorPage.setRowCellColor && $.isFunction(editorPage.setRowCellColor)) {                    editorPage.setRowCellColor(row.uid, row.old_cost, row.new_cost);                }            }【找回对应行特定单元格进行设置】    //設置某行Cell顏色    setRowCellColor: function (uid, oldValue, newValue) {        var grid = $("#grid").data("kendoGrid");        var grdRow = grid.tbody.find("tr[data-uid='" + uid + "']");        grdRow.find("td[data-highlight='1']").each(function () {            var $cell = $(this);            if (oldValue > newValue) {                $cell.removeClass("bg-color-yellow").addClass("bg-color-green");            }            else if (oldValue < newValue) {                $cell.removeClass("bg-color-green").addClass("bg-color-yellow");            }            else {                $cell.removeClass("bg-color-yellow").removeClass("bg-color-green");            }        });    },

阅读全文

0 0