AngularJs 实现下拉树
来源：互联网 发布：甘肃快3遗漏数据分析 编辑：程序博客网 时间：2024/05/19 16:38
需要实现的功能：点击部门展开或者折叠，点击箭头选择人员，如图：
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;}阅读全文
0 0
- AngularJs 实现下拉树
- angularjs——div+angularjs实现下拉树
- angularjs实现下拉加载更多
- angularjs实现下拉列表的选中事件
- 简单的下拉多选angularjs 实现
- angularJS实现可编辑的下拉框
- AngularJS进阶(四)ANGULAR.JS实现下拉菜单单选
- AngularJS进阶(五)Angular实现下拉菜单多选
- AngularJS中ng-options实现下拉列表的数据绑定
- AngularJS中的滚动加载，通过ngInfiniteScroll实现下拉滚动加载
- AngularJS封装指令实现下拉刷新自动翻页加载数据
- AngularJS进阶(五)Angular实现下拉菜单多选
- angularJs-$http实现百度搜索时的动态下拉框
- AngularJS中的滚动加载，通过ngInfiniteScroll实现下拉滚动加载
- AngularJS + Ionic 下拉刷新
- angularjs 下拉搜索框
- AngularJs下拉搜索框
- angularjs下拉列表 select
- Python
- 算法题：lintcode#175 翻转二叉树（java）
- 「机器学习」：不得不知的概念（2）
- Scala语言一些的一些注意事项汇总（1）
- excel排序
- AngularJs 实现下拉树
- Qt实用技巧：软件演示版永久提示框
- 边防护边敲诈！“牛逼”网络安全专家变身黑客 ！
- FCC认证最新资讯：SDoC 认证正式生效
- 一句话证明你在床上的实力
- Android各种动画使用
- Android 经典笔记：CountDownTimer解读
- Android热修复技术总结
- 再 见！余 额 宝！
