angularjs的angular-tree-dnd、angular-tree-control树结构控件简单使用

个人总结

做树形图的话用angular-ui-tree比较方便，但这个控件并不支持树形表格

一：angular-tree-dnd树形表格

先说说数据格式的问题，说到树形图，很多人脑子里出现的数据格式可能就是子节点套在父节点里面，子子节点再套在子节点里面，一层一层嵌套下去，这样的数据格式阅读起来结构是比较清晰，做成树形图的话依赖angular-ui-tree会比较好,例如：
{
“id”: 1,
“title”: “node1”,
“nodes”: []
}
还有一种数据格式是通过parent_id来确定父子节点对应关系，而我现在的项目的数据格式就是这种：
[
{
“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”
}
]

相关网站：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){})

下面贴代码

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>'
            }];
    }]);

效果如下
在这里插入图片描述 二：Angular-Tree-------angular-tree-control.js

引入步骤
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.模块注入：var app = angular.module(‘App’,[‘treeControl’]);
4.控制器里的内容就是定义数据结构，网上有案例，可以参考官网：http://wix.github.io/angular-tree-control/

angularjs的angular-tree-dnd、angular-tree-control树结构控件简单使用

猜你喜欢