我如何得到所有的父节点上的文件夹图标和文件夹加号图标，所有的子节点（在左边的图标shoulbe） [英] 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图标文件夹加和子节点应该是'icomoon图标文件夹。

 函数TreeView控件（）{
  VAR treeMenu =新kendo.data.HierarchicalDataSource（{
    模板：kendo.template（$（＃树视图模板）HTML（）。）
    模式：{
      型号：{
        ID：ID，
        扩展：假的，
        hasChildren：HasChildren
      }
    }，
    运输： {
      阅读：{
        网址：/ getTreeDetails
        的contentType：应用/ JSON的;字符集= UTF-8，
        键入：POST，
        数据类型：JSON
      }，
    }
  }）;
  $（＃树视图）。kendoTreeView（{
    数据源：treeMenu，
    dataValueField：ID，
    dataTextField：标签]
    模板：kendo.template（$（＃树视图模板）HTML（））
  }）;
}
$（文件）。就绪（函数（）{
  TreeView控件（）;
}）;
 

脚本：图标为正在添加在右手侧的所有节点

。

 ＆LT;脚本ID =树视图模板TYPE =文/剑道的UI模板＆GT;
        ＆LT;跨度ID ='treeLabel风格=字体重量：大胆的;数据-ID ='＃= item.id＃'＆GT;＆LT; / SPAN＆GT;
        ＃：item.LABEL＃
       ＃如果（item.hasChildren）{＃
     ＆所述; A HREF ='\\＃'＆GT;＆下;跨度类='icomoon图标夹加'＆GT;＆下; /跨度＆GT;＆下; / A＆GT;
＃}＃
    ＆LT; / SCRIPT＆GT;
 

HTML

 ＆LT; UL类=K组K-树视图线角色=树＆GT;
   ＆LT;李班=K-项K-第一的咏叹调选择=false的数据的uid =3-72f2c45e0d7d角色=treeitem咏叹调展开=假ID =treeview_tv_active＆GT;
     ＆所述;股利类=K-顶＆GT;
       ＆LT;跨度类=K-图标K-加角色=presentation＆GT;＆LT; / SPAN＆GT;
       ＆所述;跨度类=K-在＆GT;
          ＆LT;跨度ID =treeLabel数据ID =64的风格=字体重量：大胆;＆GT;团队及LT; / SPAN＆GT;
               ＆LT; / SPAN＆GT;
          ＆LT; / DIV＆GT;＆LT; /李＆GT;
   ＆LT;李班=K-项咏叹调选择=false的数据的uid =41d2-9e3c-69b6c8938c1d角色=treeitem＆GT;＆LT; /李＆GT;
    ＆LT;李班=K-项咏叹调选择=false的数据的uid =4546-b88b-f38f4b2e32e4角色=treeitem＆GT;＆LT; /李＆GT;
    ＆LT;李班=K-项咏叹调选择=false的数据的uid =44fa-8784-9c40a7b8ecf7角色=treeitem＆GT;＆LT; /李＆GT;
    ＆LT;李班=K-项K-最后的咏叹调选=false的数据的uid =413F-b429-581cf6b58ee7角色=treeitem＆GT;＆LT; /李＆GT;
    ＆LT; / UL＆GT;
 

解决方案

不完全知道你想达到什么做的，但这个问题我抓住你想要

1. 的节点之前得到的图标这是否意味着节点之前的地方/放图标？我以为是cmiiw


2. 和具有hasChildren属性你想要把icomoon图标文件夹加，子节点上把icomoon图标文件夹父节点

所以在这里，我去

1. 如果您希望把它的节点，而不是使用模板之前，我需要使用数据绑定功能。


2. 从您完成所有的期待＆LT数据绑定功能;李＆GT;＆LT; /李＆GT; 然后通过所有这些循环，并创造条件如果（hasChildren ）{}逻辑其他{逻辑}

我一直无法使用该模板这样一个目的，所以这是我能做到的最佳方式。这里是的jsfiddle

I want to get icons before the nodes of the Parent node and the child nodes. For parent nodes it should be icomoon-icon-folder-plus and for child nodes it should be '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: icon is comming for all nodes on the right hand side.

<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>

解决方案

Not entirely sure what do you want to achieve, but from the question i grasp that you wanted to

1. "get icons before the nodes" Does it mean place/put icon before the node ? i assumed yes cmiiw
2. and for parent node which have hasChildren attribute you want to put icomoon-icon-folder-plus, on the child node to put icomoon-icon-folder

So here i go

1. If you wanted to put it before the node instead of using template, i need to use the databound function.
2. From databound function you look through all <li></li> then loop through all of them and create conditional if(hasChildren){ logic } else { logic}

I haven't been able to use the template for such a purpose so this is the best way i could achieve it. and here is the jsFiddle

这篇关于我如何得到所有的父节点上的文件夹图标和文件夹加号图标，所有的子节点（在左边的图标shoulbe）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！