AngularJs 实现下拉树

﹏ヽ暗。殇╰゛Y 2022-06-06 11:43 274阅读 0赞

需要实现的功能：点击部门展开或者折叠，点击箭头选择人员，如图：

![人员查询][SouthEast]

**html**

<ons-page ng-controller="deptPersonTreeController" ng-init="checkPointdata">
        <ons-toolbar class="hlxnyyw-head hlyw_dpt_border" ng-class="{'isIOS':isIOS}">
            <div class="left layout-row layout-align-center-center" ng-click="mainNavi.popPage()">
                <hy-img-btn hya-icon-img="img/energy/back.png" class="charge-toolbar-img-btn "></hy-img-btn>
            </div>
            <div class="center hlxnyyw-text">人员选择</div>
        </ons-toolbar>
        <ons-scroller style="background-color: #ffffff" ng-class="{'isIOStop':isIOS}">
    
            <div data-ng-init="load()" ng-repeat="x in checkPointdata.childDeptAndPerson track by $index">
                <div class="hlxnyyw-jcd-first">
                    <div ng-class="{'hlyw-dpt-person-img hlxnyyw-m-left':x.nodeType == '3','hlxnyyw-triangle-r hlxnyyw-m-left':(x.nodeType == '1')&&(x.nodeCode!=xdeptCodeT),'hlxnyyw-triangle-s hlxnyyw-m-left':(x.nodeCode==xdeptCodeT)&&(x.nodeType == '1')}"
                         ng-click="checkPointX(x.nodeCode,x.nodeType)"></div>
                    <div class="hlyw-dpt-text hlxnyyw-color-text" ng-click="checkPointX(x.nodeCode,x.nodeType)">{
       {x.nodeName}}</div>
                    <div ng-show="x.nodeType == '3'" class="hlxnyyw-jcd-true" ng-click="checkPointTrue(x.nodeCode,x.nodeName)"></div>
                </div>
                <hr class="hlxnyyw-jcd-hr"/>
    
                <div class="hlxnyyw-xbfx-block" ng-if="y.fanodeCode == x.nodeCode" ng-show="!$scope.showX&&x.nodeCode==xdeptCodeT"
                     ng-repeat="y in checkPointdataX.childDeptAndPerson track by $index">
                    <div class="hlxnyyw-jcd-first">
                        <div ng-class="{'hlyw-dpt-person-img hlxnyyw-m-left hlyw-dpt-margin-img':y.nodeType == '3','hlxnyyw-triangle-s hlxnyyw-m-left hlyw-dpt-margin':(y.nodeCode==ydeptCodeT)&&(y.nodeType == '1'),'hlxnyyw-triangle-r hlxnyyw-m-left hlyw-dpt-margin':(y.nodeCode!=ydeptCodeT)&&(y.nodeType == '1')}"
                             ng-click="checkPointY(y.nodeCode,y.nodeType)"></div>
                        <div class="hlyw-dpt-text hlxnyyw-color-text" ng-click="checkPointY(y.nodeCode,y.nodeType)">{
       {y.nodeName}}
                        </div>
                        <div ng-show="y.nodeType == '3'" class="hlxnyyw-jcd-true" ng-click="checkPointTrue(y.nodeCode,y.nodeName)"></div>
                    </div>
                    <hr class="hlxnyyw-jcd-hr"/>
    
                    <div class="hlxnyyw-xbfx-block" ng-if="z.fanodeCode == y.nodeCode" ng-show="!$scope.showY&&y.nodeCode==ydeptCodeT"
                         ng-repeat="z in checkPointdataY.childDeptAndPerson track by $index">
                        <div class="hlxnyyw-jcd-first">
                            <div ng-class="{'hlyw-dpt-person-img hlxnyyw-m-left hlyw-dpt-margin-imgz':z.nodeType == '3','hlxnyyw-triangle-s hlxnyyw-m-left hlyw-dpt-marginz':(z.nodeCode==zdeptCodeT)&&(z.nodeType == '1'),'hlxnyyw-triangle-r hlxnyyw-m-left hlyw-dpt-marginz':(z.nodeCode!=zdeptCodeT)&&(z.nodeType == '1')}"
                                 ng-click="checkPointZ(z.nodeCode,z.nodeType)"></div>
                            <div class="hlyw-dpt-text hlxnyyw-color-text" ng-click="checkPointZ(z.nodeCode,z.nodeType)">{
       {z.nodeName}}
                            </div>
                            <div ng-show="z.nodeType == '3'" class="hlxnyyw-jcd-true" ng-click="checkPointTrue(z.nodeCode,z.nodeName)"></div>
                        </div>
                        <hr class="hlxnyyw-jcd-hr"/>
    
                        <div class="hlxnyyw-xbfx-block" ng-if="m.fanodeCode == z.nodeCode" ng-show="!$scope.showZ&&z.nodeCode==zdeptCodeT"
                             ng-repeat="m in checkPointdataZ.childDeptAndPerson track by $index">
                            <div class="hlxnyyw-jcd-first">
                                <div ng-class="{'hlyw-dpt-person-img hlxnyyw-m-left hlyw-dpt-margin-imgm':m.nodeType == '3','hlxnyyw-triangle-s hlxnyyw-m-left hlyw-dpt-marginm':(m.nodeCode==mdeptCodeT)&&m.nodeType == '1','hlxnyyw-triangle-r hlxnyyw-m-left hlyw-dpt-marginm':(m.nodeCode!=mdeptCodeT)&&(m.nodeType == '1')}"
                                     ng-click="checkPointM(m.nodeCode,m.nodeType)"></div>
                                <div class="hlyw-dpt-text hlxnyyw-color-text" ng-click="checkPointM(m.nodeCode,m.nodeType)">{
       {m.nodeName}}
                                </div>
                                <div ng-show="m.nodeType == '3'" class="hlxnyyw-jcd-true" ng-click="checkPointTrue(m.nodeCode,m.nodeName)"></div>
                            </div>
                            <hr class="hlxnyyw-jcd-hr"/>
                        </div>
    
                    </div>
    
                </div>
    
    
            </div>
    
        </ons-scroller>
    </ons-page>

其中nodeType表示类型，等于1代表部门，等于3代表人员。  
childDeptAndPerson 表示当前对象包含的子元素集合,  
nodeCode表示当前节点的code,nodeName表示名称。  
fanodeCode 表示当前节点的父节点的code.  
当前页面只能展示三级关系，未能实现下拉级别不受限制。

**JS**

app.controller('deptPersonTreeController', ['$scope', '$timeout', '$hyHttp', '$rootScope', '$loginService', function ($scope, $timeout, $hyHttp, $rootScope, $loginService) { 
        $scope.showX = false;
        $scope.showY = false;
        $scope.showZ = false;
        $scope.showM = false;
        $scope.xdeptcode = '0';
        $scope.ydeptcode = '0';
        $scope.show = '0';
    
        $scope.xdeptCodeT = '';
    
            $scope.showModal('数据加载中...');//显示遮罩层
        var config = {
            cache: false,
            responseType: 'json'
        };
        var deptCode = JSON.parse(localStorage.getItem('user')).deptCode;
        var data = {
            deptCode: deptCode
        };
    
        $hyHttp.post('getDeptPersonTree', config, data).success(function (result) { 
            if (result.code == '0') {
                $scope.hideModal();
                console.log('111', result.content);
                $scope.checkPointdata = result.content;
            } else if (result.code = '1') {
                $scope.hideModal();
                $scope.checkPointdata = "";
                $scope.toast('暂无数据');
            }
        }).error(function (data) { 
            $scope.hideModal();
            $scope.checkPointdata = "";
            $scope.toast('数据加载失败！');
        });
    
    
        $scope.checkPointX = function (contentX,nodeType) { 
            if(nodeType == '3'){
                return;
            }
    
    
            $scope.showModal('数据加载中...');//显示遮罩层
            var config = {
                cache: false,
                responseType: 'json'
            };
            var data = {
                deptCode: contentX
            };
    
            $hyHttp.post('getDeptPersonTree', config, data).success(function (result) { 
                if (result.code == '0') {
                    $scope.hideModal();
                    $scope.checkPointdataX = result.content;
                } else if (result.code = '1') {
                    $scope.hideModal();
                    $scope.checkPointdataX = "";
                    $scope.toast('暂无数据');
                }
            }).error(function (data) { 
                $scope.hideModal();
                $scope.checkPointdataX = "";
                $scope.toast('数据加载失败！');
            });
    
    
            $scope.xdeptCode = contentX;
            if(contentX==$scope.xdeptCodeT){
                if($scope.showX){
                    $scope.showX = false;
                }else{
                    $scope.showX = true;
                }
                $scope.xdeptCodeT = '';
            }else{
                if($scope.showX){
                    $scope.showX = false;
                }else{
                    $scope.showX = true;
                }
                $scope.xdeptCodeT = contentX;
            }
    
        };
        $scope.checkPointY= function (contentX,nodeType) { 
            if(nodeType == '3'){
                return;
            }
    
            $scope.showModal('数据加载中...');//显示遮罩层
            var config = {
                cache: false,
                responseType: 'json'
            };
            var data = {
                deptCode: contentX
            };
    
            $hyHttp.post('getDeptPersonTree', config, data).success(function (result) { 
                if (result.code == '0') {
                    $scope.hideModal();
                    console.log('111', result.content);
                    $scope.checkPointdataY = result.content;
                } else if (result.code = '1') {
                    $scope.hideModal();
                    $scope.checkPointdataY = "";
                    $scope.toast('暂无数据');
                }
            }).error(function (data) { 
                $scope.hideModal();
                $scope.checkPointdataY = "";
                $scope.toast('数据加载失败！');
            });
    
            $scope.ydeptCode = contentX;
            if(contentX==$scope.ydeptCodeT){
                if($scope.showY){
                    $scope.showY = false;
                }else{
                    $scope.showY = true;
                }
                $scope.ydeptCodeT = '';
            }else{
                if($scope.showY){
                    $scope.showY = false;
                }else{
                    $scope.showY = true;
                }
                $scope.ydeptCodeT = contentX;
            }
    
        };
    
    
        $scope.checkPointZ= function (contentX,nodeType) { 
            if(nodeType == '3'){
                return;
            }
    
            $scope.showModal('数据加载中...');//显示遮罩层
            var config = {
                cache: false,
                responseType: 'json'
            };
            var data = {
                deptCode: contentX
            };
    
            $hyHttp.post('getDeptPersonTree', config, data).success(function (result) { 
                if (result.code == '0') {
                    $scope.hideModal();
                    console.log('111', result.content);
                    $scope.checkPointdataZ = result.content;
                } else if (result.code = '1') {
                    $scope.hideModal();
                    $scope.checkPointdataZ = "";
                    $scope.toast('暂无数据');
                }
            }).error(function (data) { 
                $scope.hideModal();
                $scope.checkPointdataZ = "";
                $scope.toast('数据加载失败！');
            });
    
            $scope.zdeptCode = contentX;
            if(contentX==$scope.zdeptCodeT){
                if($scope.showZ){
                    $scope.showZ = false;
                }else{
                    $scope.showZ = true;
                }
                $scope.zdeptCodeT = '';
            }else{
                if($scope.showZ){
                    $scope.showZ = false;
                }else{
                    $scope.showZ = true;
                }
                $scope.zdeptCodeT = contentX;
            }
    
        };
    
    
        $scope.checkPointM= function (contentX,nodeType) { 
            if(nodeType == '3'){
                return;
            }
    
            $scope.showModal('数据加载中...');//显示遮罩层
            var config = {
                cache: false,
                responseType: 'json'
            };
            var data = {
                deptCode: contentX
            };
    
            $hyHttp.post('getDeptPersonTree', config, data).success(function (result) { 
                if (result.code == '0') {
                    $scope.hideModal();
                    console.log('111', result.content);
                    $scope.checkPointdataM = result.content;
                } else if (result.code = '1') {
                    $scope.hideModal();
                    $scope.checkPointdataM = "";
                    $scope.toast('暂无数据');
                }
            }).error(function (data) { 
                $scope.hideModal();
                $scope.checkPointdataM = "";
                $scope.toast('数据加载失败！');
            });
    
            $scope.mdeptCode = contentX;
            if(contentX==$scope.mdeptCodeT){
                if($scope.showM){
                    $scope.showM = false;
                }else{
                    $scope.showM = true;
                }
                $scope.mdeptCodeT = '';
            }else{
                if($scope.showM){
                    $scope.showM = false;
                }else{
                    $scope.showM = true;
                }
                $scope.mdeptCodeT = contentX;
            }
    
        };
    
    
        $scope.checkPointTrue = function (content, name) { 
    
            var checkPointData = {
       "deptCode": content, "deptName": name};
            $scope.$emit("DPcheckPointEmit", checkPointData);
            mainNavi.popPage();
        };
    
    
    }]);

showX 用来标志当前节点是否展开，  
xdeptCodeT用来保存上次点击的节点code,  
contentX表示当前点击的节点code

**CSS**

.hlyw-dpt-person-img{ width: 40px; height: 40px; float: left; background: url('../../../img/allCustomer/photo.png') center/cover no-repeat; margin-right: 10px; }
    .hlxnyyw-m-left{ margin-left: 20px; }
    .hlyw_dpt_border{ border-bottom: 1px solid #e7e7e7; }
    .hlyw-dpt-margin-img{ margin-left: 60px; }
    .hlyw-dpt-margin{ margin-left: 50px; }
    .hlyw-dpt-margin-imgz{ margin-left: 90px; }
    .hlyw-dpt-marginz{ margin-left: 80px; }
    .hlyw-dpt-margin-imgm{ margin-left: 120px; }
    .hlyw-dpt-marginm{ margin-left: 110px; }
    .hlyw-dpt-person-img{ width: 40px; height: 40px; float: left; background: url('../../../img/allCustomer/photo.png') center/cover no-repeat; margin-right: 10px; }
    .hlyw-dpt-text{ overflow: hidden; height: 40px; font-size: 15px; line-height: 40px; float: left; }
    .hlxnyyw-jcd-first{ width: 100%; height: 40px; }
    .hlyw-dpt-text{ overflow: hidden; height: 40px; font-size: 15px; line-height: 40px; float: left; }
    .hlxnyyw-color-text{ color: #75758a; }
    .hlxnyyw-triangle-s{ width: 50px; height: 40px; float: left; background: url('../../img/energy/triangle-s.png') center no-repeat; background-size:12px 10px; }
    .hlxnyyw-triangle-r{ width: 50px; height: 40px; float: left; background: url('../../img/energy/triangle-r.png') center no-repeat; background-size:10px 12px; }
    .hlxnyyw-jcd-hr{ height:1px; border:none; border-top:1px solid #e7e7e7; }

[SouthEast]: /images/20220606/45d94eb2d461414aa3084c8a92836449.png