首页 > 代码库 > angular实现三级联动
angular实现三级联动
(function(angular) {
‘use strict‘;
var module = angular.module(‘timecube.shopManage.group.ctrls‘, [‘timecube.shopManage.group.services‘]);
module.controller(
‘bigBossGroupCtrl‘, [‘$scope‘, ‘groupService‘,‘$cookieStore‘,‘baseModal‘, ‘paginationUtil‘, ‘$filter‘, ‘baseInfoService‘, ‘notifyService‘, ‘securityService‘, ‘$modal‘,‘toaster‘,
function($scope, groupService,$cookieStore,baseModal, paginationUtil, $filter, baseInfoService, notifyService, securityService, $modal,toaster) {
var ctrl = this;
$scope.isAdmin = $cookieStore.get(‘isAdmin‘);
ctrl.groupInfoAddress = {};
$scope.selectedUser={};
$scope.selectedUserType={};
$scope.seletedGroup=[];
$scope.typeToGroup=[
{
type: 1,
typeName:‘管理员‘
},{
type: 2,
typeName:‘好友‘
}];
$scope.selectedUserType.type = $scope.typeToGroup[0].type;
//$scope.pageSize = paginationUtil.getDefaultPageSize();
var groupInfoDetail=function () {
groupService.groupDetail().then(function (data) {
//console.log(data);
$scope.cmpName=data.cmpName;
ctrl.groupInfoAddress = data;
ctrl.addressName = {};
ctrl.addressCodeList = {};
ctrl.addressName.cmpName = data.cmpName;
ctrl.addressName.phones = data.phones;
ctrl.addressName.cmpAddress = data.cmpAddress;
var country = data.country;
$scope.def_country = country;
var province = data.province;
$scope.def_province = province;
var city = data.city;
$scope.def_city = city;
var district = data.district;
$scope.def_district = district;
/*省市区级联*/
groupService.cityC().then(function (data) {
ctrl.addressCodeList.countryList = data;
angular.forEach(data, function (v) {
if (v.code == country) {
ctrl.addressName.countryName = v.name;
}
});
return groupService.cityC(country);
}).then(function (data) {
ctrl.addressCodeList.provinceList = data;
angular.forEach(data, function (v) {
if (v.code == province) {
ctrl.addressName.provinceName = v.name;
}
});
return groupService.cityC(province);
}).then(function (data) {
ctrl.addressCodeList.cityList = data;
angular.forEach(data, function (v) {
if (v.code == city) {
ctrl.addressName.cityName = v.name;
}
});
return groupService.cityC(city)
}).then(function (data) {
ctrl.addressCodeList.districtList = data;
angular.forEach(data, function (v) {
if (v.code == district) {
ctrl.addressName.districtName = v.name;
}
});
}).finally(function () {
//console.log(ctrl.addressName);
});
return groupService.cmpCreator();
}).then(function (data) {
ctrl.addressName.cmp_Creator = data.username;
}).catch(function (data) {
//
}).finally(function () {
//console.log(ctrl.addressName);
});
};
/**邀请好友加入群组分组树**/
groupService.getDepartments().then(function(data){
//console.log(data);
$scope.dataLists = data.dataLists;
//console.log(data.dataLists);
$scope.isZktimeUser = baseInfoService.getBaseInfo().isZktimeUser;
// $scope.states = states;
/*展开*/
$scope.toggleDept = function(scope) {
scope.toggle();
var toggleElement = scope.$element.find(‘.clickable:first‘);
if (scope.collapsed) {
toggleElement.addClass(‘glyphicon-play‘).removeClass(‘glyphicon-triangle-bottom‘);
} else {
toggleElement.addClass(‘glyphicon-triangle-bottom‘).removeClass(‘glyphicon-play‘);
}
};
});
$scope.treeSelected=function() {
var $li=$("#departmentsContainer>ol>li");
$.each($li,function(index,obj){
var radios= $(obj).find("input[type=‘radio‘]");
$.each(radios,function(index2,obj2){
$(obj2).attr(‘name‘,‘tree‘+index);
});
});
};
$scope.selectGroup=function(node) {
//$scope.seletedGroup = node;
$scope.seletedGroup=[];
var $li=$("#departmentsContainer>ol>li");
$.each($li,function(index,obj){
var radios= $(obj).find("input[type=‘radio‘]");
$.each(radios,function(i,obj2){
if(obj2.checked){
var genderChecked=obj2.value;
($scope.seletedGroup).push(genderChecked);
console.log(genderChecked);
}
});
});
var classifyIds=$scope.seletedGroup;
console.log(classifyIds);
var cmpId = baseInfoService.getBaseInfo().cmpId;
var queryParams={
‘companyId‘:cmpId,
‘classifyIdList‘:classifyIds
};
console.log(queryParams);
/*将要被邀请的好友列表*/
groupService.OneBossUserUrlList(queryParams).then(function(data) {
console.log(data);
$scope.userList =data;
if ($scope.userList.length >0 && !$scope.selectedUser.phone) {
$scope.selectedUser.phone = data[0].phone;
}
});
};
/*邀请按钮,提交邀请*/
$scope.enterG=function () {
var type=$scope.selectedUserType.type;
var inviterId= baseInfoService.getBaseInfo().empId;
var companyId = baseInfoService.getBaseInfo().cmpId;
var cmpName=$scope.cmpName;
var phoneOrEmail=$scope.selectedUser.phone;
var classifyIds=($scope.seletedGroup).join(‘,‘);
console.log(classifyIds);
var queryParams={
"inviterId": inviterId,
"companyId": companyId,
"cmpName": cmpName,
"phoneOrEmail": phoneOrEmail,
"classifyIds": classifyIds,
"type": type,
"remark": "加入群组"
};
groupService.friendEnterGroup(queryParams).then(function(data) {
//console.log(data);
if(data.code==="00000000"){
toaster.pop({
type: ‘success‘,
body: $translate.instant(‘JOIN_GROUP_SUCCESSFULLY‘),
timeout: 1500
});
(angular.element("#myModal")).modal(‘hide‘);
}else{
toaster.pop({
type: ‘error‘,
body: data.message || ‘‘,
timeout: 1500
});
}
});
};
/**调用封装数据**/
groupInfoDetail();
/**好友列表和店铺列表**/
$scope.employeeList = [];
$scope.shopDeviceList=[];
$scope.pageSize = paginationUtil.getDefaultPageSize();
$scope.pageSize = 10;
$scope.callServer = function(tableState) {
if (tableState) {
$scope.tableState = tableState;
} else {
return false;
}
$scope.isLoading = true;
groupService.getShopDevice($scope.tableState).then(function (data) {
console.log(data);
$scope.isLoading = false;
$scope.shopDeviceList=data.payload.results.dataLists;
tableState.pagination.numberOfPages = Math.ceil(data.payload.results.totalRecords / tableState.pagination.number)
}, function() {
$scope.isLoading = false;
})
};
$scope.callServer1 = function(tableState) {
if (tableState) {
$scope.tableState = tableState;
} else {
return false;
}
$scope.isLoading = true;
groupService.getFriendsList($scope.tableState).then(function(data) {
console.log(data);
$scope.isLoading = false;
$scope.employeeList = data.payload.results.dataLists;
tableState.pagination.numberOfPages = Math.ceil(data.payload.results.totalRecords / tableState.pagination.number)
}, function() {
$scope.isLoading = false;
});
};
/**刷新列表**/
var refresh = function() {
if ($scope.tableState) {
$scope.tableState.pagination.start = 0;
}
$scope.callServer($scope.tableState);
};
/**编辑群组信息弹出层**/
$scope.modifyEditGroup = function () {
$modal.open({
animation: true,
templateUrl: ‘tpl/bigboss/groups/editGroupManage.html‘,
backdrop: ‘static‘,
controller: ‘editGroup‘,
resolve: {
addressCodeList: function () {
return ctrl.addressCodeList;
},
groupInfoAddres: function () {
return ctrl.groupInfoAddress;
},
addressName: function () {
return ctrl.addressName;
}
}
}).result.then(function () {
notifyService.success(‘提交成功‘);
/*刷新页面数据*/
groupInfoDetail();
}, function () {
groupInfoDetail();
});
};
/*默认选中第一个数据*/
$scope.groupInfoAddres = {};
groupService.cityC().then(function (data) {
$scope.countrys = data;
//console.log($scope.def_province);
if ($scope.countrys.length === 1 && !$scope.groupInfoAddres.country) {
$scope.groupInfoAddres.country = data[0].code;
}
if ($scope.def_country) {
$scope.groupInfoAddres.country = $scope.def_country;
$scope.def_country = null;
}
});
}]
).controller(
‘editGroup‘, [‘$scope‘, ‘$modalInstance‘,‘addressCodeList‘,‘groupInfoAddres‘,‘addressName‘,‘baseInfoService‘,‘groupService‘,‘toaster‘,
function($scope, $modalInstance,addressCodeList,groupInfoAddres,addressName,baseInfoService,groupService,toaster) {
$scope.addressCodeList=addressCodeList;
$scope.groupInfoAddres =groupInfoAddres;
$scope.addressName =addressName;
$scope.cancel = function() {
$modalInstance.dismiss();/*退出*/
};
/**编辑后,提交数据**/
$scope.confirm = function(){
var infoGroup = {
"cmpName": addressName.cmpName,
"cmp_Creator": addressName.cmp_Creator,
"phones": addressName.phones,
"country": groupInfoAddres.country,
"province": groupInfoAddres.province,
"city":groupInfoAddres.city,
"district":groupInfoAddres.district,
"cmpAddress": addressName.cmpAddress
};
//console.log(infoGroup);
groupService.saveG(infoGroup).then(function (data) {
console.log(data);
if (data.code === ‘00000000‘) {
$modalInstance.close();
} else {
toaster.pop({
type: ‘error‘,
body: $translate.instant(data.message) || ‘‘,
timeout: 1500
});
}
});
};
/*监控级联变化*/
$scope.$watch(‘groupInfoAddres.country‘, function (newValue,oldValue) {
//$scope.groupInfoAddres.province = undefined;
if (newValue =http://www.mamicode.com/="" || typeof newValue =http://www.mamicode.com/="undefined" || newValue =http://www.mamicode.com/= null || isNaN(newValue)) {
$scope.addressCodeList.provinceList = [];
$scope.groupInfoAddres.province = undefined;
return;
}
//console.log($scope.groupInfoAddres.country);
if(newValue != oldValue){
groupService.cityC($scope.groupInfoAddres.country).then(function (data) {
$scope.addressCodeList.provinceList = data;
if ($scope.def_province != null && $scope.def_province != ‘‘) {
$scope.groupInfoAddres.province = $scope.def_province;
$scope.def_province = null;
}
});
}
});
$scope.$watch(‘groupInfoAddres.province‘, function (newValue,oldValue) {//, oldValue
if (newValue =http://www.mamicode.com/="" || typeof newValue =http://www.mamicode.com/="undefined" || newValue =http://www.mamicode.com/= null) {
$scope.addressCodeList.cityList = [];
$scope.groupInfoAddres.city = undefined;
return;
}
if(newValue != oldValue) {
groupService.cityC($scope.groupInfoAddres.province).then(function (data) {
$scope.addressCodeList.cityList = data;
$scope.groupInfoAddres.city = addressCodeList.cityList[0].code;
});
}
});
$scope.$watch(‘groupInfoAddres.city‘, function (newValue,oldValue) {
//$scope.groupInfoAddres.district = undefined;
if (newValue =http://www.mamicode.com/="" || typeof newValue =http://www.mamicode.com/="undefined" || newValue =http://www.mamicode.com/= null) {
$scope.addressCodeList.districtList = [];
$scope.groupInfoAddres.district = undefined;
return;
}
if(newValue != oldValue) {
groupService.cityC($scope.groupInfoAddres.city).then(function (data) {
//console.log(data);
$scope.addressCodeList.districtList = data;
if (data.length > 0) {
$scope.groupInfoAddres.district = addressCodeList.districtList[0].code;
}
});
}
});
}
]);
})(angular);/*HTML**/
<style>
.workspace-title-container {
border-bottom: none;
}
.details ul {
width: 900px;
overflow: hidden;
}
.details>ul li {
float: left;
width: 440px;
overflow: hidden;
}
ol, ul {
list-style: none outside none;
}
.navbar-inverse {
background: none;
border: none;
}
.navbar-inverse {
border-bottom: 1px solid #ccc;
}
.popup_content ul.nav.navbar-nav > li:last-child {
border: none;
}
.popup_content ul.nav.navbar-nav > li {
border: none;
}
#deviceManage_content_tab ul li.tab_td1,body div.actions-container div#content.content div.details ul#details_left.details_left li,body div.actions-container div#content.content div.ng-scope table{
line-height:42px;
font-size: 15px;
}
.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus,.navbar-inverse .navbar-nav > li > a:active{
color: white;
background: #EB6101;
}
.navbar-inverse .navbar-nav{
margin-top: 10px;
}
.navbar-inverse .navbar-nav > li > a{
color: black;
background:white;
border: 1px solid #ccc;
padding:10px 15px;
margin-right: 2px;
border-bottom: none;
border-radius: 4px 4px 0 0;
}
div #content div.popup_content div.ng-scope .tab-pane .content_tab>ul li{
float: left;
width:150px;
}
div #content div.popup_content div.ng-scope .tab-pane .content_tab>ul {
overflow: hidden;
border-bottom: 1px solid #ccc;
color: #333;
}
.workspace-title-container .actions-container {
float:none;
}
thead th{
text-align: left;
font-size: 16px;
width: 150px;
border-bottom: 1px solid #ccc;
color:#333;
}
tbody>tr{
font-size: 14px;
}
tbody>tr:hover{
background:#d7d8dc;
}
body div.actions-container div#content.content div.shopList_paging{
line-height:30px;
font-size: 16px;
}
/*!*编辑样式*!*/
.shop_popup_content {
min-width: 500px;
padding: 20px;
overflow: auto;
position: relative;
}
.shop_popup_content_left li {
margin-bottom: 6px;
}
.shop_popup_content_left li {
height: 36px;
line-height: 36px;
margin-bottom: 20px;
}
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td {
margin: 0;
padding: 0;
vertical-align: baseline;
}
.shop_popup_content_right input[type=‘text‘], .shop_popup_content_right input[type=‘tel‘] {
height: 36px;
width: 192px;
border: 1px solid #d5d5d5;
border-radius: 4px;
margin-bottom: 20px;
padding: 2px 4px;
}
.shop_popup_content_left li {
padding-right: 8px;
}
.shop_popup_content_right select {
height: 36px;
width: 110px;
border: 1px solid #d5d5d5;
border-radius: 4px;
margin-bottom: 20px;
padding: 4px;
}
.shop_popup_content_left li {
margin-bottom: 6px;
}
.shop_popup_content_left li {
height: 36px;
line-height: 36px;
margin-bottom: 20px;
}
li{
list-style: none;
}
body div.modal-dialog.modal-lg div.modal-content{
width: 700px;
}
.modal-header {
border-bottom: 1px solid #999;
}
.modal-footer {
padding: 15px;
text-align: center;
border-top: 1px solid #e5e5e5;
}
.modal-footer>button{
padding:8px 30px;
}
.modal-title a {
display: block;
width: 24px;
height: 24px;
float: right;
margin-right: 20px;
background: url(../../img/img_close.png) no-repeat;
}
.modal-title span{
font-size: 20px;
font-weight: bold;
color:#666;
}
body div.shop_popup_content ul.shop_popup_content_left.pull-left>li span{
color:red;
}
#menuTree div.col-lg-12.col-xs-12.workspace-main-container,#departmentsContainer ol li div span.tree-node-content-container{
padding-left:0;
padding-right: 0;
font-size: 14px;
}
.treeContainer > ol > li div {
height: 40px;
line-height: 40px;
}
.treeContainer .tree-node-content-container {
padding: 0 0 0 30px;
}
#deviceManage_content_tab ul.tab_tr li.tab_td1{
padding-left:15px;
}
.navbar-inverse .navbar-nav li.active a{
color:#EB6101;
}
.nav.navbar-nav .selected {
color:white;
background: #EB6101;
}
/*shopDevice样式*/
#pageC div{
display: inline-block;
}
.pagination>span{
padding: 5px 12px;
margin:0;
border: 1px solid #ccc;
}
.page_box .change_page>input,#pageC select#page_size.page_size{
width:30px;
height: 34px;
line-height: 14px;
border: 1px solid #ccc;
border-radius: 4px;
}
#pageC select#page_size.page_size{
width:60px;
}
.fa {
font-size: 24px;
}
</style>
<div class="row workspaceContainer" ng-controller="bigBossGroupCtrl as adc">
<div class="col-lg-10 col-md-9 col-sm-9 col-xs-12 workspace-main-container">
<div class="workspace-main card">
<div class="workspace-title-container">
<div class="title">我的品牌<i id="editGroup" class="icon-zk-edit clickable" tooltip="编辑品牌" ng-click="modifyEditGroup()" ng-show="isAdmin==true" style="color:#EB6101;font-size: 14px;margin-left: 6px;cursor:pointer"></i></div>
</div>
<div class="actions-container col-lg-12" style="background: white;margin-top: 2px;min-height: 490px">
<div id="content" class="content">
<div class="details">
<ul class="details_left" id="details_left">
<li>
<span>品牌名称:</span>
<span id="cmpName">{{adc.addressName.cmpName}}</span>
</li>
<li>
<span>负责人:</span>
<span id="groupOwner">{{adc.addressName.cmp_Creator}}</span>
</li>
<li>
<span>联系方式:</span>
<span id="groupOwnerContact">{{adc.addressName.phones}}</span>
</li>
<li>
<span>所在地:</span>
<span id="groupBelongs">{{adc.addressName.countryName}} {{adc.addressName.provinceName}} {{adc.addressName.cityName}} {{adc.addressName.districtName}}</span>
</li>
<li>
<span>详细地址:</span>
<span id="addressDetail">{{adc.addressName.cmpAddress}}</span>
</li>
</ul>
<div style="clear:both;"></div>
</div>
<div class="popup_content">
<nav class="navbar navbar-inverse" role="navigation">
<ul class="nav navbar-nav">
<li><a ui-sref="app.groupManagement.groupDevice" ng-class="{selected: routerName==‘app.groupManagement.groupDevice‘||routerName==‘app.groupManagement‘}">分组管理</a></li>
<li><a ui-sref="app.groupManagement.friendsList" ng-class="{selected: routerName==‘app.groupManagement.friendsList‘}">好友列表</a></li>
<li><a ui-sref="app.groupManagement.shopDevice" ng-class="{selected: routerName==‘app.groupManagement.shopDevice‘}">店铺管理</a></li>
</ul>
</nav>
<div ui-view=""></div>
</div>
</div>
</div>
</div>
</div>
<div ng-include="‘tpl/blocks/nav.html‘"></div>
</div>
angular实现三级联动
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。