在剑道 UI 树视图项旁边添加图像不起作用
Add Images next to Kendo UI treeview items is not working
我一直在尝试添加条件图像,以便仅在 kendoUI 树视图节点中的父节点为空时才删除。
因此,我希望显示一个删除图标,其中包含它是否不包含任何子项的逻辑。
我正在阅读有关模板的信息,我尝试了其中的一些,我最终丢失了所有数据的显示,它要么说"未定义",要么图像损坏(我可以修复损坏的图像,但它只显示损坏的图像肯定不会工作。
我的代码看起来像这样
var serviceRoot = "/Report";
homogeneous = new kendo.data.HierarchicalDataSource({
transport: {
read: {
url: serviceRoot + "/GetReportGroupAssignments", //"/LoadReportTree", // "/Employees",
dataType: "json" //"jsonp"
}
},
schema: {
model: {
id: "Id" //"ReportGroupName"
,
hasChildren: "Id"
}
}
});
var treeview = $("#treeview").kendoTreeView({
//expanded: true,
template: kendo.template($("#treeview-template").html()),
dragAndDrop: true,
dataSource: homogeneous,
dataTextField: "ReportGroupName" // "Id" //"name" //"id" // "FullName"
//,
//change: function(e) {
// console.log("Change", this.select());
//}
}).data("kendoTreeView");
好的更新:
我发现了一些我非常感兴趣的代码,想知道它是否可以"工作"
schema: {
model: {
children: "folder",
hasChildren: function (node) {
var hasChildren = (node.folder && node.folder.length > 0);
if (hasChildren === true) {
node.spriteCssClass = "folder";
} else {
node.spriteCssClass = "html";
}
return hasChildren;
}
}
}
- 我有一个现有的有孩子:"Id"所以我把它注释掉了
- 我不明白传入的"节点",它甚至来自哪里?
- 如果我的代码类型中有或没有子级,这种类型的代码/逻辑是否可以用于添加可选图像?
好的,所以我"尝试"的几种类型的模板如下
template: kendo.template($("#treeview-template").html()),
然后是几种类型的脚本
-
<script id="treeview-template" type="text/kendo-ui-template"> <a class='show-link' href=''#'><image src="/imageUrl"></a> </script>
并且还尝试过
-
<script id="treeview-template" type="text/kendo-ui-template"> #: item.text # # if (!item.items) { # <a class='delete-link' href=''#'></a> # } # </script>
需要添加模板定义
<script id="treeview-template" type="text/kendo-ui-template">
#: item.ReportGroupName #
# if (!item.ReportGroupNameResID) { #
<a class='delete-link' href=''#'>X</a>
# } #
</script>
并将删除操作绑定到链接 (X)
$(document).on("click", ".delete-link", function(e) {
e.preventDefault();
var treeview = $("#treeview").data("kendoTreeView");
treeview.remove($(this).closest(".k-item"));
});
在此处查看修订后的演示 http://jsfiddle.net/gkqc66ot/2/
所选答案使用模板是正确的。 但是,您可以定义很多删除类,例如 .删除链接在你的 css
喜欢这个:
.delete-link {
width: 12px;
height: 12px;
background: transparent url("../content/web/treeview/close.png") no-repeat 50% 50%;
overflow: hidden;
display: inline-block;
font-size: 0;
line-height: 0;
vertical-align: top;
margin: 2px 0 0 3px;
-webkit-border-radius: 5px;
-mox-border-radius: 5px;
border-radius: 5px;
}
但选择的答案肯定会起作用。
相关文章:
- jquery如何从计算机添加图像
- 如何从 URL 数组向文档添加图像列表
- 如何在fabric js中向多边形添加图像
- Bootstrap多选-在复选框后添加图像
- 通过纯JS添加图像
- 如何在鹅毛笔JS中添加图像
- 使用java脚本添加图像进行测验
- 如何添加可拖动的“;添加图像”;jquery中的图标
- 添加图像与点svg画布
- 是否可以添加图像作为徽标颜色框
- 如何使用fabric.js添加图像过滤器
- JavaScript-添加图像:React Native XCode
- Dropzone”;addedfile”;以程序方式添加图像时不会激发
- 在使用Jquery/Javascript单击下一个和上一个按钮时动态添加图像
- 用图像替换页面,而不是添加图像
- 如何获取动态添加图像的宽度和高度
- 如何在这个javascript中添加图像链接
- 尝试在画布中单击鼠标以添加图像
- 在剑道 UI 树视图项旁边添加图像不起作用
- 如何使用BEML或JS在全屏Brightcove智能播放器中添加图像叠加