表格中的下拉框

本文介绍如何使用AngularJS和LayUI实现一个可根据版本状态动态改变操作选项的下拉菜单,包括显示、隐藏及点击操作。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

要实现表格中如图所示的下拉框,点击“操作”时显示,点击其他地方时隐藏,并且每个下拉框的可选项根据版本号状态的不同而不同,




<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);
        }







评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值