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

Question

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

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

更多详情：

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

我从这个代码片段开始，我正在研究这个 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 ???
 }
};

感谢您的建议...

鲍勃

Answer 1

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

 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

Answer 2

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

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

Updated PLUNKER

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

Kendo UI grid rowTemplate - calling a function to affect the css of td cells

kendo-grid