商品状态查询

最新推荐文章于 2022-07-18 16:41:08 发布

151242361

最新推荐文章于 2022-07-18 16:41:08 发布

阅读量579

点赞数

本文链接：https://blog.csdn.net/gengtianbo/article/details/78834365

版权

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>

<style type="text/css">
.first {
background-color: #007aff;
}
/* 表格奇数行变中绿色 */

tbody tr:nth-child(odd) {
background-color: #00FA9A;
}
/* 表格偶数行变弱绿色 */

tbody tr:nth-child(even) {
background-color: #98FB98;
}

.li {
background-color: #FEB6C1;
font-size: 15px;
color: #93212E;
}

.inputErrorColor {
border: 1px solid #ff3b30;
}

.inputSuccessColor {
border: 1px solid black;
}
</style>
<script type="text/javascript" src="../js/jquery-2.1.0.js"></script>

<script type="text/javascript">
$(function() {
/* 表格第一行变天蓝色 */
$("thead tr").addClass("first");
});
</script>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
//定义数据源
$scope.color = "#000";
$scope.goods = [{
id: 2001,
name: "iPhoneX",
username: "张三",
tel: 13525565588,
price: 8699,
city: "北京",
time: "11-23 10:00",
goodsState: "已发货",
state: false,
colors: "#31FE31"
},
{
id: 3006,
name: "iPhone6",
username: "王红",
tel: 18524565588,
price: 5635,
city: "郑州",
time: "11-23 11:38",
goodsState: "已发货",
state: false,
colors: "#31FE31"
},
{
id: 5312,
name: "iPhone7",
username: "赵小龙",
tel: 17545565598,
price: 6180,
city: "北京",
time: "11-23 09:17",
goodsState: "未发货",
state: false,
colors: "#FFFF31"
},
{
id: 2132,
name: "iPhone8",
username: "赵强",
tel: 17625565618,
price: 7190,
city: "上海",
time: "11-23 10:40",
goodsState: "未发货",
state: false,
colors: "#FFFF31"
}
];
//查询
$scope.searName = "";
$scope.searTel = "";
$scope.CX = "";
$scope.Cx = function() {
if($scope.searName != "" && $scope.searName != null) {
$scope.CX = {
'name': $scope.searName
};
} else if($scope.searTel != "" && $scope.searTel != null) {
$scope.CX = {
'tel': $scope.searTel
};
} else {
$scope.CX = "";
}
return $scope.CX;
};

//下拉菜单筛选已发货、未发货
$scope.selectState = "";
$scope.isShow = function(goods) {
if($scope.selectState == "") {
return true;
} else if($scope.selectState != "") {
if(goods == $scope.selectState) {
return true;
} else {
return false;
}
}

}

//按钮点击变色
$scope.Discolor = function(goods1) {
for(g in $scope.goods) {
if($scope.goods[g].id == goods1) {
if($scope.goods[g].goodsState == "已发货") {
$scope.goods[g].goodsState = "未发货";
$scope.goods[g].colors = "#FFFF31";
} else {
$scope.goods[g].goodsState = "已发货";
$scope.goods[g].colors = "#31FE31";
}
}
}
}

//全选&&全不选
$scope.checkedAll = false;
var a = 0;
//正着全选
$scope.selectAll = function() {
if($scope.checkedAll) {
for(var i = 0; i < $scope.goods.length; i++) {
$scope.goods[i].state = true;
a++;
}
} else {
for(var i = 0; i < $scope.goods.length; i++) {
$scope.goods[i].state = false;
a--;
}
}
};

//反着全选
$scope.selectOne = function(index) {
if($scope.goods[index].state) {
a++;
} else {
a--;
}
if(a == $scope.goods.length) {
//如果小按钮全部选中了,就让大的全选按钮也选中
$scope.checkedAll = true;
} else {
$scope.checkedAll = false;
}
};

//批量删除点击事件
$scope.delSelect = function() {
if(a == 0) {
alert("请选择要批量删除的商品!");
} else {
for(var i = 0; i < $scope.goods.length; i++) {
if($scope.goods[i].state) {
$scope.goods.splice(i, 1);
i--;
a--;
}
}
$scope.checkedAll = false;
alert("删除成功!");
}
};
/* 5. 使用AngularJS过滤器orderBy对商品进行排序：具体是点击每一列标题名字时，产品进行正序倒序排列。*/
$scope.sortFlag = "-";
$scope.sortName = "name";
$scope.sortGoods = function(columnName) {
$scope.sortName = columnName;
if($scope.sortFlag == "-") {
$scope.sortFlag = "";
} else {
$scope.sortFlag = "-";
}
};

//添加订单
$scope.isShow1 = false;
$scope.isShow2 = false;
$scope.isShow3 = false;
$scope.isShow4 = false;
$scope.isShow5 = false;
$scope.isShow0 = false;

$scope.addGoods = function() {
$scope.color = "#000";
if($scope.isShow0 == false) {
$scope.isShow0 = true;
} else {
$scope.isShow0 = false;
}
}

$scope.Newname = "";
$scope.Newusername = "";
$scope.Newtel = "";
$scope.Newprice = "";
$scope.citys = "--选择城市--";
var a = 0;
$scope.sub = function() {
$scope.subflag = true;
if($scope.Newname == null || $scope.Newname == "") {
$scope.isShow1 = true;
$scope.subflag = false;
}
if($scope.Newusername == null || $scope.Newusername == "") {
$scope.isShow2 = true;
$scope.subflag = false;
}
if($scope.Newtel == null || $scope.Newtel == "") {
$scope.isShow3 = true;
$scope.subflag = false;
}
if($scope.Newprice == null || $scope.Newprice == "" || isNaN($scope.Newprice)) {
$scope.isShow4 = true;
$scope.subflag = false;
}
if($scope.citys == "--选择城市--") {
$scope.isShow5 = true;
$scope.subflag = false;
}
if($scope.subflag == true) {
a++;
var time = new Date();
var add = {
id: a,
name: $scope.Newname,
username: $scope.Newusername,
tel: parseInt($scope.Newtel),
price: parseInt($scope.Newprice),
city: $scope.citys,
time: time,
goodsState: "未发货",
colors: "#FFFF31",
state: false
};
$scope.goods.push(add);
$scope.isShow1 = false;
$scope.isShow2 = false;
$scope.isShow3 = false;
$scope.isShow4 = false;
$scope.isShow5 = false;
$scope.isShow0 = false;
$scope.Newname = "";
$scope.Newusername = "";
$scope.Newtel = "";
$scope.Newprice = "";
$scope.citys = "--选择城市--";
} else {
$scope.color = "F00";
}

}

});
</script>
</head>

<body ng-app="myApp" ng-controller="myCtrl">
<center>
<h3>商品订单信息表</h3>
<p>
<button ng-click="addGoods()" style="background-color: #28a54c;color: white;">新增订单</button>
<button ng-click="delSelect()" style="background-color: #28a54c;color: white;">批量删除订单</button>
<input type="text" placeholder="按商品名查询" ng-model="searName" ng-change="Cx()" /> 
<input type="text" placeholder="按手机号查询" ng-model="searTel" ng-change="Cx()" /> 
<select ng-model="selectState">
<option value="">--按状态查询--</option>
<option value="已发货">已发货</option>
<option value="未发货">未发货</option>
</select>
</p>

<table border="1px solid #777777" cellspacing="0" cellpadding="18">
<thead>
<tr>
<th><input type="checkbox" ng-model="checkedAll" ng-click="selectAll()" /></th>
<th>ID
<button ng-click="sortGoods('id')" style="background-color: #28a54c;color: white;border: 0 solid #28a54c;">排序</button>
</th>
<th>商品名</th>
<th>用户名</th>
<th>手机号</th>
<th>价格
<button ng-click="sortGoods('price')" style="background-color: #28a54c;color: white;border: 0 solid #28a54c;">排序</button>
</th>
<th>城市</th>
<th>下单时间
<button ng-click="sortGoods('time')" style="background-color: #28a54c;color: white;border: 0 solid #28a54c;">排序</button>
</th>
<th>状态</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="sp in goods | filter:CX | filter:searTel | orderBy:(sortFlag+sortName)" ng-show="isShow(sp.goodsState)">
<th><input type="checkbox" ng-model="sp.state" ng-click="selectOne($index)" /></th>
<td>{{sp.id}}</td>
<td>{{sp.name}}</td>
<td>{{sp.username}}</td>
<td>{{sp.tel}}</td>
<td>￥{{sp.price.toFixed(2)}}</td>
<td>{{sp.city}}</td>
<td>{{sp.time | date:"MM-dd hh:MM"}}</td>
<td>
<input type="button" style="background:{{sp.colors}}" value={{sp.goodsState}} ng-click="Discolor(sp.id)">
</td>
</tr>
</tbody>
</table>
<div style="width: 400px; border: 1px solid #f00; margin-top: 20px;" ng-show="isShow0">
<h3>添加订单信息</h3>
<ul style="list-style: none">
<li>商品名:<input type="text" ng-model="Newname" style="border-color:{{color}}"> <span class="span" ng-show="isShow1">商品名不能为空！</span></li><br>
<li>用户名:<input type="text" ng-model="Newusername" style="border-color:{{color}}"> <span class="span" ng-show="isShow2">用户名不能为空！</span></li><br>
<li>手机号:<input type="text" ng-model="Newtel" style="border-color:{{color}}"> <span class="span" ng-show="isShow3">手机号格式有误！</span></li><br>
<li>价格为:<input type="text" ng-model="Newprice" style="border-color:{{color}}">   <span class="span" ng-show="isShow4">价格格式有误！</span></li><br>
<li>城市:
<select ng-model="citys" style="border-color:{{color}}">
<option>--选择城市--</option>
<option>四川</option>
<option>河北</option>
</select> <span class="span" ng-show="isShow5">城市不能为空！</span></li>
</ul>
<button ng-click="sub()" style="background-color: #28a54c;color:white;">保存</button>
</div>
</center>
</body>

</html>

151242361

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
商品状态查询

.first {background-color: #007aff;}/* 表格奇数行变中绿色 */tbody tr:nth-child(odd) {background-color: #00FA9A;}/* 表格偶数行变弱绿色 */tbody tr:nth-child(even) {background-color: #98FB
复制链接

扫一扫