【问题标题】: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)我如何在所有父节点上获得文件夹图标,在所有子节点上获得文件夹加图标(图标应该在左侧)
【发布时间】:2016-03-29 21:30:29
【问题描述】:

我想在父节点和子节点的节点之前获取图标。对于父节点,它应该是 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>

【问题讨论】:

标签: javascript jquery asp.net kendo-ui treeview


【解决方案1】:

不完全确定您想要实现什么,但从我掌握的问题来看,您想要实现

  1. “在节点之前获取图标”是指在节点之前放置/放置图标吗?我假设是的 cmiiw
  2. 对于具有 hasChildren 属性的父节点,您要放置 icomoon-icon-folder-plus,在子节点上放置 icomoon-icon-folder

所以我来了

  1. 如果你想把它放在节点之前而不是使用模板,我需要使用数据绑定功能。
  2. 从数据绑定函数中查看所有&lt;li&gt;&lt;/li&gt;,然后遍历所有if(hasChildren){ logic } else { logic}

我无法将模板用于此目的,因此这是我可以实现它的最佳方式。这是jsFiddle

【讨论】:

  • 感谢您的回复,但所需的输出应该是这样的 dojo.telerik.com/UFite/2> 但根据您的 coe,图标在箭头之前出现,并且当我单击箭头时它们会重复,例如孩子来了两次,第三个孩子来了 3 次
  • 我将您的代码“之前”修改为“之后”以获取箭头按钮之后的图像,但图像仍在重复并为所有父母和孩子获得相同的图像。在您的示例中,我发现如果没有孩子,孩子就没有箭头,但在我的情况下,即使没有孩子,我也会得到箭头。我想这会导致问题,但没有得到解决方法。
  • 你的道场链接不起作用,我在 jsfiddle 的代码中没有看到重复的文本
  • 是的,但如果我使用相同的代码,它会重复我
  • 甚至你的代码也可以工作,但不知何故我更喜欢模板而不是数据绑定
【解决方案2】:

您可以查看list-style-image CSS 属性。

ul {
  list-style-image: url('sqpurple.gif');
}

在此处查看示例和更多信息 - http://www.w3schools.com/cssref/pr_list-style-image.asp

【讨论】:

    【解决方案3】:

    创建了一个模板而不是数据源。

     # if (item.type= "true") { #
    

    }

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2018-01-31
      • 1970-01-01
      • 2011-06-20
      • 1970-01-01
      • 1970-01-01
      • 2023-03-13
      • 1970-01-01
      • 2019-09-04
      相关资源
      最近更新 更多