在kendo调度程序控件头中呈现数据 - dateHeaderTemplate
kud*_*ger 0 kendo-ui kendo-scheduler
我正在使用Kendo的Scheduler控件.我试图在每天的标题中呈现每日容量(现在硬编码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获得"百分比",并希望设置为datasource,并且从数据源我想将其渲染为标题
来自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
});
我想将这些COLOR作为调度程序单元格的背景.
我尝试如下
首先定义颜色
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(date,'dd/MM/yyyy')""
您可以使用scheduler 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事件中更改其文本.我为此做了一个道场,希望这有助于你理解.
-----------回答更新的问题1 --------------
如果你有一个对象集合而不是字符串数组,那没关系.您可以替换它,但在代码中进行另一次调整.
您应该在日期标题模板中将日期值添加为数据属性
<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在此处看到我们有数据属性,它应该具有与每日容量数据源的日期属性中的值相同的格式.然后,您必须获取该属性值才能在数据源中查找匹配的对象.
// 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);
我希望你能完成剩下的工作.
-----------更新问题2的答案--------------
更改其容器背景使用此
$(this).parent().css("background-color", actualColor[index]);
| 归档时间： |
|
| 查看次数： |
1299 次 |
| 最近记录： |