商品管理（批量删除、批量发货、修改、排序）

最新推荐文章于 2021-10-25 19:35:02 发布

原创最新推荐文章于 2021-10-25 19:35:02 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

商品管理专栏收录该内容

1 篇文章

订阅专栏

本文档详细介绍了如何在商品管理系统中执行批量删除商品、批量发货操作，以及如何灵活调整商品的展示排序。通过示例代码，帮助用户理解并实现实用的商品管理功能。

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

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>商品管理系统</title>
		
		<script src="js/ionic.bundle.js"></script>
		<style>
			table tr{
				border: 1px solid;
			}
			body{
				width: 800px;
				margin: 0 auto;
			}
			table tr:nth-child(2n){
				background-color: #CCCCCA;
			}
		</style>
		<script>
			angular.module("myapp",[])
			.controller("demoC",function($scope){
				
				$scope.title="state";
				$scope.desc=false;
				
				//数组
				$scope.goods=[];
				for(var i=1;i<5;i++){
					var g={
						"checked":false,   //复选是否被选中
						"id":i,
						"gname":"云南白药"+i,
						"address":"云南",
						"state":"发货",
						"regDate":new Date(),
						 "price":100+i
					};
					var g2={
						"checked":true,
						"id":10+i,
						"gname":"云南白药"+i,
						"address":"云南",
						"state":"已发货",
						"regDate":new Date("2016-"+i+"-1 3:01:02"),
						 "price":100+i
					};
					$scope.goods.push(g);
					
					$scope.goods.push(g2);
				}
				
				//全选操作
				$scope.ckAll=function(){
					var ck=$scope.isck;// 表头中的复选框
					for(var i=0;i<$scope.goods.length;i++){
						$scope.goods[i].checked=ck;
					}
				}
				
				$scope.delAll=function(){
					var b=false; //默认么有选中的
					for(var i=0;i<$scope.goods.length;i++){
						if($scope.goods[i].checked==true){
							b=true;
							break;
						}
					}
					console.log("是否有选择",b);
					//执行删除操作
					if(b==true){
						for(var i=0;i<$scope.goods.length;i++){
						if($scope.goods[i].checked==true){
							$scope.goods.splice(i,1);
							i--;  //删除后,下次依然从当前索引开始
						}
					}	
					}else{
						alert("请选择后操作");
					}
					
				}
				
				//批量发货
				$scope.fhAll=function(){
					var b=false; //默认么有选中的
					for(var i=0;i<$scope.goods.length;i++){
						if($scope.goods[i].checked==true){
							b=true;
							break;
						}
					}
					console.log("是否有选择",b);
					//执行删除操作
					if(b==true){
						for(var i=0;i<$scope.goods.length;i++){
						if($scope.goods[i].checked==true){
							$scope.goods[i].state="已发货";
						}
					}	
					}else{
						alert("请选择后操作");
					}

					
				}
				
				//单个删除
				$scope.del=function(g){  //当前删除行的对象
					for(var i=0;i<$scope.goods.length;i++){
						if($scope.goods[i].id==g.id){   //查找当前删除的对象在数组中的索引
							$scope.goods.splice(i,1);  //
						}
					}
				}
				
				
				
			})
			
		</script>
	</head>
	<body ng-app="myapp" ng-controller="demoC">
		<button ng-click="delAll()">批量删除</button>
		<button ng-click="fhAll()">批量发货</button>
		<table border="1px">
			<tr style="background-color: #787876;">
				<td><input type="checkbox" ng-model="isck" ng-change="ckAll()" /></td>
				<td ng-click="title='gname';desc=!desc">商品名称</td>
				<td ng-click="title='address';desc=!desc">商品产地</td>
				<td ng-click="title='price';desc=!desc">商品价格</td>
				<td ng-click="title='regDate';desc=!desc">生产日期</td>
				<td>状态</td>
				<td>操作</td>
			</tr>
			
			<tr style="border: 1px;" ng-repeat="good in goods|orderBy:title:desc"><!--|orderBy 内置排序过滤  title  desc  是两个变量 -->
				<td><input type="checkbox" ng-model="good.checked" /> </td>
				<td>
				<span ng-hide="good.edit">{{good.gname}} </span>	
				<span ng-show="good.edit==true"> <input ng-model="good.gname" />  </span>	
				
				
				</td>
				<td>{{good.address}}</td>
				<td>{{good.price}}</td>
			   <td>{{good.regDate|date:"yyyy年MM月dd日 hh时mm分ss秒"}}</td>
			   <td>
			   <span ng-show="good.state=='已发货'">	
			   	{{good.state}}
			   </span>
			   <span ng-show="good.state=='发货'">	
			   	<a href="#" ng-click="good.state='已发货'">
			   	{{good.state}}
			   	</a>
			   </span>
			   </td>
			   <td>
			  
			   	<button ng-click="del(good)">删除</button> | 
			   	     <!-- good.gai:true 显示保存 ;   -->
			   	    
			   		<button ng-hide="good.edit" ng-click="good.edit=true">修改</button>
			   		<button ng-show="good.edit==true" ng-click="good.edit=false">保存</button>
			   </td>
			   
			</tr>
			
		</table>
		
	</body>
</html>