Kendo UI 的 k-template 可以自定义一些控件作为模板,比较实用。
官网上的例子:
1.
<span id="output"></span>
<script>
var template = kendo.template("#if (foo) {# foo is true #}#");
var data = { foo: true };
$("#output").html(template(data));
</script>
2.
<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>
<div id="stepPane">
<style scoped>
.Eng_StepCircle {
border-radius: 13px;
font-size: 16px;
font-family: Arial;
font-weight: bold;
text-align: center;
line-height: 25px;
height: 25px;
padding: 0px 8px 0px 8px;
display: inline-block;
}
.Eng_StepFirstOrLast {
box-shadow: 0px 1px 0px rgba(0,0,0,0.1);
border: 1px solid;
background-size: auto;
color: white;
}
.Eng_StepStart {
border-color: #3b6e22 #3b6e22 #2c5115 #3b6e22;
background-color: rgb(105, 167, 78);
}
.Eng_StepEnd {
border-color: #29447e #29447e #1a356e #29447e;
background-color: rgb(91, 116, 168);
}
.Eng_StepLine {
border-width: 4px 0 0 0;
position: absolute;
left: -4px;
top: 14px;
right: -4px;
height: 10px;
z-index: 1;
}
.Eng_StepHolder {
border-style: solid;
border-color: gray;
border-width: 0px 0px 2px 0px;
padding: 10px;
position: relative;
}
.Eng_StepButton {
display: inline-block;
padding: 3px 10px 3px 10px;
cursor: default;
position: relative;
}
.Eng_StepButtonDisable {
filter: alpha(opacity=100);
opacity: 1;
}
.Eng_DisabledColor {
color: #dcdcdc;
}
</style>
<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);
});
这样就可以根据数据属性的不同显示不同的自定义控件。