欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

代码实现前端页面的增删查操作

程序员文章站 2022-05-20 12:02:08
代码实现前端页面的增删查操作

代码实现前端页面的增删查操作

<!doctype html>
<html>


	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.ssp {
				color: red;
			}
		</style>
		<script src="../js/angular.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/jquery-1.11.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			angular.module("myapp", []).controller("myctrl", function($scope, $http) {
				//1.获取展示数据
				$http.get("https://result.eolinker.com/lkgjq8zec38423e5603b8e055d1193a8127c0c060bb1b55?uri=goodstest").then(function(success) {
					$scope.goods = success.data;
					//alert($scope.goods.length);
				})
				//2.获取二级联动的数据
				$http.get("addr.json").then(function(success) {
					$scope.provinces = success.data; //省份
					$scope.selectprovince = $scope.provinces[0];
					$scope.selectcity = $scope.selectprovince.citys[0];
				})
				//3.改变省份,,,切换市
				$scope.changepro = function() {
					$scope.selectcity = $scope.selectprovince.citys[0];
				}


				//4.声明默认的显示隐藏状态
				$scope.flag = false;
				//5.点击保存信息
				$scope.save = function() {
					//清空提示信息
					$(".ssp").html("");
					//获取输入的内容
					var gname = $scope.gname;
					var uname = $scope.uname;
					var tel = $scope.tel;
					var price = $scope.price;
					var pro = $scope.selectprovince.province;
					var cit = $scope.selectcity.city;
					if(gname == undefined || gname == "") {
						$("#gname_span").html("*商品名称不能为空");
						return;
					}
					if(uname == undefined || uname == "") {
						$("#uname_span").html("*用户名称不能为空");
						return;
					}
					if(tel == undefined || tel == "") {
						$("#tel_span").html("*手机号不能为空");
						return;
					}
					if(price == undefined || price == "") {
						$("#price_span").html("*价格不能为空");
						return;
					}
					//添加到数组
					$scope.goods.push({
						id: 3380,
						gname: gname,
						uname: uname,
						tel: tel,
						price: price,
						provice: pro,
						city: cit,
						regdate: new date(),
						state: "未发货"
					})
					//隐藏
					$scope.flag = false;
				}
				//批量删除
				$scope.delall = function() {
					for(var i = 0; i < $scope.goods.length; i++) {
						if($scope.ischecked) {
							if($scope.goods[i].state == "已发货") {
								$scope.goods.splice(i, 1);
								i--;
							}else{
								$scope.ischecked=false;
							}
						}
					}
				}
			})
		</script>
	</head>


	<body ng-app="myapp" ng-controller="myctrl">
		<button ng-click="flag=true">新增订单</button>
		<button ng-click="delall()">批量删除</button>
		<input type="text" ng-model="select_name" placeholder="按名称查询" />
		<input type="text" ng-model="select_tel" placeholder="按手机号查询" />
		<select ng-model="select_state">
			<option value="">---按状态查询---</option>
			<option value="已">---已发货---</option>
			<option value="未">---未发货---</option>
		</select>
		<table border="1px" cellspacing="0" cellpadding="0" width="800px">
			<tr>
				<td><input type="checkbox" ng-model="ischecked" /></td>
				<td>id<button ng-click="px='id';sj=!sj">排序</button></td>
				<td>商品名称</td>
				<td>用户名</td>
				<td>手机号</td>
				<td>价格<button ng-click="px='price';sj=!sj">排序</button></td>
				<td>城市</td>
				<td>下单时间<button ng-click="px='regdate';sj=!sj">排序</button></td>
				<td>状态</td>
			</tr>
			<tr ng-repeat="s in goods|filter:{gname:select_name,tel:select_tel,state:select_state}|orderby:px:sj">
				<td><input type="checkbox" ng-model="ischecked" /></td>
				<td>{{s.id}}</td>
				<td>{{s.gname}}</td>
				<td>{{s.uname}}</td>
				<td>{{s.tel}}</td>
				<td>{{s.price|currency:"¥"}}</td>
				<td>{{s.provice}}</td>
				<td>{{s.regdate|date:"mm-dd hh:mm:ss"}}</td>
				<td>
					<span ng-show="s.state=='已发货'" style="background-color: green;">{{s.state}}</span>
					<button ng-show="s.state=='未发货'" ng-click="s.state='已发货'" style="background-color: yellow;">{{s.state}}</button>
				</td>
			</tr>
		</table>
		<form ng-show="flag">
			商品名称:<input type="text" ng-model="gname" /><span id="gname_span" class="ssp"></span><br /> 用户名:
			<input type="text" ng-model="uname" /><span id="uname_span" class="ssp"></span><br /> 手机号:
			<input type="text" ng-model="tel" /><span id="tel_span" class="ssp"></span><br /> 价格:
			<input type="text" ng-model="price" /><span id="price_span" class="ssp"></span><br /> 城市:
			<select ng-model="selectprovince" ng-options="pitem.province for pitem in provinces" ng-change="changepro()"></select>
			<select ng-model="selectcity" ng-options="citem.city for citem in selectprovince.citys"></select>
			<br/><button ng-click="save()">保存</button>
		</form>
	</body>


</html>

上一篇： Hyper-V虚拟机中ReactOS系统无法联网详细图文解决办法

下一篇： vue对象的深层复制解析

推荐阅读