商品订单：数据的判断、添加，批量删除，排序，模糊查询
来源：互联网 发布：mac opengl 编辑：程序博客网 时间：2024/05/29 10:26
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/agular/angular.js" ></script>
<style type="text/css">
.kuan {
width: 100px;
height: 20px;
border-top-left-radius: 5em;
border-top-right-radius: 5em;
border-bottom-right-radius: 5em;
border-bottom-left-radius: 5em;
margin-left: 10px;
}
.sjh {
width: 100px;
height: 20px;
border-top-left-radius: 5em;
border-top-right-radius: 5em;
border-bottom-right-radius: 5em;
border-bottom-left-radius: 5em;
margin-left: 10px;
}
</style>
<script type="text/javascript">
var app=angular.module("myApp",[]);
var time1 = new Date("2017-12-19 10:00:00");
var time2 = new Date("2017-12-19 12:00:00");
var time3 = new Date("2017-12-19 14:00:00");
var time4 = new Date("2017-12-19 16:00:00");
app.controller("myCtrl",function($scope){
//模拟数据
$scope.shops=[{
"id": 123,
"sname": "iphonex",
"yname": "张三",
"tel": 13716167236,
"price": 8699,
"city": "北京",
"time": time1,
"orderState": true,
"state": false
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/agular/angular.js" ></script>
<style type="text/css">
.kuan {
width: 100px;
height: 20px;
border-top-left-radius: 5em;
border-top-right-radius: 5em;
border-bottom-right-radius: 5em;
border-bottom-left-radius: 5em;
margin-left: 10px;
}
.sjh {
width: 100px;
height: 20px;
border-top-left-radius: 5em;
border-top-right-radius: 5em;
border-bottom-right-radius: 5em;
border-bottom-left-radius: 5em;
margin-left: 10px;
}
</style>
<script type="text/javascript">
var app=angular.module("myApp",[]);
var time1 = new Date("2017-12-19 10:00:00");
var time2 = new Date("2017-12-19 12:00:00");
var time3 = new Date("2017-12-19 14:00:00");
var time4 = new Date("2017-12-19 16:00:00");
app.controller("myCtrl",function($scope){
//模拟数据
$scope.shops=[{
"id": 123,
"sname": "iphonex",
"yname": "张三",
"tel": 13716167236,
"price": 8699,
"city": "北京",
"time": time1,
"orderState": true,
"state": false
},
{
"id": 456,
"sname": "iphone6",
"yname": "王红",
"tel": 10086121212,
"price": 5635,
"city": "郑州",
"time": time4,
"orderState": true,
"state": false
},
{
"id": 789,
"sname": "iphone7",
"yname": "赵小龙",
"tel": 13693324137,
"price": 6180,
"city": "北京",
"time": time3,
"orderState": false,
"state": false
},
{
"id": 110,
"sname": "iphone8",
"yname": "赵强",
"tel": 13722335577,
"price": 7190,
"city": "上海",
"time": time2,
"orderState": false,
"state": false
}];
//更改状态
$scope.changeOrderState=function(shop){
shop.orderState=true;
}
//批量删除已发货商品
$scope.deleteSel=function(){
var selArr=[];
for(index in $scope.shops){
if($scope.shops[index].state){
if($scope.shops[index].orderState){
selArr.push($scope.shops[index]);
}
}
}
if(selArr.length>0){
for(index1 in selArr){
for(index2 in $scope.shops){
if(selArr[index1]==$scope.shops[index2]){
$scope.shops.splice(index2,1);
}
}
}
}else{
alert("先选择被选中的已发货商品");
}
}
//点击列名 进行排序
$scope.flag="";
$scope.column="id";
$scope.orderColumn=function(column){
$scope.column=column;
if($scope.flag==""){
$scope.flag="-";
}else{
$scope.flag="";
}
}
//添加商品
$scope.addshop=function(){
var flag1=false;
var flag2=false;
var flag3=false;
var flag4=false;
var flag5=false;
var flag6=false;
var flag7=false;
if($scope.newID==""||$scope.newID==null){
alert("ID不能为空");
flag1=false;
}else if(isNaN($scope.newID)){
alert("ID必须为数字");
flag1=false;
}else{
flag1=true;
}
if($scope.newShop==""||$scope.newShop==null){
alert("商品名不能为空");
flag2=false;
}else{
flag2=true;
}
if($scope.newName==""||$scope.newName==null){
alert("用户名不能为空");
flag3=false;
}else{
flag3=true;
}
if(isNaN($scope.newTel)){
alert("手机号要是数字");
flag4=false;
}else if($scope.newTel.length != 11){
alert("请输入正确手机号");
flag4=false;
}else{
flag4=true;
}
if($scope.newPrice==""||$scope.newPrice==null){
alert("价格不能为空");
flag5=false;
}else{
flag5=true;
}
if($scope.newCity==""||$scope.newCity==null){
alert("城市不能为空");
flag6=false;
}else{
flag6=true;
}
if($scope.newTime==""||$scope.newTime==null){
alert("时间不能为空");
flag7=false;
}else{
flag7=true;
}
//添加
if(flag1 && flag2 && flag3 && flag4 && flag5 && flag6 && flag7){
$scope.shops.push({
id:$scope.newID,
sname:$scope.newShop,
yname:$scope.newName,
tel:$scope.newTel,
price:$scope.newPrice,
city:$scope.newCity,
time:$scope.newTime,
});
}
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<h3>商品订单管理</h3>
<table border="1px" cellpadding="10" cellspacing="0">
<input type="button" value="新增订单" />
<input type="button" value="批量删除" ng-click="deleteSel()"/>
<input type="text" placeholder="按照商品名称查询..." class="kuan" ng-model="search" />
<input type="text" placeholder="按照手机号查询..." class="sjh" ng-model="telNum" />
<select style="margin-left: 30px;" ng-model="orderStateSel">
<option value="">--按照状态查询--</option>
<option value="true">--已发货--</option>
<option value="false">--未发货--</option>
</select><br /><br />
<tr>
<th><input type="checkbox" ng-click="selectFun()" ng-model="selectAll" /></th>
<th>id<input type="submit" value="排序" ng-click="pid(shop,id)"/></th>
<th>商品名</th>
<th>用户名</th>
<th>手机号</th>
<th>价格<input type="submit" value="排序"/></th>
<th>城市</th>
<th>下单时间<input type="button" ng-click="orderColumn('time')" value="排序"/></th>
<th>状态</th>
</tr>
//filter:{sname:search,tel:telNum,orderState:orderStateSel} 查询商品 手机号
<tr ng-repeat="shop in shops | filter:{sname:search,tel:telNum,orderState:orderStateSel} | orderBy:flag+column">
<td><input type="checkbox" ng-model="shop.state" /></td>
<td>{{shop.id}}</td>
<td>{{shop.sname}}</td>
<td>{{shop.yname}}</td>
<td>{{shop.tel}}</td>
<td>{{shop.price | currency:"￥："}}</td>
<td>{{shop.city}}</td>
<td>{{shop.time | date:"yyyy-MM-dd hh:mm:ss"}}</td>
<td>
<button disabled="disabled" style="background: green; border: none;" ng-show="shop.orderState">已发货</button>
<button style="background: yellow; border: none;" ng-show="!shop.orderState" ng-click="changeOrderState(shop)">未发货</button>
</td>
</tr>
</table>
<fieldset id="" style="width: 500px;">
<legend>添加商品列表</legend>
<table border="1" cellpadding="10" cellspacing="0">
<tr>
<td>id</td>
<td><input type="text" ng-model="newID"/></td>
</tr>
<tr>
<td>商品名</td>
<td><input type="text" ng-model="newShop"/></td>
</tr>
<tr>
<td>用户名</td>
<td><input type="text" ng-model="newName"/></td>
</tr>
<tr>
<td>手机号</td>
<td><input type="text" ng-model="newTel"/></td>
</tr>
<tr>
<td>价格</td>
<td><input type="text" ng-model="newPrice"/></td>
</tr>
<tr>
<td>城市</td>
<td><input type="text" ng-model="newCity"/></td>
</tr>
<tr>
<td>下单时间</td>
<td><input type="text" ng-model="newTime"/></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="提交" ng-click="addshop()"/></td>
</tr>
</table>
</fieldset>
</center>
</body>
</html>
{
"id": 456,
"sname": "iphone6",
"yname": "王红",
"tel": 10086121212,
"price": 5635,
"city": "郑州",
"time": time4,
"orderState": true,
"state": false
},
{
"id": 789,
"sname": "iphone7",
"yname": "赵小龙",
"tel": 13693324137,
"price": 6180,
"city": "北京",
"time": time3,
"orderState": false,
"state": false
},
{
"id": 110,
"sname": "iphone8",
"yname": "赵强",
"tel": 13722335577,
"price": 7190,
"city": "上海",
"time": time2,
"orderState": false,
"state": false
}];
//更改状态
$scope.changeOrderState=function(shop){
shop.orderState=true;
}
//批量删除已发货商品
$scope.deleteSel=function(){
var selArr=[];
for(index in $scope.shops){
if($scope.shops[index].state){
if($scope.shops[index].orderState){
selArr.push($scope.shops[index]);
}
}
}
if(selArr.length>0){
for(index1 in selArr){
for(index2 in $scope.shops){
if(selArr[index1]==$scope.shops[index2]){
$scope.shops.splice(index2,1);
}
}
}
}else{
alert("先选择被选中的已发货商品");
}
}
//点击列名 进行排序
$scope.flag="";
$scope.column="id";
$scope.orderColumn=function(column){
$scope.column=column;
if($scope.flag==""){
$scope.flag="-";
}else{
$scope.flag="";
}
}
//添加商品
$scope.addshop=function(){
var flag1=false;
var flag2=false;
var flag3=false;
var flag4=false;
var flag5=false;
var flag6=false;
var flag7=false;
if($scope.newID==""||$scope.newID==null){
alert("ID不能为空");
flag1=false;
}else if(isNaN($scope.newID)){
alert("ID必须为数字");
flag1=false;
}else{
flag1=true;
}
if($scope.newShop==""||$scope.newShop==null){
alert("商品名不能为空");
flag2=false;
}else{
flag2=true;
}
if($scope.newName==""||$scope.newName==null){
alert("用户名不能为空");
flag3=false;
}else{
flag3=true;
}
if(isNaN($scope.newTel)){
alert("手机号要是数字");
flag4=false;
}else if($scope.newTel.length != 11){
alert("请输入正确手机号");
flag4=false;
}else{
flag4=true;
}
if($scope.newPrice==""||$scope.newPrice==null){
alert("价格不能为空");
flag5=false;
}else{
flag5=true;
}
if($scope.newCity==""||$scope.newCity==null){
alert("城市不能为空");
flag6=false;
}else{
flag6=true;
}
if($scope.newTime==""||$scope.newTime==null){
alert("时间不能为空");
flag7=false;
}else{
flag7=true;
}
//添加
if(flag1 && flag2 && flag3 && flag4 && flag5 && flag6 && flag7){
$scope.shops.push({
id:$scope.newID,
sname:$scope.newShop,
yname:$scope.newName,
tel:$scope.newTel,
price:$scope.newPrice,
city:$scope.newCity,
time:$scope.newTime,
});
}
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<h3>商品订单管理</h3>
<table border="1px" cellpadding="10" cellspacing="0">
<input type="button" value="新增订单" />
<input type="button" value="批量删除" ng-click="deleteSel()"/>
<input type="text" placeholder="按照商品名称查询..." class="kuan" ng-model="search" />
<input type="text" placeholder="按照手机号查询..." class="sjh" ng-model="telNum" />
<select style="margin-left: 30px;" ng-model="orderStateSel">
<option value="">--按照状态查询--</option>
<option value="true">--已发货--</option>
<option value="false">--未发货--</option>
</select><br /><br />
<tr>
<th><input type="checkbox" ng-click="selectFun()" ng-model="selectAll" /></th>
<th>id<input type="submit" value="排序" ng-click="pid(shop,id)"/></th>
<th>商品名</th>
<th>用户名</th>
<th>手机号</th>
<th>价格<input type="submit" value="排序"/></th>
<th>城市</th>
<th>下单时间<input type="button" ng-click="orderColumn('time')" value="排序"/></th>
<th>状态</th>
</tr>
//filter:{sname:search,tel:telNum,orderState:orderStateSel} 查询商品 手机号
<tr ng-repeat="shop in shops | filter:{sname:search,tel:telNum,orderState:orderStateSel} | orderBy:flag+column">
<td><input type="checkbox" ng-model="shop.state" /></td>
<td>{{shop.id}}</td>
<td>{{shop.sname}}</td>
<td>{{shop.yname}}</td>
<td>{{shop.tel}}</td>
<td>{{shop.price | currency:"￥："}}</td>
<td>{{shop.city}}</td>
<td>{{shop.time | date:"yyyy-MM-dd hh:mm:ss"}}</td>
<td>
<button disabled="disabled" style="background: green; border: none;" ng-show="shop.orderState">已发货</button>
<button style="background: yellow; border: none;" ng-show="!shop.orderState" ng-click="changeOrderState(shop)">未发货</button>
</td>
</tr>
</table>
<fieldset id="" style="width: 500px;">
<legend>添加商品列表</legend>
<table border="1" cellpadding="10" cellspacing="0">
<tr>
<td>id</td>
<td><input type="text" ng-model="newID"/></td>
</tr>
<tr>
<td>商品名</td>
<td><input type="text" ng-model="newShop"/></td>
</tr>
<tr>
<td>用户名</td>
<td><input type="text" ng-model="newName"/></td>
</tr>
<tr>
<td>手机号</td>
<td><input type="text" ng-model="newTel"/></td>
</tr>
<tr>
<td>价格</td>
<td><input type="text" ng-model="newPrice"/></td>
</tr>
<tr>
<td>城市</td>
<td><input type="text" ng-model="newCity"/></td>
</tr>
<tr>
<td>下单时间</td>
<td><input type="text" ng-model="newTime"/></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="提交" ng-click="addshop()"/></td>
</tr>
</table>
</fieldset>
</center>
</body>
</html>
阅读全文
0 0
- 商品订单：数据的判断、添加，批量删除，排序，模糊查询
- 商品订单（增删改查）：新增订单；批量删除，发货；模糊查询，下拉菜单内容过滤（含时间）；全选反选，列名排序
- 模糊查询，批量删除， 添加用户，隔行变色，排序，过滤器
- AngularJS排序+模糊查询+批量删除+添加列表
- 订单用户表1（用户查询 、手机号查询 、选择城市 、选择状态、月份查询 、ID排序 、添加数据、批量发货、批量删除）
- 订单用户表2（用户名查询、手机号查询、选择城市、选择状态、选择月份、ID排序、添加数据、批量发货、批量删除、敏感字、修改数据）
- 简单快递 : 实现模糊搜索 选择城市搜索 选择状态搜索 升降排序 批量发货 批量删除 修改商品名字 新增订单时候,敏感字替换
- 隔行换色+删除+批量删除+排序+模糊查询+修改+添加
- 商品增加和查询、排序、批量删除、批量发货
- 订单添加 批量删除 搜索 排序 时间排序 物流状态
- 用户表（查询数据 、添加数据 、排序 、点击删除 、修改密码 、批量删除 、全部删除）
- angular删除数据+模糊查询,排序
- 商品题(查询+批量删除)
- AngularJS商品新增订单批量发货删除排序全选反选日期过滤
- 商品订单 添加、查询、状态、时间。。
- 初学Html5+CSS之表格添加用户+删除用户+修改数据+删除全部+批量删除+查询数据+内容判断
- 隔行换色+模糊查询+添加+删除+排序
- html+css+angularjs 实现商品库存信息管理页面 可删除/批量删除/可模糊查询/可升序降序
- fromelf.exe hex转bin
- AFNetworking的简单封装
- 最全的微信小程序代码大全
- 关于Maven多模块开发热修改的一点记录
- mongodb笔记04(MongoDB $type 操作符，Limit与Skip方法，sort()方法，索引，聚合（aggregate）)
- 商品订单：数据的判断、添加，批量删除，排序，模糊查询
- Dropout浅层理解与实现
- 【汇编】求十进制数的补码并转二进制和十六进制输出
- NULL与String.Empty的
- php日期转中文程序代码
- 强制删除attached状态的screen
- ROI Pooling层解析_代码原理详细解释和存在目的
- qt:During startup program exited with code 0xc0000135
- 91. Decode Ways
