kendo-ui - Kendo treelist - 尝试设置列模板

Question

我正在使用 Kendo 树列表小部件，很失望地看到没有 rowTemplate Kendo 网格上的选项。

我看到一个 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 上的事件，但我仍在尝试找出如何拦截每个单元格值并在完成计算后设置颜色。

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

这就是我构建“colDefs”对象(列定义)的地方:

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

**** 更新 **** 为了在 template 中嵌入一些逻辑:

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

不胜感激。 谢谢， 鲍勃

Answer 1

在数据绑定(bind)事件中，您可以遍历行。对于每一行，您可以使用 dataitem() 方法 (http://docs.telerik.com/kendo-ui/api/javascript/ui/treelist#methods-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