使用模板自定义剑道树视图的问题答案

【问题标题】：Issue in customizing Kendo tree view using template使用模板自定义剑道树视图的问题
【发布时间】：2016-12-16 09:08:04
【问题描述】：

我有一个使用分层数据源填充的剑道树视图。如果从数据库表中软删除该节点，我想以红色显示几个节点。（软删除记录用数据库字段“DEL_FLG”标识。如果此字段设置为 Y，则该记录被视为已删除。以下是我填充树的方式。请告诉我如何软删除红色记录?

       var treeData =  new kendo.data.HierarchicalDataSource({

        transport: {
            read: {
                url: NsMenuMaster.urls.getMenuTreeUrl,
                data: data,
                datatype: "json",
                type: "POST"
            }
        },
        schema: {
            model: {
                id: "MenuConfigUid",                  
                children: "Child"

            }
        }
    });

    $("#MenuTreelist").kendoTreeView({
        dataSource: treeData,
        dataTextField: ["MenuText"],
        dataValueField: ["MenuConfigUid"],
        height: 1000,
        template: "#: item.DelFlg # == 'Y'" ? "<div style='color: red'>#: item.MenuText #</div>" : "<div style='color: black'>#: item.MenuText #</div>",
        checkboxes: {
            template: "<input type='checkbox' name='StudentClassID' value='#= item.id #' />",
            checkChildren: true
        },
        select: NsMenuMaster.onSelect
    });

【问题讨论】：

您的问题标题为 issue，但根本没有模板。看来你还没有开始。你试过了吗？
嗨@DontVoteMeDown 我已经更新了代码。你现在能检查一下吗？为什么它不起作用...

标签： kendo-ui hierarchical-data kendo-treeview kendo-template

【解决方案1】：

将模板配置添加到 TreeView 选项，即：

$("#MenuTreelist").kendoTreeView({
    template: kendo.template($("#treeview-template").html()),
    ....

还有一些模板

<script id="treeview-template" type="text/kendo-ui-template">
    # if (item.DEL_FLG) { #
        <div style='color: red'>#: item.text #</div>
    # }
    else { #
        <div>#: item.text #</div>
    # } #
</script>

简单示例：http://dojo.telerik.com/@Stephen/UtobA

问题更新后的其他详细信息

将您的模板更改为

template: "# if (item.DelFlg == 'Y') { # <div style='color: red'>#: item.MenuText #</div> # } else { # <div style='color: black'>#: item.MenuText #</div> # } #"

因为 ?: 语法很难（如果不是不可能的话）正确编码为带有任意 javascript 的混合值渲染的剑道模板，因此使用实际的 if-else 语句更容易。

用一个红色节点更新示例：http://dojo.telerik.com/@Stephen/esened

【讨论】：

我已更新代码以合并模板。还是不行