AngularJS基于树的控制组件

所属分类:导航-文件树

 32852  20  查看评论 (15)
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


相关插件-文件树

dhtmlxTree树形控件

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

jquery树形菜单

jquery树形菜单制作html多级漂亮的树形菜单代码
  文件树
 47330  169

带有复选框可折叠的树形结构

该插件是我改良的layer的树形插件,在原始的layer插件中的树形结构是没有复选框的,经我修改后可用以拿来做权限系统的权限选择
  文件树
 6543  30

无级别树形菜单插件

通过添加JSON数据页面同步添加菜单
  文件树
 3618  15

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

    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
        同问
    回复
    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
        展开功能最后有着落了吗?同求!!!
    回复
    pakyo 0
    2016/2/16 11:02:29
    酷哦
        senmage0
        2016/3/19 14:03:43
        知道怎样设置默认全部菜单自动展开吗
    回复
    munaiyi007 0
    2016/1/28 14:01:23
取消回复
    PROMULGATOR

    akingrui

    火星