需要实现的功能:点击部门展开或者折叠,点击箭头选择人员,如图:
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;
}