在kendo调度器控制头- dateHeaderTemplate中呈现数据
我正在使用Kendo的调度器控制。我试图渲染每天的容量(硬编码的30%，现在)在标题中的每一天，如下图所示。如何用数据源中的数据替换硬编码？
这是我用过的代码。我在下面的代码中有30%的硬编码。
<!DOCTYPE html>
<html>
<head>
<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.material.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.material.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.default.mobile.min.css" /><script src="Scripts/jquery.min.js"></script>
<script src="Scripts/kendo.web.min.js"></script>
<script>
$(function () {
$('#scheduler').kendoScheduler({
date: new Date("2013/09/02"),
dateHeaderTemplate: kendo.template("<u>#=kendo.toString(date, 'dd/M')#</u> - (30%)"),
});
});
</script>
</head>
<body>
<div id="scheduler"></div>
/body>
现在，我将从API获得“百分比”，希望将其设置为数据源，从数据源将其呈现为标头。
来自JavaScript的当前数据源设置代码
var datasource = new kendo.data.SchedulerDataSource({
data:Model.recordCollection // setting data
});
scheduler.setDataSource(datasource);但是这个数据源是日历事件相关的，这将不包含每天的容量。那么如何设置来自不同数据源的每日容量数据呢？
根据答案，我正在编辑这个问题。
var actualDC = "30“、"20”、"10“、"50”、"70“、"60”、"40"；//硬编码的日容量，但只满足7天，我可能有全年的数据。数组可能不是正确的方法。
来自服务器的示例数据：
var mydatafromApi = ({
date:01/01/2013,
percentage=30%
},
{
date:02/01/2013,
percentage=40%
});更新的问题2
现在API数据源的颜色属性如下所示
var mydatafromApi = ({
date:01/01/2013,
percentage=30%,
color = red
},
{
date:02/01/2013,
percentage=40%
color = blue
});我想把这些颜色作为调度器单元的背景。
我试过如下
第一定义颜色
var actualColor = ["red", "blue","green", "yellow","blue", "red", "yellow"]; // hard coded daily color
function scheduler_dataBound(e) {
$.each($(".k-scheduler-header .k-scheduler-table th span.k-nav-day"),function(index, val) {
var text = $(this).text();
var newtext = text.replace("{dc}", actualDC[index]);
$(this).text(newtext);
$(this).backgroundcolor(actualColor[index]);
});
}更新问题3在调试"dateofHeader“时得到了低于值的值
头脚本如下所示
dateHeaderTemplate = kendo.template("<span class='k-nav-day' data-dt='kendo.toString(date, 'dd/MM/yyyy')'><u>#=kendo.toString(date, 'dd/M')#</u> - ({dc}%)</span>")然后我试了，“，这让我像这样-”kendo.toString(日期，‘dd/MM/yyyy’)“
回答 1
Stack Overflow用户
发布于 2015-05-19 08:08:00
您可以使用调度程序databound事件来修改其日期头模板，并且必须在该模板中使用字符串临时字符，该字符串将被当前的容量值所取代。
<span class='k-nav-day'><u>#=kendo.toString(date, 'dd/M')#</u> - ({dc}%)</span>可以使用此选择器获取日期标头元素。
$(".k-scheduler-header .k-scheduler-table th span.k-nav-day")然后在调度程序databound事件中更改其文本。我已经为此做了一个dojo，希望这能帮助你理解。
如果您有一个对象集合，而不是字符串数组，那么这并不重要。您可以替换它，但在代码中进行另一次调整。
应将日期值作为数据属性添加到日期标头模板中。
<script id="tmpDateHeader" type="text/x-kendo-template">
<span class="k-nav-day" data-dt="#=kendo.toString(date, 'dd/MM/yyyy')#">
<u>#=kendo.toString(date, "dd/M")#</u> - ({dc}%)
</span>
</script>像这样使用它
$("#scheduler").kendoScheduler({
dateHeaderTemplate: kendo.template($("#tmpDateHeader").html())
}您可以看到，这里有数据属性data-dt，它应该具有与date属性中的date属性相同的格式。然后，您必须获得该属性值，以便在数据源中找到匹配的对象。
// code in scheduler databound inside each scope
var dateOfHeader = $(this).data("dt"); // get date value from template
var matchData = // find in data source, where object.date == dateOfHeader
var newtext = text.replace("{dc}", matchData.percentage);我希望你能做剩下的事。
若要更改其容器背景，请使用
$(this).parent().css("background-color", actualColor[index]);https://stackoverflow.com/questions/30308682
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号