AngularJS基于树的控制组件

所属分类:导航-文件树

 44138  28  查看评论 (23)
AngularJS基于树的控制组件 ie兼容10

AngularJS基于树的控制组件

树控件可以作为一个DOM元素或属性。

复制脚本和CSS为你的项目添加一个脚本和链接到你的页面。

<script type="text/javascript" src="/angular-tree-control.js"></script>
<link rel="stylesheet" type="text/css" href="css/tree-control.css">
<link rel="stylesheet" type="text/css" href="css/tree-control-attribute.css">

添加一个依赖于您的应用程序模块

angular.module('myApp', ['treeControl']);

将树元素添加到您的模板

<!-- as a Dom element -->
<treecontrol class="tree-classic"
   tree-model="dataForTheTree"
   options="treeOptions"
   on-selection="showSelected(node)"
   selected-node="node1">
   employee: {{node.name}} age {{node.age}}
</treecontrol>
<!-- as an attribute -->
<div treecontrol class="tree-classic"
   tree-model="dataForTheTree"
   options="treeOptions"
   on-selection="showSelected(node)"
   selected-node="node1">
   employee: {{node.name}} age {{node.age}}
</div>

并为树添加数据

$scope.treeOptions = {
    nodeChildren: "children",
    dirSelectable: true,
    injectClasses: {
        ul: "a1",
        li: "a2",
        liSelected: "a7",
        iExpanded: "a3",
        iCollapsed: "a4",
        iLeaf: "a5",
        label: "a6",
        labelSelected: "a8"
    }
}
$scope.dataForTheTree =
[
    { "name" : "Joe", "age" : "21", "children" : [
        { "name" : "Smith", "age" : "42", "children" : [] },
        { "name" : "Gary", "age" : "21", "children" : [
            { "name" : "Jenifer", "age" : "23", "children" : [
                { "name" : "Dani", "age" : "32", "children" : [] },
                { "name" : "Max", "age" : "34", "children" : [] }
            ]}
        ]}
    ]},
    { "name" : "Albert", "age" : "33", "children" : [] },
    { "name" : "Ron", "age" : "29", "children" : [] }
];

样式

树控件呈现以下的DOM结构

<treecontrol class="tree-classic">
  <ul>
    <li class="tree-expanded">
      <i class="tree-branch-head"></i>
      <i class="tree-leaf-head"></i>
      <div class="tree-label">
         ... label - expanded angular template is in the treecontrol element ...
      </div>
      <treeitem>
        <ul>
          <li class="tree-leaf">
            <i class="tree-branch-head"></i>
            <i class="tree-leaf-head"></i>
            <div class="tree-label tree-selected">
              ... label - expanded angular template is in the treecontrol element ...
            </div>
          </li>
          <li class="tree-leaf">
            <i class="tree-branch-head"></i>
            <i class="tree-leaf-head"></i>
            <div class="tree-label">
              ... label - expanded angular template is in the treecontrol element ...
            </div>
          </li>
        </ul>
      </treeitem>
    </li>
  </ul>
</treecontrol>

CSS类用于内置样式的树控件。附加的类可以使用options.injectclasses成员加入(见上文)

树扩展,树倒塌,树叶放在“UL”元素

树枝头,树的叶头-被放置在'i'元素。我们使用这些类来放置树的图标

树选择放置于标签div


相关插件-文件树

AngularJS基于树的控制组件

Angular JS Tree基于树的控制组件
  文件树
 44138  28

树形插件

wdTree是一个轻量级jQuery插件用于创建一个带有嵌套Check Boxe的树形控件。
  文件树
 30357  35

dhtmlxTree树形控件

dhtmlxTree 是树菜单,允许我们快速开发界面优美,基于Ajax的javascript库.
  文件树
 9343  20

jquery.treeview.js树控件

jquery.treeview.js树控件
  文件树
 77702  47

讨论这个项目(23)回答他人问题或分享插件使用方法奖励jQ币

    啊健 0
    2017/5/20 22:45:01

    怎么添加删除节点,难道要遍历吗

    回复
    黎明就在眼前! 0
    2017/3/27 21:15:08

    搞了10天,搞懂了

        3!!0
        2017/3/30 10:37:18

        请问请求的树型结构数据,为什么默认展开不能用呢

        达程0
        2017/4/14 15:13:50

        怎么搞好的,能发个demo吗?1598254567@qq.com

        蒲公英っ落在指尖的温度0
        2017/4/25 11:29:02

        能发个demo吗? 2668397548@qq.com  

    回复
    黎明就在眼前! 0
    2017/3/23 0:54:52

    怎么搞的,看不懂。。。。

    回复
    Bill 0
    2016/9/21 10:09:31
    angular-tree-control的点击事件 点击树节点打开网页 回复
    zongzhen 0
    2016/5/4 16:05:02
    请教下,哪个里面可以实现树节点的添加或删除?
        Larry Zhu0
        2016/9/20 10:09:36
        同问
        杨杨0
        2017/6/7 15:40:50

        我也想知道啊

    回复
    suzu 0
    2016/4/27 23:04:10
    到底这个要怎么用? 回复
    I 0
    2016/4/21 14:04:20
    数据过多加载速度满怎么解决,才1000条数据就要加载1分钟左右
        你最珍贵0
        2016/4/27 16:04:58
        这个的点击事件怎么做呢?
        一只时光静止的章鱼0
        2016/5/23 16:05:23
        我测试的是4层30*30*30*30,81W条数据也就几秒呀= =
    回复
    Code_killer 0
    2016/4/8 14:04:13
    求一个demo,我怎么没有实现效果。。。。。 回复
    hellojoy 0
    2016/3/24 11:03:21
    挺好   
        Will0
        2016/9/26 18:09:24
        杂用?
    回复
    senmage 0
    2016/3/19 14:03:12
    怎样设置默认菜单全部展开啊
        躬耕天下0
        2016/3/31 20:03:18
        展开功能最后有着落了吗?同求!!!
        黎明就在眼前!0
        2017/3/26 16:02:50

        怎么设置全部关闭啊?

    回复
取消回复