Question

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

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

更多详情：

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

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

＆＃13;

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

＆＃13;

感谢您的建议......

鲍勃

Answer 1

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

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

Answer 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

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

2 个答案: