Question

我正在使用Kendo treelist小部件，并且很高兴看到Kendo网格上没有rowTemplate选项。

我看到columnTemplate选项（即http://docs.telerik.com/kendo-ui/api/javascript/ui/treelist#configuration-columns.template），但这会影响整个列。

但是，我需要钻取每个单元格值并根据比率设置css颜色属性（例如，如果value/benchmark < .2，则指定<span style='color:red;'>，但我的颜色值是动态的。

dataBound:上发生了dataBinding:和treelist事件，但我还是想弄清楚如何拦截每个单元格值并设置一次颜色我已经完成了我的计算。

＆＃13;

var treeOptions = {
dataSource: ds,
columns: colDefs,
selectable: true,
scrollable: true,
resizable: true,
reorderable: true,
height: 320,
change: function (e) {
    // push selected dataItem
    var selectedRow = this.select();
    var row = this.dataItem(selectedRow);                    
},
dataBound: function (e) {
    console.log("dataBinding");
    var ds = e.sender.dataSource.data();
    var rows = e.sender.table.find("tr");
}
};

＆＃13;

这就是我构建`colDefs＆＃39;对象（列定义）：

＆＃13;

function parseHeatMapColumns(data, dimId) {
// Creates the Column Headers of the heatmap treelist.
// typeId=0 is 1st Dimension; typeId=1 is 2nd Dimension 

var column = [];
column.push({
"field": "field0",
"title": "Dimension",
headerAttributes: { style: "font-weight:" + 'bold' + ";" },
attributes : { style: "font-weight: bold;" }
});

var colIdx = 1;     // start at column 1 to build col headers for the 2nd dimension grouping
_.each(data, function (item) {
if (item.typeId == dimId) {
    // Dimension values are duplicated, so push unique values (i.e. trade types may have dupes, whereas a BkgLocation may not). 
    var found = _.find(column, { field0: item.field0 }); 
    if (found == undefined) {
	column.push({          
	    field: "field2",
	    title: item.field0,
	    headerAttributes: {
		style: "font-weight:" + 'bold'
	    }
	    ,template: "<span style='color:red;'>#: field2 #</span>"      
	});  
	colIdx++;
    }
}
});

return column;
}

＆＃13;

****更新**** 为了在template：

中嵌入一些逻辑

＆＃13;

function configureHeatMapColumnDefs(jsonData, cols, model) {
    var colDef = '';
    var dimId = 0;
    var colorProp;

    var columns = kendoGridService.parseHeatMapColumns(jsonData, dimId);

    // iterate columns and set color property; NB: columns[0] is the left-most "Dimension" column, so we start from i=1.
    for (var i = 1; i <= columns.length-1; i++) {
	columns[i]['template'] = function (data) {
	    var color = 'black';
	    if (data.field2 < 1000) {
		color = 'red';
	    }
	    else if (data.field2 < 5000) {
		color = 'green';
	    }                    
	    return "<span style='color:" + color + ";'>" + data.field2 + "</span>";
	};

    }
    return columns;
}

＆＃13;

建议表示赞赏。谢谢，鲍勃

Answer 1

在数据绑定事件中，您可以遍历行。对于每一行，您可以使用dataitem（）方法（http://docs.telerik.com/kendo-ui/api/javascript/ui/treelist#methods-dataItem）获取与之关联的dataItem

获得dataitem后，计算您的口粮，如果该行符合颜色标准，请更改单元格DOM元素：

dataBound: function (e) {
    var that = e.sender;
    var rows = e.sender.table.find("tr");
    rows.each(function(idx, row){
    var dataItem = that.dataItem(row);
    var ageCell = $(row).find("td").eq(2);
    if (dataItem.Age > 30) {
        //mark in red 
         var ageText = ageCell.text();
         ageCell.html('<span style="color:red;">' + ageText + '</span>');                            
    }
}

<强> DEMO

更新：您也可以使用模板执行此操作：

                $("#treelist").kendoTreeList({
                    dataSource: dataSource,
                    height: 540,
                    selectable: true,
                    columns: [
                        { field: "Position"},
                        { field: "Name" },
                        { field: "Age",
                         template: "# if ( data.Age > 30  ) { #<span style='color:red;'> #= data.Age # </span>  #}else{# #= data.Age # #}#"
                        }
                    ],

                });

<强> DEMO

Kendo treelist - 尝试设置列模板

1 个答案: