Asp.net mvc 4 如何在kendo ui网格中检查和更改单元格值的颜色

Asp.net mvc 4 如何在kendo ui网格中检查和更改单元格值的颜色,asp.net-mvc-4,kendo-ui,kendo-grid,kendo-asp.net-mvc,Asp.net Mvc 4,Kendo Ui,Kendo Grid,Kendo Asp.net Mvc,我正在MVC4项目中使用剑道ui网格。下面是我的代码 @(Html.Kendo().Grid(Model) .Name("gridexcel") .Columns(columns => { columns.Bound(c => c.ExcelId).Title("Id").Visible(false); columns.Bound(c => c.status).Title("Status").Width(1

我正在MVC4项目中使用剑道ui网格。下面是我的代码

        @(Html.Kendo().Grid(Model)
    .Name("gridexcel")
    .Columns(columns =>
    {
        columns.Bound(c => c.ExcelId).Title("Id").Visible(false);
        columns.Bound(c => c.status).Title("Status").Width(100);
        columns.Bound(c => c.report_date).Title("Report Date");
        columns.Bound(c => c.code).Width(50);
和从1到50的列。。。 }


在这里,我想检查从1到50列的单元格,无论它包含0还是1。如果为0,则我要更改背景色。请帮助..

这是您所描述内容的jsbin

要实现这一点,首先要钩住剑道mvc包装中的数据绑定事件。

最后用下面的css给单元格着色

.has-one {
  background-color: green;
}

.has-zero {
  background-color: red;
 }
var containsOne = function(checkForOne) {
   return checkForOne.indexOf("1") >= 0;
};

var containsZero = function(checkForZero) {
  return checkForZero.indexOf("0") >= 0;
};

var addClassForOnes = function(element) {
  var text = element.textContent; 
  if (containsOne(text)) {
    $(element).addClass('has-one');
  }
};

var addClassForZeros = function(element) {
  var text = element.textContent; 
  if (containsZero(text)) {
    $(element).addClass('has-zero');
  }
};

var onDataBound = function() {
  var $gridCells = $('[role="gridcell"]');
  $gridCells.each(function(index, element) {
    console.log(element);
    addClassForOnes(element);
    addClassForZeros(element);
  });
};
.has-one {
  background-color: green;
}

.has-zero {
  background-color: red;
 }