- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用 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>');
}
}
更新:您也可以使用模板执行此操作:
$("#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 # #}#"
}
],
});
关于kendo-ui - Kendo treelist - 尝试设置列模板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32743854/
有一个名为 TreeMap 的 Map 实现和一个名为 TreeSet 的 Set 实现。为什么没有 List 接口(interface)的 TreeList 实现? 这是一道面试题。 最佳答案 基本
我正在尝试创建一个模板,以便用户可以选择多个内容项以特定顺序显示在页面上。基本上我的 sitecore 内容是这样组织的: 锻炼页面 - 包含一个名为“第 1 周锻炼”(也称为“第 2 周”、“第 3
每当我从子节点取消更新过程时,子节点只是与根节点合并,我没有在控制台中发现错误或者我找不到任何可疑的东西。但是重新加载后,一切都变得正常 $(document).ready(function () {
我需要使用正确的组件来实现这个 https://imgur.com/a/P2VHX2i .我目前正在使用来自服务器的 json 数据查看 TreeList 示例 ( https://demos.tel
我有一个 DevExpress Treelist,它的 DataSource 是一个对象列表。我将新项目添加到列表中,然后使用这段代码 treelist1.RefreshDataSource(); 刷
我正在尝试将对象添加到 devexpress 的树列表中。但遗憾的是,它不会自动填充单元格,而是在每个单元格中显示对象名称。 Public Class TempItem Private m_name
我打算使用 Telerik 的一些剑道控件,并开始使用 Treelist 控件。我正在使用 Visual Studio 2013 VB 或 C# 执行此操作。 计划是创建一个发送一些(序列化)数据的
我正在使用 Kendo UI TreeList 控件,并且需要每个父节点都是一个复选框。我已经搜索了如何在 TreeList 中使用复选框,但还没有找到任何示例。有谁知道如何做到这一点,或者是否有可能
您好,我是使用 kendo ui 的用户。我试图显示 以下数据使用 Kendo UI TreeList,但出现最大调用堆栈大小错误。当我详细点击错误时,错误出现在defaultParentId(ken
我正在使用带有 TreeList 组件的边框布局面板和位于中心的面板,但是当我将面板添加到中心卡面板时,TreeList 项目与面板标题重叠。 如何解决? 重现步骤:单击Home菜单项 ExtJS 6
我有一个剑道树列表。折叠事件绑定(bind)到 onCollapse() 方法,展开事件绑定(bind)到 onExpand() 方法。 换句话说:第一列由级别组成。默认级别为 0,默认展开并显示(所
我正在使用 Kendo 树列表小部件,很失望地看到没有 rowTemplate Kendo 网格上的选项。 我看到一个 columnTemplate选项(即 http://docs.telerik.c
我正在使用 Kendo 树列表小部件,很失望地看到没有 rowTemplate Kendo 网格上的选项。 我看到一个 columnTemplate选项(即 http://docs.telerik.c
我正在使用 XtraTreeList.TreeList 来显示分层数据。数据存储在我实现 DevExpress.XtraTreeList.TreeList.IVirtualTreeListData 的
我想显示有点类似于带有可扩展行和多个对齐列的表格 TreeView ,即如下所示: 我想自然地布局它,作为列表的嵌套列表,即类似于: usr root
我正在尝试将默认的展开/折叠图标更改为更大的图标。我设置了以下 css 更改,但似乎没有任何效果: .k-treelist .k-minus { background: url
我有一部分代码分析了一个包含已检查节点 ID 的列表,并检查了 TreeList 现有 ID。 (我正在使用 XtraTreeList 控件) 我想为每个选中的节点计算数量,我只是想在选中节点时进行计
我想在 DevExpress TreeList 中的特定索引处添加节点。我看过post#1和 post#2但无法得到我需要的东西。我只想要采用父节点编号/id 并向其添加子节点的代码。 我找到了这个函
我有一个树列表,我需要行中的图标,但我还需要行可编辑。我整理了一个我在这里遇到的奇怪错误的示例。 http://dojo.telerik.com/OyaB/10 在第六列中,您可以看到一个图标,它绑定
我正在使用 NatTable 显示具有多列的树。该树被展平为一个 SortedList,用于创建 TreeList。 EventList eventList = GlazedLists.eventLi
我是一名优秀的程序员,十分优秀!