Personal summary
It is more convenient to use angular-ui-tree to make tree diagrams, but this control does not support tree tables
One: angular-tree-dnd tree form
Let me talk about the data format first. When it comes to tree diagrams, the data format that appears in many people’s minds may be that the child nodes are nested in the parent node, and the child nodes are nested in the child nodes, nesting layer by layer. The structure of this data format is relatively clear to read. It would be better to rely on angular-ui-tree to make a tree diagram, for example:
{ "id": 1, "title": "node1", "nodes": [] } There is another data format that uses parent_id to determine the corresponding relationship between parent and child nodes, and the data format of my current project is this: [ { "DemographicId": 1, "ParentId": null, "Name": "United States of America", “Description”: “United States of America”, “Area”: 9826675, “Population”: 318212000, “TimeZone”: “UTC -5 to -10” }, { “DemographicId”: 2, “ParentId” : 1, “Name”: “California”, “Description”: “The Tech State”, “Area”: 423970,
“Population”: 38340000,
“TimeZone”: “Pacific Time”
}
]
Related website: https://www.npmjs.com/package/ng-tree-dnd
结合angularjs、bootstrap、使用angular-tree-dnd控件的步骤
1.css样式需要引入：bootstrap.css、ng-tree-dnd.css
2.js需要引入：jquery-1.12.4.js、bootstrap.min.js、angular.min.js、prism.jstoaster.min.js、ng-tree-dnd.debug.js
3.声明angular模块时需要注入ng-tree-dnd依赖，var app = angular.module('app',['ntt.TreeDnD']);
4.控制器controller中要注入ng-tree-dnd控件的服务方法‘‘$TreeDnDConvert’’
app.controller('controlleraId', ['$scope', '$TreeDnDConvert', function ($scope, $TreeDnDConvert){})
Paste the code below
html
<!DOCTYPE html>
<html lang="en" ng-app='app'>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>angular-tree-dnd表格树形结构</title>
<link rel="stylesheet" href="./bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="./ng-tree-dnd.css">
</head>
<body ng-controller='controlleraId'>
<div class="main-tlt"><div class="cn"><i class="glyphicon glyphicon-record"></i>菜单管理</div></div>
<div class="table-top-btn02">
<div class="col-btn">
<button type="button" class="btn btn-primary" ng-click="createMenu()">添加菜单</button>
</div>
</div>
<div class="table-mn">
<div class="table table-striped table-hover">
<tree-dnd tree-class="table table-bordered table-hover table-striped"
tree-data="tree_data"
tree-control="my_tree"
primary-key="id"
column-defs="col_defs"
expand-on="expanding_property">
</tree-dnd>
</div>
</div>
<script src="./jquery-1.12.4.js"></script>
<script src="./bootstrap/dist/js/bootstrap.min.js"></script>
<script src="./angular.min.js"></script>
<script src="./prism.js"></script>
<script src="./toaster.min.js"></script>
<script src="./ng-tree-dnd.debug.js"></script>
<script src="./index.js"></script>
</body>
</html>
controller
var app = angular.module('app',['ntt.TreeDnD']);
app.controller('controlleraId', [
'$scope', '$TreeDnDConvert', function ($scope, $TreeDnDConvert) {
$scope.a = [
{
child: [
{child: [],id: 38,isBackMenu: 1,linkUrl: "createRequestForm/local",menuName: "创建需求单",parentMenuId: 21,remark: "",sort: 0}
],
id: 21,
isBackMenu: 1,
linkUrl: "index",
menuName: "服务需求单",
parentMenuId: 0,
remark: "",
sort: 1
},
{
child: [
{child: [],id: 52,isBackMenu: 1,linkUrl: "assignRequirement",menuName: "需求单指派",parentMenuId: 46,remark: "",sort: 1}
],
id: 46,
isBackMenu: 1,
linkUrl: "index",
menuName: "调度管理",
parentMenuId: 0,
remark: "",
sort: 2
}
]
$scope.getMenu = function () {
$scope.tree_data = $TreeDnDConvert.line2tree($scope.a, 'id', 'parentMenuId');
angular.forEach($scope.tree_data, function (data) {
data['__expanded__'] = false;
angular.forEach(data.child, function (item) {
item['__expanded__'] = false;
angular.forEach(item.child, function (value) {
item['__expanded__'] = false;
value.newData = 3;
});
});
});
return $scope.tree_data;
};
$scope.getMenu();
var tree = {};
$scope.tree_data = $scope.getMenu();
$scope.my_tree = tree = {};
$scope.expanding_property = {
field: 'menuName',
titleClass: 'text-center',
cellClass: 'v-middle',
displayName: '名称'
};
$scope.col_defs = [
{
field: 'linkUrl',
titleClass: 'text-center',
cellClass: 'v-middle',
displayName: '地址'
},
{
field: 'remark',
titleClass: 'text-center',
cellClass: 'v-middle',
displayName: '备注'
},
{
displayName: '操作',
cellTemplate: '<i ng-if = "node.newData != 3" class="glyphicon glyphicon-th" aria-hidden="true" title="创建子集" ng-click="createMenu(node)"></i><i class="glyphicon glyphicon-pencil" aria-hidden="true" title="编辑" ng-click="editMenu(node)"></i><i class="glyphicon glyphicon-trash" aria-hidden="true" title="删除" ng-click="deleteMenu(node)"></i>'
}];
}]);
The effect is as follows
: Angular-Tree-------angular-tree-control.js
Introduction step
1.css: <link rel="stylesheet" href="./tree-control.css"><link rel="stylesheet" href="./tree-control-attribute.css">
2.js: <script src="./angular.min.js"><script src="./angular-tree-control.js"><script src="./lib/angular-tree/context-menu.js">
3. Module injection: var app = angular.module('App',['treeControl']);
4. The content in the controller is to define the data structure. There are cases on the Internet, you can refer to the official website: http://wix.github .io/angular-tree-control/