Skip to content

Commit c182371

Browse files
codedogfishcodedogfish
committed
Create new version, make it simple and easy to use
1 parent 0a13dfd commit c182371

File tree

18 files changed

+306
-17
lines changed

18 files changed

+306
-17
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
bower_components

‎README.md

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,3 +6,43 @@ It is a angular directive of tree.
66

77
## template customize
88
You can customize the presenation of tree ui, just add or edit the template.
9+
10+
11+
12+
# Angular-UI-Tree
13+
14+
### 简介
15+
16+
1. `ui-tree="treeSource"`
17+
用于指定 tree 的容器以及数据源
18+
2. `node="item"`
19+
用于指定被 ng-repeat 的元素，item 则表示 node 的变量名，相当于 `ng-repeat="item in treeSource"`
20+
3. `node-children="item.children"`
21+
用于指定 sub-tree 的容器，item.children 则表示子树的数据源
22+
23+
与另一个版本的 [angular-ui-tree](https://github.com/angular-ui-tree/angular-ui-tree) 相比更简洁，只提供最基础的按照数据递归渲染 DOM 的功能，方便开发者定制自己的 DOM 结构和功能
24+
25+
### 示例：
26+
27+
1、开发可展开闭合的树
28+
29+
```
30+
<ul ui-tree="treeSource">
31+
<li node="item" id="{{item.id}}">
32+
<span>{{item.name}}</span>
33+
<button ng-show="item.children" ng-click="toggle(item);$event.stopPropagation();">open</button>
34+
<ul node-children="item.children" ng-show="item.isOpen"></ul>
35+
</li>
36+
</ul>
37+
```
38+
39+
```
40+
$scope.treeSource = [
41+
{ id: 1, name: 'jack' },
42+
{ id: 2, name: 'ivan', children: [ { id: 3, name: 'ivan`s son' }, { id: 4, name: 'ivan`s daughter' } ] }
43+
];
44+
45+
$scope.toggle = function(item) {
46+
item.isOpen = !item.isOpen;
47+
};
48+
```

‎bower.json

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"name": "angular-ui-tree",
3+
"homepage": "https://github.com/codedogfish/angular-ui-tree",
4+
"authors": [
5+
"codedogfish <[email protected]>"
6+
],
7+
"description": "",
8+
"main": "",
9+
"moduleType": [],
10+
"license": "MIT",
11+
"ignore": [
12+
"**/.*",
13+
"node_modules",
14+
"bower_components",
15+
"test",
16+
"tests"
17+
],
18+
"dependencies": {
19+
"angular": "~1.4.8",
20+
"es5-shim": "~4.4.1",
21+
"json3": "~3.3.2",
22+
"jquery": "~2.2.0",
23+
"bootstrap": "~3.3.6"
24+
}
25+
}

‎demo/app.js

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
angularUiTreeDemo = angular.module("angularUiTreeDemo",["angularUiTree"]);
2+
angularUiTreeDemo.controller("MainCtrl",function($scope){
3+
$scope.treeSource = [
4+
{
5+
id: 1,
6+
name: 'jack'
7+
},
8+
{
9+
id: 2,
10+
name: 'ivan',
11+
children: [
12+
{
13+
id: 3,
14+
name: 'ivan`s son',
15+
children: [
16+
{
17+
id: 4,
18+
name: 'ivan`s grandson'
19+
}
20+
]
21+
}
22+
]
23+
}
24+
];
25+
$scope.alert = function(item) {
26+
console.log(item.id);
27+
};
28+
$scope.toggle = function(item) {
29+
console.log(item);
30+
item.isOpen = !item.isOpen;
31+
};
32+
});

‎demo/index.html

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<link rel="stylesheet" type="text/css" href="../bower_components/bootstrap/dist/css/bootstrap.css">
6+
<link rel="stylesheet" type="text/css" href="style.css">
7+
<title>Angular UI Tree Demo</title>
8+
</head>
9+
<body ng-app="angularUiTreeDemo">
10+
<div ng-controller="MainCtrl">
11+
<ul ui-tree="treeSource">
12+
<li node="item" id="{{item.id}}" ng-click="toggle(item);$event.stopPropagation();">
13+
<span class="glyphicon glyphicon-search" ng-class="{'glyphicon-menu-right':!item.isOpen,'glyphicon-menu-down':item.isOpen}" ng-show="item.children"></span>
14+
<span>{{item.name}}</span>
15+
<ul node-children="item.children" ng-show="item.isOpen"></ul>
16+
</li>
17+
</ul>
18+
<ul class="list-group" ui-tree="treeSource">
19+
<li node="item" class="list-group-item" ng-click="toggle(item);$event.stopPropagation();">
20+
<span class="badge" ng-show="item.children">{{item.children.length}}</span>
21+
{{item.name}}
22+
<ul node-children="item.children" ng-show="item.isOpen">
23+
</ul>
24+
</li>
25+
</ul>
26+
</div>
27+
28+
<script src="../bower_components/jquery/dist/jquery.js"></script>
29+
<script src="../bower_components/angular/angular.js"></script>
30+
<script src="../src/uiTree.js"></script>
31+
32+
<script src="app.js"></script>
33+
</body>
34+
</html>

‎demo/style.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
li{
2+
cursor: pointer;
3+
}

‎old/demo/app.js

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
angular.module('angularUiTreeApp', ['angularUiTree'])
2+
.controller('MainCtrl', function($scope, treeConvertor){
3+
4+
$scope.nodeActions = {
5+
move: {
6+
icon: "fa-arrows",
7+
click: function (item) {
8+
event.cancelBubble = true;
9+
//jstree-node状态设为in-move
10+
$(event.target).parentsUntil('ul', '.jstree-node').addClass('move-source');
11+
//树的状态设为in-move
12+
$(".jstree").addClass("in-move");
13+
}
14+
},
15+
sortUp: {
16+
icon: "fa-arrow-up",
17+
click: function (item) {
18+
}
19+
},
20+
sortDown: {
21+
icon: "fa-arrow-down",
22+
click: function (item) {
23+
}
24+
}
25+
};
26+
27+
$scope.ActiveNode = function (item) {
28+
//in-move状态下选中：选中目标
29+
if ($(".jstree").hasClass("in-move")) {
30+
31+
//清除所有in-move状态
32+
$('.move-source').removeClass('move-source');
33+
$('.in-move').removeClass('in-move');
34+
35+
}
36+
}
37+
38+
var depts = [
39+
{ id: 1, parentId: null, name: '节点1', isLeaf: false },
40+
{ id: 2, parentId: null, name: '节点2', isLeaf: false,
41+
children: [
42+
{ id: 3, parentId: 1, name: ' 子节点1', isLeaf: true }
43+
]
44+
},
45+
];
46+
$scope.departmentsTreeSource = depts;
47+
$scope.departmentsTreeSource[0].hide = {
48+
move: true,
49+
sortUp: true,
50+
sortDown: true
51+
};
52+
$scope.departmentsTreeSource[0].active = true;
53+
$scope.departmentsTreeSource[0].open = true;
54+
55+
$scope.treeSetting = {
56+
treeConvertorOptions: {
57+
key: "id",
58+
parentKey: "pid",
59+
name: "name",
60+
type: null,
61+
isLeaf: "isLeaf"
62+
}
63+
};
64+
});

‎old/demo/index.html

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<link rel="stylesheet" type="text/css" href="style.css">
6+
<title>angular ui tree demo</title>
7+
</head>
8+
<body ng-app="angularUiTreeApp">
9+
<!--[if lt IE 7]>
10+
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
11+
<![endif]-->
12+
13+
<div ng-controller="MainCtrl">
14+
<div dir-tree="departmentsTreeSource" node-active="ActiveNode" node-actions="nodeActions" node-setting="treeSetting"></div>
15+
</div>
16+
17+
<!--[if lt IE 9]>
18+
<script src="bower_components/es5-shim/es5-shim.js"></script>
19+
<script src="bower_components/json3/lib/json3.min.js"></script>
20+
<![endif]-->
21+
22+
<!-- build:js(.) scripts/vendor.js -->
23+
<!-- bower:js -->
24+
<script src="../bower_components/jquery/dist/jquery.js"></script>
25+
<script src="../bower_components/angular/angular.js"></script>
26+
<script src="../src/tree.js"></script>
27+
28+
<!-- endbower -->
29+
<!-- endbuild -->
30+
31+
<!-- build:js({.tmp,app}) scripts/scripts.js -->
32+
<script src="app.js"></script>
33+
<!-- endbuild -->
34+
</body>
35+
</html>

‎old/src/.tree.html.swp

12 KB
Binary file not shown.

‎src/templates/fuelux/tree.html renamed to ‎old/src/templates/fuelux/tree.html

File renamed without changes.

0 commit comments

Comments
 (0)