Angular Tree Control

8人阅读 评论(0) 收藏 举报
分类:

github网址:https://github.com/wix/angular-tree-control

demo网址:http://wix.github.io/angular-tree-control/

安装:

<script type="text/javascript" src="/angular-tree-control.js"></script>

<!-- Include context-menu module if you're going to use menu-id attribute -->
<script type="text/javascript" src="/context-menu.js"></script>

<!-- link for CSS when using the tree as a Dom element -->
<link rel="stylesheet" type="text/css" href="css/tree-control.css">

<!-- link for CSS when using the tree as an attribute -->
<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" : [] }
];





查看评论

AngularJS tree demo

1、效果图 2、代码 js、css
  • big1989wmf
  • big1989wmf
  • 2017-04-12 16:37:15
  • 2022

树形控件(Tree Control)

///"添加"按钮的响应函数 void CTreeCtrlDemoDlg::OnBtnAdd() { // TODO: Add your control notification handler ...
  • yaoxinchao
  • yaoxinchao
  • 2012-11-24 14:51:46
  • 6504

FolderTreeCtrl

  • 2009年05月06日 21:26
  • 3.64MB
  • 下载

vc++ Tree Control使用总结

目前软件的数据曲线绘制模块,需要用到TreeCtrl控件,在学习使用这个控件的过程中,再次感受到了自己的编程基本功、利用MSDN自学能力的不足,以及来自MFC做界面的深深的恶意,现在基础还差,等再巩固...
  • woaisia
  • woaisia
  • 2015-05-08 16:14:54
  • 3098

TREE control 介绍

DIZHI http://www.jizhuomi.com/software/200.html 前面两节为大家讲了列表视图控件List Control,这一节开始介绍一种特...
  • u010530213
  • u010530213
  • 2015-04-10 09:58:10
  • 726

MFC Tree Control控件使用

MFC Tree Control控件使用1.InsertItem 添加节点参数: 文字,图标,父节点返回: HTREEITEM 示例: 添加一系列节点HTREEITEM hItem = m_Tree....
  • ljt350740378
  • ljt350740378
  • 2011-05-19 22:07:00
  • 25274

AngularJS的tree控件

  • 2016年02月26日 14:25
  • 235KB
  • 下载

angular-ui-tree

转自:http://www.cnblogs.com/crazyJavaBoy/p/5057347.html angular-ui-tree的github项目地址:https://github...
  • Inuyasha1121
  • Inuyasha1121
  • 2017-02-20 16:26:16
  • 1856

MFC TreeControl复选框:选中某个节点的复选框后,自动选中子节点的复选框

1、 2、 3、 4、 5、
  • wwkaven
  • wwkaven
  • 2014-11-05 13:09:29
  • 2058

angular-ui-tree使用

今天为大家介绍下angular-ui-tree的使用方法,它是一个不依赖于jQuery 的angualrJS UI,友好的外观,方便的操作,是它最大的优势。 angular-ui-tree有如下...
  • weixin_36065510
  • weixin_36065510
  • 2017-05-23 15:03:09
  • 1806
    个人资料
    持之以恒
    等级:
    访问量: 1173
    积分: 478
    排名: 10万+
    文章存档