angular-ui-tree的使用实例

最新推荐文章于 2024-05-10 09:50:17 发布

加鸡腿

最新推荐文章于 2024-05-10 09:50:17 发布

阅读量1.2k

点赞数

分类专栏： angular 文章标签： angular-ui-tree angularJs angular树形 angular tree angular树形实例

本文链接：https://blog.csdn.net/qq_43437571/article/details/93630581

版权

angular 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

项目用的angular比较老，是1.3.X版本的，所以可以用的配套的树形就比较少，虽然这棵树官方文档上看起来不是太好看，但是修改一下样式还是可以的。

① css样式

.angular-ui-tree {
    max-height:150px;
    overflow-y: scroll;
    margin-bottom: 15px;
}
.angular-ui-tree-handle {
    color:#515a6e;
    padding-bottom: 2px;
    padding-top: 2px;
}
.angular-ui-tree-handle:hover {
    background-color: #f4f6f7;;
}
.angular-ui-tree-nodes {
    padding-left: 20px;
}
ol:first-child {
    padding-left: 3px;
}
.group-title {
    background-color: #687074 !important;
    color:#fff !important;
}
span .glyphicon {
    cursor: pointer;
    margin-left: 3px;
}
.nodrap {
    background-color: #f2dede;
}
.tree-handle {
    padding: 10px;
    background: #428bca;
    color: #fff;
    margin-right: 10px;
}
ol {
    list-style: none;
}

② html页面展示

<body>
    <script type="text/ng-template" id="node_renderer">
        <div ui-tree-handle class="tree-node tree-node-content" ng-click="getChild(this,node)">           
            <span class="glyphicon"
                ng-class="{'glyphicon-chevron-right': collapsed, 'glyphicon-chevron-down': !collapsed }"
                ng-if="node.child && node.child.length > 0"
                data-nodrag
                ng-click="toggle(this);$event.stopPropagation();">              
            </span>         
            {{node.name}}           
        </div>
        <ol ui-tree-nodes="" ng-model="node.child" ng-class="{hidden: collapsed}">
            <li ng-repeat="node in node.child" ui-tree-node ng-include="'node_renderer'">
            </li>
        </ol>
    </script>
    <div ng-controller="MyTreeController">
        <div ui-tree id="tree-root" class="ng-scope angular-ui-tree" data-drag-enabled="false">
            <ol ui-tree-nodes ng-model="data" class="ng-pristine ng-untouched ng-valid ng-scope angular-ui-nodes">
                <li ng-repeat="node in data" ui-tree-node
                    ng-include="node_renderer" class="ng-scope angular-ui-tree-node" collapsed="false">
                </li>
            </ol>
        </div>
    </div>
    
</body>

③ js页面逻辑

        angular.module('appModule')
            .controller('MyTreeController',['$scope','$http',function($scope,$http){
            $scope.getChild = function(scope,node) {
                $http.get("路径?id="+node.org_id).success(function(data){
                    //这里假如能够直接取到就是data,如果数据结构不太一样就自己操作一下
                    if (data) {
                        node.child = data;                      
                    }
                })
                $scope.node = node;
                $scope.model.appCode = $scope.node.id;
                $scope.model.appName = $scope.node.name;
            };
            $scope.toggle = function(){
            };

            // app有两个组织，A和B，需要先判断属于A组织还是B组织，来确定展示A树还是B树，确定第一级树的name
            $scope.load = function() {
                // 去后台请求判断是A机构树还是B机构树
                var url = '路径';
                var mydata;
                var _this = this;
                $http.get(url).success(function(res){
                    var appType = (res.data)[0].type; //渠道这个类型来判断是A机构树还是B机构树
                    if (appType === 'A') {
                        mydata = [
                            {
                                org_id : 11,
                                org_name : "A机构的第一级树",
                                child : []
                            }
                        ];
                    } else if (appType === 'B') {
                        mydata = [
                            {
                                org_id : B000,
                                org_name : "B机构的第一级树",
                                child : []
                            }
                        ];
                    }
                })          
            };
            $scope.load();
        }])

④ 效果图：
无
因为本人的代码在只有内网的电脑上，所以无法截图拷贝等一系列操作

加鸡腿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
angular-ui-tree的使用实例

项目用的angular比较老，是1.3.X版本的，所以可以用的配套的树形就比较少，虽然这棵树官方文档上看起来不是太好看，但是修改一下样式还是可以的。.angular-ui-tree { max-height:150px; overflow-y: scroll; margin-bottom: 15px;}.angular-ui-tree-handle { col...
复制链接

扫一扫