Kendo UI 网格 rowTemplate - 调用一个函数来影响 td 单元格的 css答案

【问题标题】：Kendo UI grid rowTemplate - calling a function to affect the css of td cellsKendo UI 网格 rowTemplate - 调用一个函数来影响 td 单元格的 css
【发布时间】：2015-09-25 19:11:17
【问题描述】：

我的 Kendo UI 网格是动态的，其中的列可以定义为 field0、field1 到 field[n]；我不提前知道字段的数量。

我想使用rowTemplate 将css background-color 应用于<td> 单元格。

更多详情：

必须将每个单元格值发送到比率函数（即金融风险敞口除以基准值）。该比率的结果决定了该单元格的背景颜色属性）。

我从这个代码 sn-p 开始，我正在研究这个 plunker：http://plnkr.co/edit/wAeJZz8xGeNupsA3rVMA?p=preview

var gridOptions = {
	dataSource: ds,
	pageable: true,
	columnMenu: true,
	resizable: true,
	columns: heatMapColDefs ,
	dataBound: function (e) {
	}
	, rowTemplate: function (row) {
		// HOW TO DETERMINE THE TD CELL VALUE AND APPLY A BACKGROUND-COLOR DYNAMICALLY ???
	}
};

感谢您的建议...

鲍勃

【问题讨论】：

如果不提前知道字段，则需要迭代数据源的第一行，找到所有字段键，并构建列、字段和行模板：plnkr.co/edit/9Yv2agLQnVJNVoLI8HjR?p=preview
我已经提前构建了 columns 数组，但我不知道提前的字段数。所以我需要抓取每个行，然后迭代单元格。这就是我卡住的地方。我会检查你的笨拙...谢谢。

标签： kendo-grid

【解决方案1】：

通过查看数据源的第一行数据，可以迭代属性获取所有字段，并动态构建网格的列和行模板以及数据源的模型字段：

var ColsFieldsRowTemplate = {}
  function GetRowTemplate(){
    var obj = {};
    var columns= [];
    var fields = {};


    var t = '<tr data-uid="#= uid #">';
    //use first row of data to get the fields
    var row = myData[0];
    for (var key in row) {
      if (key == 'field0'){
        fields[key] = { type: "string" };
        columns.push({"field": key});
        t += '<td >#= ' + key  + '  #</td>';
      } else if (key.indexOf("field") > -1){
        fields[key] = { type: "number" };
        columns.push({"field": key});
        t += '<td style="background-color: #=' + key + ' > 3000000 ? "red" : "green" #;">#= ' + key  + '  #</td>';
      }
    }
    t += '</tr>';

    ColsFieldsRowTemplate.rowTemplate = t;
    ColsFieldsRowTemplate.cols = columns;
    ColsFieldsRowTemplate.fields = fields;
    console.log(ColsFieldsRowTemplate);
    return ColsFieldsRowTemplate;
  }
  GetRowTemplate();

  vm.userGridOptions = {
            selectable: true,
            sortable: true,
            pageable: true,       
            rowTemplate: ColsFieldsRowTemplate.rowTemplate,
            columns: ColsFieldsRowTemplate.cols,
            editable: {
                mode: "popup"
                //template: kendo.template($("#editorTemplate").html())   // loaded up in index.html (alt. kendo.template('<div>..</div>') )                
            },
            toolbar: ["create"]
  };


  // DEFINE DATA SOURCE FOR USER KRIs
  vm.gridDS = new kendo.data.DataSource({  // customized User KRI grid; pull from server or localStorage            
      pageSize: 10,
      transport: {
          read: function(options){
            options.success(myData)
          }
      },            
      schema: {
          model: {
              id: "id",
              fields: ColsFieldsRowTemplate.fields
          }
      }            
  });

更新PLUNKER

【讨论】：

我想出了另一种构建rowTemplate 的方法。它的效率较低，但它使我能够深入了解每一行的单元格值并相应地调用我的calculateColor 例程：plnkr.co/edit/wAeJZz8xGeNupsA3rVMA?p=preview。我在 script.js 中的自定义函数称为 buildRowTemplate(data) ，就在您的 getTemplate() 例程下方。

【解决方案2】：

我认为如果您使用行模板，将很难将列与列标题同步。我要做的是使用动态创建的客户端模板并将业务逻辑放在该模板中。

 function getTemplate(field, fieldName){

    var color;

    if(field[fieldName] > 4000000){
      color = "green";
    }else{
      color = "red";
    }

    return "<span style='background-color: " + color + "'>" + field[fieldName] + "</span>";
  }

  vm.userGridOptions = {
            selectable: true,
            sortable: true,
            pageable: true,       
            columns: [
              { field: "field0" },
              { field: "field1", 
                template: (function(dataItem){

                   return getTemplate(dataItem, "field1");
                  }) 
              },

例子：

http://plnkr.co/edit/lPUzfu?p=preview

【讨论】：