Kendo UI 带有嵌套评估的网格列模板 - 怎么做?
Kendo UI grid column template with nested evaluations - how to?
Kendo UI v2015.2.805
我有一个带有模板列的 KendoGrid,它有条件地确定是否应该添加一组按钮,如果需要额外的评估,我不知道如何嵌套他们。
以下有效但没有所需的额外评估:
{ field: "Served", title: "Served",
template: "<div>" +
"#= (Kind==0 || Kind==7) ? '" +
"<button type=\"button\" data-id=\"12345\">Yes</button>" +
"<button type=\"button\" data-id=\"54321\">No</button>" +
"' : " +
"'NO BUTTON HERE'" +
"#</div>"
我对它进行了多线处理以使其看起来不错,但事实并非如此。这个想法是,如果 Kind = 0 或 7,则显示两个按钮,否则不显示。效果很好。
但是我需要将 data-id 评估为 #= ID #,所以我尝试:
" <button type=\"button\" data-id=\"' #= ID # '\">Yes</button>"
我知道我需要 'drop out' 引用字符串才能使评估工作,并且由于我对整个表达式使用了双引号,所以我将条件中的按钮作为单引号字符串返回,并因此转义按钮属性,但我无法对其进行评估 #=.
我尝试了很多不同的组合,但我都忘记了。
那么 'right-way' 这样做的目的是什么?
一个解决方案:
接受 David 的回答并修改为在函数中使用模板评估:
{ field: "Served", title: "Served",
template: function (data) {
switch (data.Kind) {
case 0:
case 7:
var template = kendo.template("<button type='button' data-id='#= ID #' >Yes</button><button type='button' data-id='#= ID #'>No</button>");
return template(data);
default:
return '';
}
}
让函数执行初始测试会删除一个级别并允许 'normal' 进行评估。
你可以改用函数,我相信它会让你的事情变得容易得多。
您的模板可以是"#= buildButtons(data) #"
function buildButtons(model) {
if (model.Kind == 0 || model.Kind == 7) {
return "hello world";
}
return "";
}
这是一个代码示例
https://dojo.telerik.com/UQuqAfuv
<div id="grid"></div>
<script>
var people = [
{ id: 1, firstName: 'David', lastName: 'Lebee' },
{ id: 2, firstName: 'John', lastName: 'Doe' }
];
$('#grid').kendoGrid({
dataSource: {
transport: {
read: function(options) {
options.success(people);
}
}
},
columns: [
{ field: 'firstName', title: 'First Name' },
{ field: 'lastName', title: 'Last Name' },
{ title: 'Actions', template: '#= buildActions(data) #'}
]
});
function buildActions(model) {
if (model.firstName == "David") {
return 'Hello David';
}
return '';
}
</script>
Kendo UI v2015.2.805
我有一个带有模板列的 KendoGrid,它有条件地确定是否应该添加一组按钮,如果需要额外的评估,我不知道如何嵌套他们。
以下有效但没有所需的额外评估:
{ field: "Served", title: "Served",
template: "<div>" +
"#= (Kind==0 || Kind==7) ? '" +
"<button type=\"button\" data-id=\"12345\">Yes</button>" +
"<button type=\"button\" data-id=\"54321\">No</button>" +
"' : " +
"'NO BUTTON HERE'" +
"#</div>"
我对它进行了多线处理以使其看起来不错,但事实并非如此。这个想法是,如果 Kind = 0 或 7,则显示两个按钮,否则不显示。效果很好。
但是我需要将 data-id 评估为 #= ID #,所以我尝试:
" <button type=\"button\" data-id=\"' #= ID # '\">Yes</button>"
我知道我需要 'drop out' 引用字符串才能使评估工作,并且由于我对整个表达式使用了双引号,所以我将条件中的按钮作为单引号字符串返回,并因此转义按钮属性,但我无法对其进行评估 #=.
我尝试了很多不同的组合,但我都忘记了。
那么 'right-way' 这样做的目的是什么?
一个解决方案:
接受 David 的回答并修改为在函数中使用模板评估:
{ field: "Served", title: "Served",
template: function (data) {
switch (data.Kind) {
case 0:
case 7:
var template = kendo.template("<button type='button' data-id='#= ID #' >Yes</button><button type='button' data-id='#= ID #'>No</button>");
return template(data);
default:
return '';
}
}
让函数执行初始测试会删除一个级别并允许 'normal' 进行评估。
你可以改用函数,我相信它会让你的事情变得容易得多。
您的模板可以是"#= buildButtons(data) #"
function buildButtons(model) {
if (model.Kind == 0 || model.Kind == 7) {
return "hello world";
}
return "";
}
这是一个代码示例 https://dojo.telerik.com/UQuqAfuv
<div id="grid"></div>
<script>
var people = [
{ id: 1, firstName: 'David', lastName: 'Lebee' },
{ id: 2, firstName: 'John', lastName: 'Doe' }
];
$('#grid').kendoGrid({
dataSource: {
transport: {
read: function(options) {
options.success(people);
}
}
},
columns: [
{ field: 'firstName', title: 'First Name' },
{ field: 'lastName', title: 'Last Name' },
{ title: 'Actions', template: '#= buildActions(data) #'}
]
});
function buildActions(model) {
if (model.firstName == "David") {
return 'Hello David';
}
return '';
}
</script>