实现效果:
实现要求:
1、 完成页面
2、 点击“新增订单”,弹出上框,新增订单状态都是“待发货”
3、 实现排序
4、 提交订单时,检查表单,提示错误内容,并且将文本框颜色变红色(错误提示)
5、 选择状态查询:待发货、已发货、已收货
6、 点击“发货”按钮,将“待发货”状态改成“已发货”
7、 通过Checkbox全选和全不选
8、 点击“批量删除”按钮,删除选中的订单
9、 选择“开始月份”:01~12
10、 选择“结束月份”:01~12,查询开始月份和结束月份之间的订单
源码:
<!DOCTYPE html> <html ng-app="myApp"> <head lang="en"> <meta charset="UTF-8"> <script type="text/javascript" src="jquery.1.12.4.js"></script> <script type="text/javascript" src="angular-1.3.0.js"></script> <title>月考模拟</title> <style type="text/css"> #all{ width: 800px; height: 700px; margin: auto; } .filter { width: 800px; height: 60px; margin: 0 auto; } .filter input { width: 152px; height: 24px; border: 1px solid #999; border-radius: 4px; padding-left: 8px; } .filter select { width: 86px; height: 24px; border: 1px solid #999; border-radius: 4px; } button { background-color: green; border: 0; border-radius: 4px; color: white; } .add{ width: 80px; height: 30px; margin-top: 5px; background: green; color: snow; } .show{ width: 80px; height: 30px; margin-top: 5px; background: green; color: snow; } table{ width: 800px; text-align: center; } table th{ background: #aaaaaa; } #add_show{ margin-top: 10px; width: 798px; height: 600px; border: 1px solid black; } #add_show b{ font-size: 20px; margin: 10px; } #add_from{ width: 600px; margin: auto; } #add_from span{ margin-top: 15px; font-size: 20px; margin-right: 10px; } #add_from input{ font-size: 20px; margin-top: 15px; width: 500px; height: 30px; } #add_from select{ font-size: 20px; width: 130px; height: 30px; margin-top: 15px; } #add_erro{ width: 500px; height: 250px; background: lightpink; margin-left: 68px; margin-top: 15px; } #add_erro ul{ width: 300px; height: 250px; padding-top: 10px; margin-left: 20px; color: palevioletred; } #add_erro li{ margin-top: 10px; } #button{ background: green; color: aliceblue; width: 60px; height: 40px; font-size: 16px; margin-left: 168px; margin-top: 10px; } </style> <script type="text/javascript"> $(document).ready(function(){ odd= {"background":"#ddd"};//奇数样式 even={"background":"#fff"};//偶数样式 odd_even("#table_test",odd,even); }); function odd_even(id,odd,even){ $("table").find("tr").each(function(index,element){ if(index%2==1) $(this).css(odd); else $(this).css(even); }); } var app = angular.module("myApp", []); app.controller("myCtrl", function ($scope) { $scope.users = [ { id:1, show_name:"iPhone4", name:"张三", number:"1213213123", price:4999, city:"北京", time:"08-01 15:32", status:"待发货" }, { id:2, show_name:"小米6", name:"李四", number:"346363466", price:2999, city:"北京", time:"05-02 14:22", status:"待发货" }, { id:3, show_name:"华为P9", name:"王五", number:"32532535", price:3999, city:"上海", time:"08-03 09:18", status:"已发货" }, { id:4, show_name:"OPPO R11", name:"赵六", number:"976969464", price:4999, city:"天津", time:"10-04 13:32", status:"已收货" }, { id:5, show_name:"VIVO", name:"周七", number:"213141125", price:2999, city:"重庆", time:"06-05 21:34", status:"已发货" }, ] //按月查找 $scope.filterByMonth = function (user) { if ($scope.filter_begin_month == undefined || $scope.filter_begin_month == "") { return true; } if ($scope.filter_end_month == undefined || $scope.filter_end_month == "") { return true; } var beginMonth = parseInt($scope.filter_begin_month); var endMonth = parseInt($scope.filter_end_month); if (beginMonth > endMonth) { return true; } var month = user.time.substring(0, user.time.indexOf("-")); month = parseInt(month); return (month >= beginMonth && month <= endMonthd); }; $scope.showAddOrderForm = function () { $scope.isShowAddOrderForm = true; }; //全选按钮 $scope.gou=function () { for(var i=0;i<$scope.users.length;i++) { if($scope.checkAll==true) { $scope.users[i].state=true; } else { $scope.users[i].state=false; } } } //价格排序 $scope.changePriceOrderType = function () { if ($scope.price_order_type == "price") { $scope.price_order_type = "-price"; } else { $scope.price_order_type = "price"; } }; //时间排序 $scope.changeTimeOrderType = function () { if ($scope.time_order_type == "time") { $scope.time_order_type = "-time"; } else { $scope.time_order_type = "time"; } }; //ID排序 $scope.order = function () { if ($scope.search_id == 1) { $scope.users.sort(function (json1, json2) { return (json1.id < json2.id) ? 1 : -1; }); } else if ($scope.search_id == 2) { $scope.users.sort(function (json1, json2) { return (json1.id > json2.id) ? 1 : -1; }); } } // 将待发货,改成已发货 $scope.deliver = function (id) { for (var i in $scope.users) { if ($scope.users[i].id == id) { $scope.users[i].status = "已发货"; } } }; //批量发货 $scope.sendShow=function(){ var userNames=[]; for(index in $scope.users){ if($scope.users[index].state == true){ userNames.push($scope.users[index].id); } } if(userNames.length>0){ if(confirm("是否对选中项发货?")){ for(i in userNames){ var id=userNames[i]; for (var i in $scope.users) { if ($scope.users[i].id == id) { $scope.users[i].status = "已发货"; } } } } }else{ alert("请选择发货的项") } } //批量删除 $scope.deleteShow=function(){ var userNames=[]; for(index in $scope.users){ if($scope.users[index].state == true){ userNames.push($scope.users[index].name); } } if(userNames.length>0){ if(confirm("是否删除选中项?")){ for(i in userNames){ var name=userNames[i]; for(i2 in $scope.users){ if($scope.users[i2].name==name){ $scope.users.splice(i2,1); } } } } }else{ alert("请选择删除的项") } } //创建date对象 var date = new Date(); //获取年 var y = date.getFullYear(); //月 默认是0-11 [0,12) var m = date.getMonth()+1; //日 var d = date.getDay();//获取一个星期里面的第几天 var dd = date.getDate();//或某个月的某一天 //时分秒 var h = date.getHours(); var mm = date.getMinutes(); var s = date.getSeconds(); //拼接 var t = m+"-"+dd+" "+h+":"+mm; $scope.erro_show = false; $scope.l1 = false; $scope.l2 = false; $scope.l3 = false; $scope.l4 = false; $scope.l5 = false; $scope.l6 = false; $scope.l7 = false; $scope.sub = function(){ var show_name = $scope.add_show_name; var name = $scope.add_name; var number = $scope.add_number; var city = $scope.add_city; if(show_name!=null){ if(show_name.length>=6&&show_name.length<=20){ $scope.show_name_style ={ "border":"1px solid #ccc" } if(name!=null){ if(name.length>=4&&name.length<=16){ $scope.name_style ={ "border":"1px solid #ccc" } if(number!=null){ if(number.length==11){ $scope.number_style ={ "border":"1px solid #ccc" } if(city!=undefined&&city!=""){ $scope.city_style ={ "border":"1px solid #ccc" } var newUser = { id:$scope.users.length + 1, show_name:$scope.add_show_name, name:$scope.add_name, number:$scope.add_number, price:2999, city:$scope.add_city, time:t, status:"待发货", } //添加新用户. $scope.users.push(newUser); $scope.isShowAddOrderForm = false; }else{ $scope.city_style ={ "border":"1px solid red" } $scope.erro_show = true; $scope.l7 = true; } }else{ $scope.number_style ={ "border":"1px solid red" } $scope.erro_show = true; $scope.l6 = true; } }else{ $scope.number_style ={ "border":"1px solid red" } $scope.erro_show = true; $scope.l5 = true; } }else{ $scope.name_style ={ "border":"1px solid red" } $scope.erro_show = true; $scope.l4 = true; } }else{ $scope.name_style ={ "border":"1px solid red" } $scope.erro_show = true; $scope.l3 = true; } }else{ $scope.show_name_style ={ "border":"1px solid red" } $scope.erro_show = true; $scope.l2 = true; } }else{ $scope.show_name_style ={ "border":"1px solid red" } $scope.erro_show = true; $scope.l1 = true; } } }); </script> </head> <body ng-controller="myCtrl"> <div id="all"> <div class="filter"> <input type="text" placeholder="用户名搜索" ng-model="search_name"> <input type="text" placeholder="手机号搜索" ng-model="search_num"> <select ng-model="search_city"> <option value="">选择城市</option> <option>北京</option> <option>上海</option> <option>重庆</option> <option>天津</option> <option>深圳</option> </select> <select ng-model="search_status"> <option value="">选择状态</option> <option value="待发货">待发货</option> <option value="已发货">已发货</option> <option value="已收货">已收货</option> </select> <select ng-model="filter_begin_month"> <option value="">开始月份</option> <option value="1">01</option> <option value="2">02</option> <option value="3">03</option> <option value="4">04</option> <option value="5">05</option> <option value="6">06</option> <option value="7">07</option> <option value="8">08</option> <option value="9">09</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> </select>- <select ng-model="filter_end_month"> <option value="">结束月份</option> <option value="1">01</option> <option value="2">02</option> <option value="3">03</option> <option value="4">04</option> <option value="5">05</option> <option value="6">06</option> <option value="7">07</option> <option value="8">08</option> <option value="9">09</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> </select> <select ng-model="search_id" ng-change="order()"> <option value="">排序</option> <option value="1">ID正序</option> <option value="2">ID倒序</option> </select> <br> <input type="button" value="新增订单" class="add" ng-click="showAddOrderForm();" > <input type="button" value="批量发货" class="show" ng-click="sendShow();"> <input type="button" value="批量删除" class= "show" ng-click="deleteShow();"> </div> <table border="1" cellspacing="0" cellpadding="10"> <thead> <tr> <th><input type="checkbox" ng-click="gou()" ng-model="checkAll"></th> <th>ID</th> <th>商品名</th> <th>用户名</th> <th>手机号</th> <th>价格<button ng-click="changePriceOrderType()">排序</button></th> <th>城市</th> <th>下单时间<button ng-click="changeTimeOrderType()">排序</button></th> <th>状态</th> </tr> </thead> <tbody> <tr ng-repeat="user in users | filter:{'name':search_name}|filter:{'number':search_num}|filter:{'city':search_city}|filter:{'status':search_status}| filter: filterByMonth| orderBy: id|orderBy: price_order_type|orderBy: time_order_type"> <td><input ng-model="user.state" type="checkbox"></td> <td>{{user.id}}</td> <td>{{user.show_name}}</td> <td>{{user.name}}</td> <td>{{user.number}}</td> <td>{{user.price| currency: "¥"}}</td> <td>{{user.city}}</td> <td>{{user.time}}</td> <td> <span ng-show="user.status=='待发货'" ng-click="deliver(user.id)"> <a href="javascript: void(0);">发货</a> </span> <span ng-show="user.status=='已发货'">已发货</span> <span ng-show="user.status=='已收货'">已收货</span> </td> </tr> </tbody> </table> <div id="add_show" ng-show="isShowAddOrderForm"> <b>新增订单</b> <div id="add_from" > <span>商品名</span><input type="text" placeholder="6-20个字符" ng-model="add_show_name" ng-style="show_name_style"><br> <span>用户名</span><input type="text" placeholder="4-16个字符" ng-model="add_name" ng-style="name_style"><br> <span>手机号</span><input type="text" ng-model="add_number" ng-style="number_style"><br> <span style="margin-left: 16px;">城市</span> <select ng-model="add_city" ng-style="city_style"> <option value="">选择城市</option> <option>北京</option> <option>上海</option> <option>天津</option> <option>重庆</option> <option>深圳</option> </select> <div id="add_erro" ng-show="erro_show"> <ul> <li ng-show="l1">商品名不能为空</li> <li ng-show="l2">商品名必须是6-20个字符</li> <li ng-show="l3">用户名不能为空</li> <li ng-show="l4">用户名必须是4-16个字符</li> <li ng-show="l5">手机号不能为空</li> <li ng-show="l6">手机号格式不正确</li> <li ng-show="l7">请选择城市</li> </ul> </div> </div> <input type="button" value="提交" ng-click="sub()" id="button"> </div> </div> </body> </html>