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 <jackcool1989@outlook.com>"
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.

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

File renamed without changes.

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

File renamed without changes.

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

File renamed without changes.

‎src/templates/jstree/treeContent.html renamed to ‎old/src/templates/jstree/treeContent.html

File renamed without changes.

‎src/templates/jstree/treeNode.html renamed to ‎old/src/templates/jstree/treeNode.html

File renamed without changes.

‎old/src/tree.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<div ui-tree data-source="string=>url object=>nodes function=>load">
2+
<div ui-tree-node></div>
3+
</div>

‎src/tree.js renamed to ‎old/src/tree.js

Lines changed: 19 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -9,20 +9,22 @@
99
* 新增toggleNode方法、通过node的active和open属性可以设置默认选中和展开
1010
*/
1111
tree_v = "1.1.5";
12-
(function (app) {
12+
(function () {
13+
var app = angular.module('angularUiTree',[]);
1314
app.treeViewOptions = [
14-
"nodeRemove",//删除 function(node){}
15-
"nodeAdd",//添加 function(node){}
16-
"nodeEdit",//添加 function(node){}
17-
"nodeRefresh",//刷新 function(node){}
18-
"nodeToggle",//展开/闭合 function(node){}
19-
"nodeLoad",//展开/闭合 function(node){}
20-
"nodeSelect",//选中/取消选中 function(node){}
21-
"nodeActive",//选中/取消选中 function(node){}
22-
"nodeActions",//自定义 [{icon:'fa-user',click:function(node){}},...]
23-
"nodeIcons",//节点图标 {'user':'fa-user',...}
24-
"nodeAll",//所有节点
25-
"nodeSetting"];//设置 {selectMode: "advanced", expandAll: true, treeConvertorOptions: {}}
15+
"nodeRemove",//删除 function(node){}
16+
"nodeAdd",//添加 function(node){}
17+
"nodeEdit",//添加 function(node){}
18+
"nodeRefresh",//刷新 function(node){}
19+
"nodeToggle",//展开/闭合 function(node){}
20+
"nodeLoad",//展开/闭合 function(node){}
21+
"nodeSelect",//选中/取消选中 function(node){}
22+
"nodeActive",//选中/取消选中 function(node){}
23+
"nodeActions",//自定义 [{icon:'fa-user',click:function(node){}},...]
24+
"nodeIcons",//节点图标 {'user':'fa-user',...}
25+
"nodeAll",//所有节点
26+
"nodeSetting"//设置 {selectMode: "advanced", expandAll: true, treeConvertorOptions: {}}
27+
];
2628
app.treeViewOptionAbbrs = ["remove", "add", "edit", "refresh", "toggle", "load", "select", "active", "actions", "icons", "all", "setting"];
2729
app.treeViewDefaultSetting = {
2830
selectMode: "simple",//simple 简单模式 advanced 高级模式
@@ -68,7 +70,7 @@ tree_v = "1.1.5";
6870
app.directive('dirTree', ["$compile", function ($compile) {
6971
return {
7072
restrict: 'A',
71-
templateUrl: app.SpaBaseUrl + '/plugins/tree/templates/' + app.treeTemplate + '/tree.html',
73+
templateUrl: '../src/templates/' + app.treeTemplate + '/tree.html',
7274
scope: app.treeScope,
7375
link: function (scope, element, attrs) {
7476

@@ -143,7 +145,7 @@ tree_v = "1.1.5";
143145
app.directive('dirTreeContent', function () {
144146
return {
145147
restrict: 'A',
146-
templateUrl: app.SpaBaseUrl + '/plugins/tree/templates/' + app.treeTemplate + '/treeContent.html',
148+
templateUrl: '../src/templates/' + app.treeTemplate + '/treeContent.html',
147149
scope: app.treeContentScope,
148150
link: function (scope, element, attrs) {
149151
var options = app.treeViewOptions;
@@ -158,7 +160,7 @@ tree_v = "1.1.5";
158160
app.directive('dirTreeNode', ["$compile", "treeConvertor", function ($compile, treeConvertor) {
159161
return {
160162
restrict: 'A',
161-
templateUrl: app.SpaBaseUrl + '/plugins/tree/templates/' + app.treeTemplate + '/treeNode.html',
163+
templateUrl: '../src/templates/' + app.treeTemplate + '/treeNode.html',
162164
scope: {
163165
treeNode: "=dirTreeNode",
164166
options: "=",
@@ -443,4 +445,4 @@ tree_v = "1.1.5";
443445
}
444446
};
445447
});
446-
})(app);
448+
})();

‎src/uiTree.js

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
;(function(){
2+
angularUiTree = angular.module("angularUiTree",[]);
3+
4+
angularUiTree.directive("uiTree",function($compile){
5+
return {
6+
restrict: "A",
7+
scope: {
8+
treeSource: "=uiTree"
9+
},
10+
compile: function(element, attr) {
11+
var $nodeTemplate = element.find("[node]").first().remove();
12+
var nodeName = $nodeTemplate.attr("node");
13+
14+
function preLink ($scope, $element, $attr) {
15+
16+
}
17+
18+
function postLink ($scope, $element, $attr, ctrl, $transclude) {
19+
20+
var treeSourceName = $attr["uiTree"].replace(nodeName+".", "");
21+
console.log(treeSourceName);
22+
23+
function postCompile(){
24+
var $nodeChildrenTemplate = $nodeTemplate.find("[node-children]").first();
25+
var nodeChildrenName = $nodeChildrenTemplate.attr("node-children");
26+
$nodeChildrenTemplate.append($nodeTemplate.clone());
27+
$nodeChildrenTemplate.attr("ui-tree", nodeChildrenName);
28+
var $newNode = $($nodeTemplate[0].outerHTML);
29+
$newNode.attr("ng-repeat", nodeName + " in treeSource")
30+
$element.append($newNode);
31+
$compile($newNode)($scope);
32+
}
33+
34+
var unwatch = $scope.$watch("treeSource",function(){
35+
if($scope.treeSource) {
36+
postCompile();
37+
unwatch();
38+
$scope.__proto__ = $scope.$parent;
39+
}
40+
})
41+
}
42+
43+
return {
44+
pre: preLink,
45+
post: postLink
46+
}
47+
}
48+
};
49+
});
50+
})();

0 commit comments

Comments
 (0)