方法一:HTML页面,初始化时设置
方法二:初始化后通过JS处理
更复杂的情况,如下图:
<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;
});
},