Kendo UI v2015.2.805 Grid列模板嵌套求值实现方法咨询

我明白你现在的需求：在KendoGrid的模板列里，只有当Kind为0或7时才显示操作按钮，同时要给按钮绑定当前行的ID到data-id属性，还要让模板代码的格式更整洁对吧？

针对Kendo UI v2015.2.805版本，我给你整理了两种实现方式，都能解决嵌套求值和格式问题：

方式一：使用外部模板（推荐，格式更清晰） #

把模板单独写到<script>标签里，这样可以自由换行，避免在JS字符串里的转义麻烦：

<!-- 定义模板 -->
<script type="text/x-kendo-template" id="actionBtnTemplate">
    #  // Kendo模板的代码块，用来做条件判断
    if (Kind === 0 || Kind === 7) { #
        <!-- 满足条件时渲染按钮，直接用#= ID #绑定数据 -->
        <button class="k-button k-primary" data-id="#= ID #">编辑</button>
        <button class="k-button" data-id="#= ID #">删除</button>
    # } #
</script>

<!-- Grid初始化代码 -->
<script>
$("#yourGridId").kendoGrid({
    dataSource: yourDataSource, // 确保数据源包含Kind和ID字段
    columns: [
        // 其他列配置...
        {
            title: "操作",
            template: $("#actionBtnTemplate").html()
        }
    ]
});
</script>

方式二：直接在columns.template中写模板 #

如果不想用外部模板，也可以直接把模板写在JS配置里，用反引号（ES6多行字符串）来保留换行格式：

$("#yourGridId").kendoGrid({
    dataSource: yourDataSource,
    columns: [
        // 其他列...
        {
            title: "操作",
            template: `
                # if (Kind === 0 || Kind === 7) { #
                    <button class="k-button k-primary" data-id="#= ID #">编辑</button>
                    <button class="k-button" data-id="#= ID #">删除</button>
                # } #
            `
        }
    ]
});

关键说明 #

• 嵌套求值实现：Kendo模板里的#= 变量名 #语法可以直接在HTML属性中使用，所以data-id="#= ID #"就能把当前行的ID值绑定到按钮属性上
• 条件判断语法：# if(...) { #和# } #是Kendo模板的代码块标记，用来执行JS逻辑，注意和HTML内容的分界
• 格式优化：外部模板或者多行字符串反引号都能让模板代码保持清晰的换行结构，不用在字符串里加\n或者拼接符号

这样配置后，就能实现你要的功能：只有符合条件的行才显示按钮，按钮也能正确获取到当前行的ID，代码格式也更易维护啦～

内容的提问来源于stack exchange，提问作者kpg