商品管理系统案例

最新推荐文章于 2022-11-16 00:07:16 发布

lb_of_blogs

最新推荐文章于 2022-11-16 00:07:16 发布

阅读量556

点赞数

分类专栏：移动安卓开发文章标签： android 布局管理

本文链接：https://blog.csdn.net/lb_of_blogs/article/details/78613612

版权

安卓开发同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

移动

25 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/angular.min.js"></script>
		<script src="js/jquery-1.11.1.min.js"></script>
		<script>
			$(function(){
				$("tbody tr").mouseover(function(){
					$(this).addClass("addcolor");
				})
				$("tbody tr").mouseout(function(){
					$(this).removeClass("addcolor");
				})
			})
			
			angular.module("myApp",[])
			//创建控制器
			.controller("cont",function($scope,$filter){
				$scope.title='';
				$scope.ordertitle;
				$scope.des=false;
				$scope.shb=false;
				$scope.arr = ["请选择","按年龄倒序排序","按年龄正序排序"];
				$scope.opvalue;
				
				$scope.datas=[{name:"张三",age:45,pinyin:"zhang san",zhiwei:"总经理"},
				{name:"李四",age:43,pinyin:"li si",zhiwei:"设计师"},
				{name:"王五",age:40,pinyin:"wang wu",zhiwei:"工程师"},
				{name:"赵六",age:33,pinyin:"zhao liu",zhiwei:"工程师"},
				{name:"赵六",age:33,pinyin:"zhao liu",zhiwei:"工程师"},
				{name:"周七",age:32,pinyin:"zhou qi",zhiwei:"人事经理"}]
				
				//删除
				$scope.del=function(data){
					for(var i=0;i<$scope.datas.length;i++){
						if($scope.datas[i].name==data.name){
							if(confirm("是否确认删除")){
								$scope.datas.splice(i,1);
							}
						}
					}
				}
				
				//点击查询
				$scope.selname=function(){
					var name = $scope.quename;
					if(name==undefined||name==null||name==""){
						alert("查询姓名不能为空");
					}else if(name.indexOf("*")!=-1){
						alert("您输入的内容带有敏感词汇,请重新输入");
					}else{
						$scope.title=name;
					}
					
				}
				//添加数据
				$scope.adddata=function(){
					var $age = $scope.sage;
					if(isNaN($age)){
						alert("年龄格式错误");
					}else{
						$scope.datas.push({
							name:$scope.sname,
							age:$scope.sage,
							pinyin:$scope.spinyin,
							zhiwei:$scope.szhiwei,
						})
						$scope.shb=false;
					}
				}
				
				//排序的方法
				$scope.selstste=function(){
					

//					ordertitle


					var order =  $scope.opvalue;
					if(order=="按年龄倒序排序"){
						alert("a");
						$scope.ordertitle='age';
						$scope.des=false;
					}else if(order=="按年龄正序排序"){
						alert("b");
						$scope.ordertitle='age';
						$scope.des=true;
					}
				}
			})
		</script>
	</head>
	<style>
		.addcolor{
			background-color: #41C7DB;
		}
		div{
			width: 600px;
			margin: 0 auto;
		}
		
		#dv1{
			width: 600px;
			margin: 0 auto;
		}
		
		#dv2{
			width:300px;
			margin: 0 auto;
			margin-top: 30px;
			
		}
		
		tbody tr{
			background-color: #EEEEEE;
		}
		
		tbody tr:nth-child(2n){
			background-color:#FFFFFF;
		}
		
		fieldset{
			width: 500px;
			text-align: center;
			margin: 0 auto;
		}
		
		.selad{
			width: 95px;
			height: 45px;
		}
		
		#tab{
			width: 600px;
			margin: 0 auto;
			background: black;
		}
		
		#ex{
			margin-left: 200px;
		}
		
		#selname{
			margin-left: 80px;
		}
	</style>
	<body ng-app="myApp" ng-controller="cont">
		<div>
			<input id="selname" type="text"  ng-model="quename" placeholder="按姓名查找" />
			<select id="ex" ng-model="opvalue" ng-change="selstste()" ng-init="opvalue=arr[0]" ng-options="item for item in arr">
				<!-- 另一种方式 -->
				<!--<option selected="selected">按年龄倒序排序</option>
				<option>按年龄正序排序</option>-->
				{{item}}
			</select>
		</div>
		<div id="dv1">用户列表
			<table id="tab">
				<tr style="background-color: #999999;">
					<td>姓名</td>
					<td>年龄</td>
					<td>拼音</td>
					<td>职位</td>
					<td>操作</td>
				</tr>
				<tbody>
					<!--'title':des-->
					<tr ng-repeat="data in datas|orderBy:ordertitle:des|filter:title">
						<td>{{data.name}}</td>
						<td>{{data.age}}</td>
						<td>{{data.pinyin}}</td>
						<td>{{data.zhiwei}}</td>
						<td><a href="#" ng-click="del(data)">删除</a></td>
					</tr>
				</tbody>
			</table>
			
			<div id="dv2">
				<input class="selad" type="button" ng-click="selname()" value="查询" />
				    
				<input class="selad" type="button" ng-click="shb=true" value="添加" />
			</div>
		</div>
		<form ng-show="shb">
			<fieldset>
				<legend>
					添加用户信息
				</legend>
				<label>姓名</label>
				<input type="text"  ng-model="sname"/><p></p>
				<label>年龄</label >
				<input type="text"  ng-model="sage"/><p></p>
				<label>拼音</label>
				<input type="text"  ng-model="spinyin"/><p></p>
				<label>职位</label>
				<input type="text"  ng-model="szhiwei"/><p></p>
				<input type="button" ng-click="adddata()" value="保存" />
			</fieldset>
			
		</form>
	</body>
</html>

lb_of_blogs

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
商品管理系统案例

$(function(){ $("tbody tr").mouseover(function(){ $(this).addClass("addcolor"); }) $("tbody tr").mouseout(function(){ $(this).removeClass("addcolor"); }) }) angular
复制链接

扫一扫