Kendo UI k-template 的使用_kendo ui的template使用-CSDN博客

本文链接：https://blog.csdn.net/JimmieW/article/details/46737531

Kendo UI 的 k-template 可以自定义一些控件作为模板，比较实用。

官网上的例子：

<span id="output"></span>
<script>
var template = kendo.template("#if (foo) {# foo is true #}#");
var data = { foo: true };
$("#output").html(template(data));
</script>

<span id="output"></span>
<script>
var template = kendo.template("Hello, #= firstName # #= lastName #");
var data = { firstName: "John", lastName: "Doe" };
$("#output").html(template(data));
</script>

可以看到k-template中包含JavaScript代码，可以方便数据与界面的集成

我的使用：

html页面中：

<body>

<body>

js页面中：

var data = [
{ index: 1, text: "Step 1", enable: true, visible: true, done: yes },
{ index: 2, text: "Step 2", enable: false, visible: true, done: yes },
{ index: 3, text: "Step 3", enable: false, visible: true, done: yes },
{ index: 4, text: "Step 4", enable: false, visible: true, done: no },
{ index: 5, text: "Step 5", enable: false, visible: true, done: no },
{ index: 6, text: "Step 6", enable: false, visible: true, done: no },
];

$(document).ready(function () {
var template = kendo.template("#if(index == 0){#"
+ "<div class=\"Eng_StepButton\" style=\"padding-right: 0px; padding-left: 0px;\"><div style=\"text-align: center; position: relative; z-index: 5\"><div class=\"Eng_StepCircle Eng_StepFirstOrLast Eng_StepStart\">"
+ "#: text#"
+ "</div></div><div class=\"Eng_StepButtonText\"> </div></div>"
+ "#}else if(index =="
+ length
+ "){#"
+ "<div class=\"Eng_StepButton\" style=\"padding-right: 0px; padding-left: 0px;\"><div style=\"text-align: center; position: relative; z-index: 5\"><div class=\"Eng_StepCircle Eng_StepFirstOrLast Eng_StepEnd\">"
+ "#: text#"
+ "</div></div><div class=\"Eng_StepButtonText\"> </div></div>"
+ "#}else if(done=='yes'){if(visible){ if(enable){#"
+ "<div class=\"Eng_StepButton\" style=\"cursor: pointer\"><div style=\"text-align: center; position: relative; z-index: 5\"><div class=\"k-widget k-state-hover Eng_StepCircle\">"
+ "#: index#"
+ "</div></div><div class=\"Eng_StepButtonText\">"
+ "#: text#"
+ "</div><div class=\"k-widget Eng_StepLine\"></div></div>"
+ "#}else{#"
+ "<div class=\"Eng_StepButton\"><div style=\"text-align: center; position: relative; z-index: 5\"><div class=\"k-widget k-state-disabled Eng_StepButtonDisable Eng_StepCircle\">"
+ "#: index#"
+ "</div></div><div class=\"Eng_StepButtonText Eng_DisabledColor\">"
+ "#: text#"
+ "</div><div class=\"k-widget Eng_StepLine\"></div></div>"
+ "#}}}else if(done=='ing'){#"
+ "<div class=\"Eng_StepButton\"><div style=\"text-align: center; position: relative; z-index: 5\"><div class=\"k-widget k-state-selected Eng_StepCircle\">"
+ "#: index#"
+ "</div></div><div class=\"Eng_StepButtonText\">"
+ "#: text#"
+ "</div><div class=\"k-widget Eng_StepLine\"></div></div>"
+ "#}else{if(visible){if(enable){#"
+ "<div class=\"Eng_StepButton\"><div style=\"text-align: center; position: relative; z-index: 5\"><div class=\"k-widget k-state-disabled Eng_StepButtonDisable Eng_StepCircle\">"
+ "#: index#"
+ "</div></div><div class=\"Eng_StepButtonText\">"
+ "#: text#"
+ "</div><div class=\"k-widget Eng_StepLine\"></div></div>"
+ "#}else{#"
+ "<div class=\"Eng_StepButton\"><div style=\"text-align: center; position: relative; z-index: 5\"><div class=\"k-widget k-state-disabled Eng_StepButtonDisable Eng_StepCircle\">"
+ "#: index#"
+ "</div></div><div class=\"Eng_StepButtonText Eng_DisabledColor\">"
+ "#: text#"
+ "</div><div class=\"k-widget Eng_StepLine\"></div></div>"
+ "#}}}#");

var result = kendo.render(template, data)
$("#stepPane").html(result);
});