表格+两种查询+二级联动增加

最新推荐文章于 2021-02-13 20:34:46 发布

yin_chenglong

最新推荐文章于 2021-02-13 20:34:46 发布

阅读量402

点赞数

本文链接：https://blog.csdn.net/yin_chenglong/article/details/80138400

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="js/jquery-1.11.0.min.js" ></script>
<script>
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
$scope.datas=[
{"id":2001,"shopping":"iPhone","name":"张三","tel":13525565588,"price":8699.00,"city":"北京"},
{"id":2002,"shopping":"iPhoneX","name":"李四","tel":18526567888,"price":9699.00,"city":"上海"},
{"id":2003,"shopping":"iPhone6","name":"张三","tel":13525565588,"price":10699.00,"city":"深圳"},
{"id":2004,"shopping":"iPhone7","name":"张三","tel":13325565088,"price":20699.00,"city":"广州"},
{"id":2005,"shopping":"iPhone8","name":"张三","tel":18525965588,"price":30699.00,"city":"大连"}];

//删除按钮
$scope.deleteId = function(_id){
for(var i=0;i<$scope.datas.length;i++){
var g=$scope.datas[i];
if(g.id == _id){
$scope.datas.splice(i,1);
break;
}
}
};
//获取电脑时间
$scope.date=new Date().toLocaleTimeString();

//新增订单
$scope.divShow=false;
$scope.haha;
$scope.shoppingT;
$scope.nameT;
$scope.telT;
$scope.priceT;
$scope.addAll=function(){
$scope.divShow=true;

};
$scope.baocun=function(){
if($scope.shoppingT==undefined || $scope.nameT==undefined || $scope.telT==undefined || $scope.priceT==undefined){
alert("有不合法选型");
}else{
var a={};
var n=Math.round(Math.random()*1000);
a.id=n;
a.shopping=$scope.shoppingT;
a.name=$scope.nameT;
a.tel=$scope.telT;

a.price=$scope.priceT;
a.city=$scope.select1.amode+"-"+$scope.select2.name;
$scope.datas.push(a);
$scope.divShow=false;

$scope.shoppingT=null;
$scope.nameT=null;
$scope.telT=null;
$scope.priceT=null;
}

};
//判断填新增订单的输入框能为空
$scope.b;
$scope.Sshopping=function(){
if($scope.shoppingT==undefined){
$scope.b="商品名称不能为空！";
}else{
$scope.b=null;
}
};
$scope.c;
$scope.Sname=function(){
if($scope.nameT==undefined){
$scope.c="用户名不能为空！";
}else{
$scope.c=null;
}
};
$scope.d;
$scope.Stel=function(){
if($scope.telT==undefined){
$scope.d="手机号不能为空！";
}else{
$scope.d=null;
}
};
$scope.e;
$scope.Sprice=function(){
if($scope.priceT==undefined){
$scope.e="价格称不能为空！";
}else{
$scope.e=null;
}
};
//批量删除
$scope.deleteAll = function(){
//获取所有选择的checkbox
var cks = $("input[type=checkbox]:checked");
//循环的到所有勾选上的复选框
for(var i=0;i<cks.length;i++){
var ck = cks[i];
var _id = ck.value;//得到要删除的商品的id
for(var j=0;j<$scope.datas.length;j++){//到数据源中找到和当前id匹配的商品，删除之
if($scope.datas[j].id == _id){
$scope.datas.splice(j,1);
break;
}
}

}

};
//省市区数据源
$scope.proList =[
{
"amode":"河南",
"citys":[
{"name":"郑州",
"area":[{"aname":"郑1区"},{"aname":"郑2区"}]
},
{"name":"开封",
"area":[{"aname":"开1区"},{"aname":"开2区"}]
}
]
},
{
"amode":"河北",
"citys":[
{"name":"石家庄",
"area":[{"aname":"石1区"},{"aname":"石2区"}]
},
{"name":"邯郸",
"area":[{"aname":"邯1区"},{"aname":"邯2区"}]
}
]
}
];
//添加省改变事件
$scope.proChange = function(){
$scope.select2 = $scope.select1.citys[0];

};
//状态

});
</script>
<style type="text/css">
table{
text-align: center;
}
.red{
background-color: red;
}
.blue{
background-color: blue;
}
table tr:nth-child(even){
background-color: #CC9966;
}
table tr:nth-child(odd){
background-color: #993366;
}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<input type="button" value="新增订单" ng-click="addAll();"/>  
<input type="button" value="批量删除" ng-click="deleteAll();"/>    
<input type="text" placeholder="按用户名称查询..." style="border-radius: 20px;" ng-model="selectName"/>  
<input type="text" placeholder="按手机号查询..." style="border-radius: 20px;" ng-model="selectPhone"/>  
<select>
<option>--按状态查询--</option>
<option ng-model="wei">未发货</option>
<option ng-model="yi">已发货</option>
</select>
<br />
<br />
<table border="1px" cellpadding="1px" cellspacing="0px" bordercolor="red" width="800px">
<tr style="background-color: yellow;" >
<td><input type="checkbox" ng-model="haha"/></td>
<td>id</td>
<td>商品名</td>
<td>用户名</td>
<td>手机号</td>
<td>价格</td>
<td>城市</td>
<td>下单时间</td>
<td>操作</td>
<td>状态</td>
</tr>
<tr ng-repeat="d in datas| filter:{name:selectName} | filter:{tel:selectPhone}" class="{{d.id%2==0?'red':'blue'}}">
<td><input type="checkbox" value="{{d.id}}" ng-model="haha"/></td>
<td>{{d.id}}</td>
<td>{{d.shopping}}</td>
<td>{{d.name}}</td>
<td>{{d.tel}}</td>
<td>{{d.price}}</td>
<td>{{d.city}}</td>
<td>{{date}}</td>
<td><input type="button" value="删除" ng-click="deleteId(d.id);"/></td>
<td><input type="button" value="未发货" ng-click="zhuangtai();"/></td>
</tr>
</table>
<br /><br /><br />
<div ng-show="divShow">
商品名<input type="text" style="width: 400px;" ng-model="shoppingT" ng-blur="Sshopping();"/><span style="background-color: yellow;">{{b}}</span><br /><br />
用户名<input type="text" style="width: 400px;" ng-model="nameT" ng-blur="Sname();"/><span style="background-color: yellow;">{{c}}</span><br /><br />
手机号<input type="text" style="width: 400px;" ng-model="telT" ng-blur="Stel();"/><span style="background-color: yellow;">{{d}}</span><br /><br />
价格为<input type="text" style="width: 400px;" ng-model="priceT" ng-blur="Sprice();"/><span style="background-color: yellow;">{{e}}</span><br /><br />
城市<select style="width: 200px;"
ng-model="select1"
ng-init="select1=proList[0]"
ng-change="proChange();"
ng-options="item.amode for item in proList"
>

</select >
<select style="width: 200px;"
ng-model="select2"
ng-init="select2=select.citys[0]"
ng-options="data1.name for data1 in select1.citys"
>

</select >
<br /><br />
<input type="button" value="保存" style="width: 200px;height: 30px;" ng-click="baocun();"/>
</div>
</center>
</body>
</html>