我如何在所有父节点上获得文件夹图标,在所有子节点上获得文件夹加图标(图标应该在左侧)
How do i get a folder icon on all the parent nodes and folder plus icon on all the child nodes(icon shoulbe on left side)
我想获取父节点和子节点的节点之前的图标。对于父节点,它应该是 icomoon-icon-folder-plus,对于子节点,它应该是 'icomoon-icon-folder'.
function treeView() {
var treeMenu = new kendo.data.HierarchicalDataSource({
template: kendo.template($("#treeview-template").html()),
schema: {
model: {
id: "id",
expanded: false,
hasChildren: "HasChildren"
}
},
transport: {
read: {
url: "/getTreeDetails",
contentType: "application/json; charset=utf-8",
type: "POST",
datatype: "json",
},
}
});
$("#treeview").kendoTreeView({
dataSource: treeMenu,
dataValueField: "id",
dataTextField: ['LABEL'],
template: kendo.template($("#treeview-template").html())
});
}
$(document).ready(function() {
treeView();
});
脚本:右侧所有节点的图标即将出现。
<script id="treeview-template" type="text/kendo-ui-template">
<span id='treeLabel' style='font-weight:bold;' data-id='#=item.id #'></span>
#: item.LABEL #
# if (item.hasChildren) { #
<a href='\#'><span class='icomoon-icon-folder-plus'></span></a>
# } #
</script>
HTML:
<ul class="k-group k-treeview-lines" role="tree">
<li class="k-item k-first" aria-selected="false " data-uid="3-72f2c45e0d7d" role="treeitem" aria-expanded="false" id="treeview_tv_active">
<div class="k-top">
<span class="k-icon k-plus" role="presentation"></span>
<span class="k-in">
<span id="treeLabel" data-id="64" style="font-weight:bold;">Team</span>
</span>
</div></li>
<li class="k-item" aria-selected="false " data-uid="41d2-9e3c-69b6c8938c1d" role="treeitem"></li>
<li class="k-item" aria-selected="false " data-uid="4546-b88b-f38f4b2e32e4" role="treeitem"></li>
<li class="k-item" aria-selected="false " data-uid="44fa-8784-9c40a7b8ecf7" role="treeitem"></li>
<li class="k-item k-last" aria-selected="false " data-uid="413f-b429-581cf6b58ee7" role="treeitem"></li>
</ul>
不完全确定你想要实现什么,但从这个问题我了解到你想要
- "get icons before the nodes" 是指节点前的 place/put 图标吗?我假设是 cmiiw
- 对于有hasChildren属性的父节点,你想放icomoon-icon-folder-plus,子节点放icomoon-icon-folder
我来了
- 如果你想把它放在节点之前而不是使用模板,我需要使用数据绑定功能。
- 从数据绑定函数中查看所有
<li></li>
然后遍历所有这些并创建条件 if(hasChildren){ logic } else { logic}
我无法将模板用于此类目的,所以这是我可以实现它的最佳方式。这是 jsFiddle
你可以看看list-style-image
CSS属性.
ul {
list-style-image: url('sqpurple.gif');
}
在此处查看示例和更多信息 - http://www.w3schools.com/cssref/pr_list-style-image.asp
创建了模板而不是数据源。
# if (item.type= "true") { #
}
我想获取父节点和子节点的节点之前的图标。对于父节点,它应该是 icomoon-icon-folder-plus,对于子节点,它应该是 'icomoon-icon-folder'.
function treeView() {
var treeMenu = new kendo.data.HierarchicalDataSource({
template: kendo.template($("#treeview-template").html()),
schema: {
model: {
id: "id",
expanded: false,
hasChildren: "HasChildren"
}
},
transport: {
read: {
url: "/getTreeDetails",
contentType: "application/json; charset=utf-8",
type: "POST",
datatype: "json",
},
}
});
$("#treeview").kendoTreeView({
dataSource: treeMenu,
dataValueField: "id",
dataTextField: ['LABEL'],
template: kendo.template($("#treeview-template").html())
});
}
$(document).ready(function() {
treeView();
});
脚本:右侧所有节点的图标即将出现。
<script id="treeview-template" type="text/kendo-ui-template">
<span id='treeLabel' style='font-weight:bold;' data-id='#=item.id #'></span>
#: item.LABEL #
# if (item.hasChildren) { #
<a href='\#'><span class='icomoon-icon-folder-plus'></span></a>
# } #
</script>
HTML:
<ul class="k-group k-treeview-lines" role="tree">
<li class="k-item k-first" aria-selected="false " data-uid="3-72f2c45e0d7d" role="treeitem" aria-expanded="false" id="treeview_tv_active">
<div class="k-top">
<span class="k-icon k-plus" role="presentation"></span>
<span class="k-in">
<span id="treeLabel" data-id="64" style="font-weight:bold;">Team</span>
</span>
</div></li>
<li class="k-item" aria-selected="false " data-uid="41d2-9e3c-69b6c8938c1d" role="treeitem"></li>
<li class="k-item" aria-selected="false " data-uid="4546-b88b-f38f4b2e32e4" role="treeitem"></li>
<li class="k-item" aria-selected="false " data-uid="44fa-8784-9c40a7b8ecf7" role="treeitem"></li>
<li class="k-item k-last" aria-selected="false " data-uid="413f-b429-581cf6b58ee7" role="treeitem"></li>
</ul>
不完全确定你想要实现什么,但从这个问题我了解到你想要
- "get icons before the nodes" 是指节点前的 place/put 图标吗?我假设是 cmiiw
- 对于有hasChildren属性的父节点,你想放icomoon-icon-folder-plus,子节点放icomoon-icon-folder
我来了
- 如果你想把它放在节点之前而不是使用模板,我需要使用数据绑定功能。
- 从数据绑定函数中查看所有
<li></li>
然后遍历所有这些并创建条件if(hasChildren){ logic } else { logic}
我无法将模板用于此类目的,所以这是我可以实现它的最佳方式。这是 jsFiddle
你可以看看list-style-image
CSS属性.
ul {
list-style-image: url('sqpurple.gif');
}
在此处查看示例和更多信息 - http://www.w3schools.com/cssref/pr_list-style-image.asp
创建了模板而不是数据源。
# if (item.type= "true") { #