要实现表格中如图所示的下拉框,点击“操作”时显示,点击其他地方时隐藏,并且每个下拉框的可选项根据版本号状态的不同而不同,
<table class="layui-table">
<thead>
<tr>
<th class="layui-icon"></th>
<th>子系统的版本号</th>
<th>版本号状态</th>
<th>GIT分支</th>
<th class="layui-icon"></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="systemVersion in systemVersions">
<td ng-bind="$index + 1"></td>
<td ng-bind="systemVersion.version"></td>
<td
ng-bind="systemVersion.versionState | enum: 'systemVersionState'"></td>
<td ng-bind="systemVersion.gitBranch"></td>
<td><a class="layui-btn layui-btn-primary layui-btn-mini"
ng-href="/systemList/{{systemCode}}/{{systemVersion.version}}"><i
class="layui-icon" title="详情"></i></a>
<div class="hide-button" sec:authorize="hasRole('teamLeader')">
<a class="layui-btn layui-btn-small" title="操作"
ng-click="showOpration(systemVersion,$event)">操作 <span
style="font-size: 16px; font-weight: 400;">></span>
</a>
<ul class="hide-button-ul" ng-if="systemVersion.selected">
<li class="layui-anim layui-anim-upbit"
ng-if="systemVersion.versionState == 'develop'"
ng-repeat="item in developList"
ng-click="selectOpration(item,systemVersion)">{{item.name}}</li>
<li class="layui-anim layui-anim-upbit"
ng-if="systemVersion.versionState == 'pre'"
ng-repeat="item in preList"
ng-click="selectOpration(item,systemVersion)">{{item.name}}</li>
<li class="layui-anim layui-anim-upbit"
ng-if="systemVersion.versionState == 'online'"
ng-repeat="item in onlineList"
ng-click="selectOpration(item,systemVersion)">{{item.name}}</li>
<li class="layui-anim layui-anim-upbit"
ng-if="systemVersion.versionState == 'offline'"
ng-repeat="item in offlineList"
ng-click="selectOpration(item,systemVersion)">{{item.name}}</li>
</ul>
</div></td>
</tr>
</tbody>
</table>js代码
//子系统版本列表
$scope.systemCode=document.getElementById("systemCode").value;
$scope.systemVersionList=function(){
$http.get('/systemVersion/' + $scope.systemCode).success(function (res) {
$scope.systemVersions = angular.copy(res.data);
});
};
$scope.systemVersionList();
//初始-隐藏所有列表
angular.forEach($scope.systemVersions,function(item){
item.selected = false;
})
// 点击显示
$scope.showOpration = function (currentItem, $event) {
$event.stopPropagation();
angular.forEach($scope.systemVersions, function (item) {
item.selected = false;
});
currentItem.selected = !currentItem.selected;
}
$(document).click(function(){
$scope.$apply(function(){
angular.forEach($scope.systemVersions, function (item) {
item.selected = false;
});
});
})
var develop = function(systemVersion){//预发布
$scope.systemVersion = systemVersion;
$scope.systemVersion.gitBranch = "release-";
layer.open({
type: 1,
area: ['600px', '200px'], //宽高
skin: 'layui-layer-molv', //加上边框
title: '添加',
content: $('#system-version-update-pop')
, btn: ['预发布', '取消']
, yes: function (index, layero) {
$http.put('/systemVersion/' + systemVersion.id + "/" + systemVersion.gitBranch + "/pre").success(result_handle);
$scope.systemVersion = {};
layer.close(index);
}
});
}
var pre = function(systemVersion){//发布
layer.confirm('确认项目已发布?', {
btn: ['确认', '取消'] //可以无限个按钮
}, function (index, layero) {
$http.put('/systemVersion/' + systemVersion.id + "/" + systemVersion.gitBranch + "/online").success(result_handle);
layer.close(index);
});
}
var online = function(systemVersion){//下线
layer.confirm('确认项目已下线?', {
btn: ['确认', '取消'] //可以无限个按钮
}, function (index, layero) {
$http.put('/systemVersion/' + systemVersion.id + "/" + systemVersion.gitBranch + "/offline").success(result_handle);
layer.close(index);
});
}
var offline = function(systemVersion){//删除
layer.confirm('此操作同时会删除此版本下面的所有项目,确认删除吗?', {
btn: ['删除', '取消'] //可以无限个按钮
}, function (index, layero) {
$http.delete('/systemVersion/' + systemVersion.id).success(result_handle);
layer.close(index);
});
}
var initJenkins = function(systemVersion){//初始化jenkins
layer.confirm('此操作将删除并重新创建对应的Jenkins空间,是否继续?', {
btn: ['确定', '取消'] //可以无限个按钮
}, function (index, layero) {
var index = layer.load(1, {
shade: [0.3,'#f5f5f5'] //0.3透明度的白色背景
});
$http.post('/initJenkins/'+systemVersion.id).success(function(response){
if(response.success){
layer.alert('操作成功');
layer.close(index);
}else{
layer.msg("操作失败,原因:" + response.message);
layer.close(index);
}
})
});
}
$scope.developList =[
{id:1,name:'预发布',state:develop},
{id:4,name:'删除',state:offline},
{id:5,name:'初始化Jenkins',state:initJenkins}
];
$scope.preList = [
{id:2,name:'发布',state:pre},
{id:5,name:'初始化Jenkins',state:initJenkins}
];
$scope.onlineList = [
{id:3,name:'下线',state:online},
{id:5,name:'初始化Jenkins',state:initJenkins}
];
$scope.offlineList = [
{id:4,name:'删除',state:offline},
{id:5,name:'初始化Jenkins',state:initJenkins}
];
//选择操作按钮
$scope.selectOpration = function(item,systemVersion){
if(systemVersion.selected){
systemVersion.selected = false;
}
item.state(systemVersion);
}
本文介绍如何使用AngularJS和LayUI实现一个可根据版本状态动态改变操作选项的下拉菜单,包括显示、隐藏及点击操作。
2213

被折叠的 条评论
为什么被折叠?



