gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-02 21:12:25 27 4
gpt4 key购买 nike

我正在使用 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;
}

不胜感激。谢谢,鲍勃

最佳答案

在数据绑定(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

关于kendo-ui - Kendo treelist - 尝试设置列模板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32743854/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com