我正在开发使用剑道UI的MVC应用程序，我希望能够改变细胞的背景，但我不知道如何让列单元格背景属性的值，这样我就可以设置它。
@(Html.Kendo().Grid(Model)
.Name("LineItems")
.Events(e=> e
.DataBound("LineItems_Databound")
)
.Columns(columns =>
{
columns.Bound(o => o.Ui).Title("UI").Width(20);
columns.Bound(o => o.QtyOrdered).Title("Qty Ord").Width(30);
columns.Bound(o => o.Nomenclature).Width(200);
columns.Bound(o => o.QtyShipped).Width(20).Title("Qty Sent");
columns.Bound(o => o.QtyReceived).Width(20).Title("Qty Rx");
columns.Bound(o => o.ReqID).Width(50);
columns.Bound(o => o.JCN_Job).Width(50).Title("Job/JCN");
columns.Bound(o => o.ManPartID).Width(100).Title("Part#");
columns.Bound(o => o.Requestor).Width(100).Title("Requestor");
})
.ToolBar(toolbar =>
{
//toolbar.Create();
toolbar.Save();
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Sortable()
.Selectable()
.Resizable(resize => resize.Columns(true))
.Reorderable(reorder => reorder.Columns(true))
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(p => p.ID))
.Batch(true)
.ServerOperation(false)
.Read(read => read.Action("Editing_Read", "Shipping"))
.Update(update => update.Action("UpdateShipment", "Shipping"))
//.Destroy(update => update.Action("Editing_Destroy", "Shipping"))
)
)
在我的剧本我已经通过我的.databound电网循环码
function LineItems_Databound() {
var grid = $("#LineItems").data("kendoGrid");
var data = grid.dataSource.data();
$.each(data, function (i, row) {
var qtyRx = row.QtyReceived;
var qtySx = row.QtyShipped;
if (qtyRx < qtySx) {
// Change the background color of QtyReceived here
}
});
}
使用Ajax绑定
使用jQuery，您可以选择并使用该行的UID（唯一ID），并选择该行的第n个孩子改变网格的单元格的背景颜色。
function LineItems_Databound() {
var grid = $("#LineItems").data("kendoGrid");
var data = grid.dataSource.data();
$.each(data, function (i, row) {
var qtyRx = row.QtyReceived;
var qtySx = row.QtyShipped;
if (qtyRx < qtySx) {
//Change the background color of QtyReceived here
$('tr[data-uid="' + row.uid + '"] td:nth-child(5)').css("background-color", "red");
}
});
}
更新
艾伦·费舍尔在评论中提出另一种方式来解决这个问题，他从KendoUI人教训。 所述QtyReceived柱使用了将参数传递给数据绑定事件ClientTemplate。
@(Html.Kendo().Grid(Model)
.Name("LineItems")
.Events(e => e.DataBound("LineItems_Databound"))
.Columns(columns =>
{
columns.Bound(o => o.Ui).Title("UI").Width(20);
columns.Bound(o => o.QtyOrdered).Title("Qty Ord").Width(30);
columns.Bound(o => o.Nomenclature).Width(200);
columns.Bound(o => o.Requestor).Width(100);
columns.Bound(o => o.QtyShipped).Width(20).Title("Qty Sent");
columns.Bound(o => o.QtyReceived).Width(20).Title("Qty Rx")
.ClientTemplate("#= LineItems_Databound(QtyShipped,QtyReceived)#");
columns.Bound(o => o.ReqID).Width(50);
columns.Bound(o => o.JCN_Job).Width(50).Title("Job/JCN");
columns.Bound(o => o.ManPartID).Width(100).Title("Part#");
columns.Bound(o => o.ReceivedBy).Width(100).Title("Received By");
columns.Bound(o => o.RecAtSiteDate).Width(100).Title("Received Date")
.Format("{0:dd MMM, yy}");
})
)
<script>
function LineItems_Databound(qtySx, qtyRx) {
if (qtyRx < qtySx) {
return "<div style='background: pink'>" + qtyRx + " </div>";
}
else {
return qtyRx;
}
}
</script>
随着服务器绑定
如果您正在使用的服务器数据绑定和不阿贾克斯数据绑定，CellAction可能是一个更好的方式来做到这一点。
@(Html.Kendo().Grid(Model)
.Name("LineItems")
.CellAction(cell =>
{
if (cell.Column.Title.Equals("QtyReceived"))
{
if (cell.DataItem.QtyReceived.Value < cell.DataItem.QtyShipped.Value)
{
cell.HtmlAttributes["style"] = "background-color: red";
}
}
})
.Columns(columns =>
{
columns.Bound(o => o.Ui).Title("UI").Width(20);
columns.Bound(o => o.QtyOrdered).Title("Qty Ord").Width(30);
columns.Bound(o => o.Nomenclature).Width(200);
columns.Bound(o => o.QtyShipped).Width(20).Title("Qty Sent");
columns.Bound(o => o.QtyReceived).Width(20).Title("Qty Rx");
columns.Bound(o => o.ReqID).Width(50);
columns.Bound(o => o.JCN_Job).Width(50).Title("Job/JCN");
columns.Bound(o => o.ManPartID).Width(100).Title("Part#");
columns.Bound(o => o.Requestor).Width(100).Title("Requestor");
})
)
如果你是从MVC视图模型填充网格，这里有一个简单的方法来做到这一点。 创建CSS样式：
<style>
.TrunkSummaryLightYellow {
background: LightYellow;
}
.TrunkSummaryPink {
background: Pink;
}
.TrunkSummaryLightGreen {
background: LightGreen;
}
</style>
然后使用一个文件就绪功能如下：
$(document).ready(function () {
var grid = $("#TrunkSummaryGrid").data("kendoGrid");
var gridData = grid.dataSource.view();
for (var i = 0; i < gridData.length; i++) {
if (gridData[i].SomeProperty == SomeValue) {
grid.table.find("tr[data-uid='" + gridData[i].uid + "']").addClass("TrunkSummaryLightYellow");
}
}
})
由于戴夫·格里克（ 链接 ）这一建议。
我曾指出，单个单元格的背景颜色可以设置如下：
grid.table.find("tr[data-uid='" + gridData[i].uid + "']")[0].cells[4].style.backgroundColor = 'pink';
