Question

我在MVC4项目中使用kendo 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则我想要更改背景颜色。请帮忙..

Answer 1

这是你所描述的一个jsbin

http://jsbin.com/zusutigi/17/edit?css,js,output

要实现此目的，首先挂钩到kendo mvc包装器中的DataBound事件。 http://docs.telerik.com/kendo-ui/api/wrappers/aspnet-mvc/kendo.mvc.ui.fluent/grideventbuilder

...
.Name("gridexcel")
.Events(events => events.DataBound(
        @<text>
            onDataBound
            </text>
            ))
        )
...

然后检查列1 - 50中的所有单元格是否为1或0，您将添加此javascript。

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);
  });
};

最后使用以下css为单元格着色

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

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

如何检查和更改kendo ui网格中单元格值的颜色

1 个答案: