使用模板自定义 Kendo 树视图时出现问题
Issue in customizing Kendo tree view using template
我有一个 kendo 树视图,我正在使用分层数据源填充它。如果从数据库 table 中软删除了该节点,我想以红色显示几个节点。 (软删除记录用数据库字段“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
});
将模板配置添加到 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> # } #"
因为 ?: 语法极难(如果不是不可能的话)正确编码为 kendo 模板,具有任意 javascript 的混合值渲染,所以使用实际的更容易if-else 语句。
更新了一个红色节点的示例:http://dojo.telerik.com/@Stephen/esened
我有一个 kendo 树视图,我正在使用分层数据源填充它。如果从数据库 table 中软删除了该节点,我想以红色显示几个节点。 (软删除记录用数据库字段“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
});
将模板配置添加到 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> # } #"
因为 ?: 语法极难(如果不是不可能的话)正确编码为 kendo 模板,具有任意 javascript 的混合值渲染,所以使用实际的更容易if-else 语句。
更新了一个红色节点的示例:http://dojo.telerik.com/@Stephen/esened