Kendo UI网格rowTemplate-调用函数以影响TD单元格的CSS [英] Kendo UI grid rowTemplate - calling a function to affect the css of td cells

问题描述

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

My Kendo UI grid is dynamic, where the columns can be defined as field0, field1 through field[n] ; I do NOT know the number of fields ahead of time.

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

I would like to use the rowTemplate in order to apply css background-color to the <td> cell.

更多详细信息:

Further details:

每个单元格值都必须发送给比率函数(即财务风险敞口除以基准值).该比率的结果确定了该单元格的背景颜色属性.

Each cell value must be sent to a ratio function (i.e. the financial risk exposure divided by a benchmark value). The result of that ratio determines the background-color property from that cell).

我从以下代码段开始，并且正在研究这个插件: http://plnkr.co/edit/wAeJZz8xGeNupsA3rVMA?p=preview

I'm starting with this code snippet, and I am working on this 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 ???
	}
};           

您的建议值得赞赏...

Your advice is appreciated...

鲍勃

推荐答案

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

By looking at the first row of data from the datasource, you can iterate the properties to get all the fields and build dynamically the columns and row template of the grid and the model fields of the 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

Updated PLUNKER

这篇关于Kendo UI网格rowTemplate-调用函数以影响TD单元格的CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！