实战之订单查询



订单管理页面需求


1.核心:订单管理数据结构;


2.订单列表绑定;


3.订单查询;


4.选中订单、订单操作、批量操作。


实例代码


<!doctype html>
<html ng-app="lesson" ng-controller="lesson12">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>
LESSON 12
  </title>
  <link rel="stylesheet" type="text/css" href="css/main.css" />
  <style>
  #content1{padding:16px;}
  table
  {
  border-collapse:collapse;
  }
 
table,th, td
  {
  border: 1px solid black;
  vertical-align:top;
  padding:12px;
  }
 
  </style>
 
  </head>
 
  <body>
  
  
  <p ng-show="IsLoading">订单加载中...</p>
 
 
<div ng-show="!IsLoading">
<div>
<span>订单编号:</span><input ng-model="searchOrderId" ></input> <button ng-click='searchOrder()'>查询</button>
<button ng-click='DeleteOrders()'>批量删除</button>
</div>
 
<table>
<thead>
<tr>
<th>选中</th>
<th>订单编号</th>
<th>卖家</th>
<th>商品详情</th>
<th>订单总价</th>
<th>物流状态</th>
<th>订单状态</th>
<th>下单日期</th>
<th>删除</th>
</tr>
</thead>
<tbody >
<tr ng-repeat="x in orderList ">
<td><input type="checkbox" ng-model="x.selected" ></td>
<td>{{x.orderId}}</td>
<td>{{x.sealer}}</td>
<td>
<ul ng-repeat="p in x.products " style="border-bottom:1px solid #333;"> 
<li>{{p.name}}</li>
<li>{{p.desciption}}</li>
<li>{{p.price}}</li>
<li>{{p.oldPrice}}</li>
<li>{{p.amount}}</li>
<li>{{p.payment}}</li>
</ul>
</td>
<td>{{x.orderPayment}}</td>
<td>{{x.traffic}}</td>
<td>{{x.status}}</td>
<td>{{x.createTime}}</td>
<td><button ng-click="DeleteOrder(x.orderId)">删除</button></td>
</tr>
</tbody>
</table>
</div>
 
 
<script src="scripts/angular-1.4.6.min.js"></script>
<script>
 
Array.prototype.remove=function(dx)
 {
  if(isNaN(dx)||dx>this.length){return false;}
  for(var i=0,n=0;i<this.length;i++)
  {
    if(this[i]!=this[dx])
    {
      this[n++]=this[i]
    }
  }
  this.length-=1
 }
 
var app = angular.module("lesson",[]);
app.controller("lesson12",function($scope){
 
$scope.orderListBase =[
{
orderId : 'GH2016032010001',
createTime: '2016-03-20 10:01',
sealer: '专营店1卖家',
traffic: '快递已取件',
status: '卖家已发货',
products:[
{name:'黑色夹克衫',
 desciption:'质量扎实,外观很潮',
 price:200.00,
 oldPrice:350.00,
 amount:1,
 payment:200.00
}
],
orderPayment:200.00,
selected:false
},
{
orderId : 'GH2016032010002',
createTime: '2016-03-20 12:01',
sealer: '小诗家',
traffic: '快递已派送',
status: '卖家已发货',
products:[
{name:'针织衫',
 desciption:'颜色新颖',
 price:120.00,
 oldPrice:260.00,
 amount:1,
 payment:120.00
},
{name:'棒球帽',
 desciption:'宽檐',
 price:60.00,
 oldPrice:160.00,
 amount:1,
 payment:60.00
}
],
orderPayment:180.00,
selected:false
},
{
orderId : 'GH2016032010003',
createTime: '2016-03-19 16:01',
sealer: '胜利家装店',
traffic: '已派送成功,用户已签收',
status: '买家已确认收货',
products:[
{name:'吸盘把手',
 desciption:'白色、耐久使用',
 price:38.00,
 oldPrice:80.00,
 amount:2,
 payment:76.00
}
],
orderPayment:76.00,
selected:false
}
];
 
$scope.orderList = [];
 
$scope.IsLoading = false;
$scope.LoadOrderList = function(accountId,pageSize,pageIndex){
$scope.IsLoading=true;
$scope.orderList = $scope.orderListBase;
$scope.IsLoading=false;
}
 
$scope.orderFilter = function(order){
if($scope.searchOrderId!=''){
return order.orderId.indexOf($scope.searchOrderId)>=0;
}
}
 
$scope.searchOrder = function(){
var searchOrderList = [];
for(var  i in $scope.orderListBase){
if($scope.orderListBase[i].orderId.indexOf($scope.searchOrderId) >=0){
searchOrderList.push($scope.orderListBase[i]);
}
}
$scope.orderList = searchOrderList;
}
 
$scope.DeleteOrder = function(orderId){
$scope.orderList.forEach(function( order , i , list){
if(order.orderId == orderId ){
list.splice(i,1);
}
});
}
 
$scope.DeleteOrders = function(){
for(var i = $scope.orderList.length-1;i>=0;i--){
if($scope.orderList[i].selected){
$scope.orderList.remove(i);
}
}
}
 
$scope.LoadOrderList();
});
 
</script>
 
  </body>
</html>


执行结果:


page2.png



本课小结


在上节课的基础上,做了订单查询、选中订单、订单操作、批量操作。



【本文由大发二分彩—大发三分彩官方独家原创,转载请注明出处并保留原文链接】

logo
© 2012-2016 tvqo.cn
蜀ICP备13014270号-4 Version 5.0.0 release20160127

免费领取价值1888元求职宝典!

客服热线 400-862-8862

回到顶部