效果
JS (栏目定义)
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");
}
});
},