<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>周三-练习题</title> <script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> * { font-size: 13px; color: #2F4F4F; } body { background-image: url(img/5ab1258a590c8.gif); background-size: cover; } #main { width: 1000px; margin: 0 auto; background-color: rgba(200, 200, 200, 0.3); text-align: center; } tr:nth-child(even) { background-color: whitesmoke; } tr:nth-child(odd) { background-color: white; } #bt { background-color: lightgray; } table { width: 95%; margin: 0 auto; padding-bottom: 50px; } [type=button] { border: 0px; border-radius: 6px; cursor: pointer; background-color: lightpink; } [value="已发货"] { background-color: lightgreen; } [value="未发货"] { background-color: lightblue; } #top { display: flex; justify-content: space-around; width: 750px; margin: 0 auto; } fieldset{ width: 800px; margin: 0 auto; } [value="▽"]{ background-color: lightcoral; } </style> </head> <body ng-app="myApp" ng-controller="myCtrl"> <div id="main"><br /><br /> <div id="top"> <input type="button" value="新增订单" ng-click="clickAdd()" /> <input type="button" value="批量删除" ng-click="delMore()" /> <input type="text" placeholder="按商品名称查询" ng-model="selectByGname" /> <input type="text" placeholder="按手机号查询" ng-model="selectByTel" /> <select ng-model="selectByStat"> <option value="">---请选择---</option> <option value="已发货">已发货</option> <option value="未发货">未发货</option> </select> </div><br /><br /> <fieldset ng-show="isShowField"> <legend>添加订单信息</legend> 商品名:<input type="text" ng-model="aGname" id="aGname" /><br /><br /> 用户名: <input type="text" ng-model="aUname" id="aUname" /><br /><br /> 手机号: <input type="text" ng-model="aTel" id="aTel" /><br /><br /> 价格: <input type="text" ng-model="aPrice" id="aPrice" /><br /><br /> 城市: <select ng-model="province" id="province"> <option value="">---请选择省份---</option> </select> <select ng-model="aCity" id="city"> <option value="">---请选择城市---</option> </select><br /><br /> <input type="button" value="保存" ng-click="add()" /> </fieldset><br /><br /> <table border="0" cellspacing="1" cellpadding="10px" ng-show="isShowTable"> <tr id="bt"> <th><input type="checkbox" ng-click="cb_all()" id="cb_all" /></th> <th>id <input type="button" value="△" id="orderById" ng-click="orderById()" /></th> <th>商品名</th> <th>用户名</th> <th>手机号</th> <th>价格 <input type="button" value="△" id="orderByPrice" ng-click="orderByPrice()" /></th> <th>城市</th> <th>下单时间 <input type="button" value="△" id="orderByRegdate" ng-click="orderByRegdate()" /></th> <th>状态</th> </tr> <tr ng-repeat="x in goods|filter:{gname:selectByGname,tel:selectByTel,state:selectByStat}|orderBy:orderby"> <td><input type="checkbox" class="cb" value="{{x.id}}" ng-click="cbb()" /></td> <td>{{x.id}}</td> <td>{{x.gname}}</td> <td>{{x.uname}}</td> <td>{{x.tel}}</td> <td>{{x.price}}</td> <td>{{x.city}}</td> <td>{{x.regdate|date:"MM-dd hh:mm:ss"}}</td> <td><input type="button" value="{{x.state}}" ng-click="stateChange(x.id)" /></td> </tr> </table> </div> <script type="text/javascript"> var app = angular.module("myApp", []); app.controller("myCtrl", function($scope, $http) { //http请求数据 $http.get("http://result.eolinker.com/lKgJQ8Zec38423e5603b8e055d1193a8127c0c060bb1b55?uri=goodstest") .then(function(response) { $scope.goods = response.data; }); //初始化talble_show值 $scope.isShowTable = true; //初始化field_show值 $scope.isShowField = false; //点击“新增订单”按钮 $scope.clickAdd = function(){ if ($scope.isShowField == false) { $scope.isShowField = true; }else { $scope.isShowField = false; } } //全选 $scope.cb_all = function(){ var cbs = $(".cb"); if ($("#cb_all").prop("checked")) { cbs.each(function(){ cbs.prop("checked",true); }) } else{ cbs.each(function(){ cbs.prop("checked",false); }) } } //单选 $scope.cbb = function(){ var flag = true; var cbs = $(".cb"); var cb_all = $("#cb_all"); for (var i = 0; i < cbs.length; i++) { if (!cbs[i].checked) { flag = false; } } if (flag) { cb_all.prop("checked",flag); } else{ cb_all.prop("checked",flag); } } //排序 var isOrder = true; //根据id $scope.orderById = function(){ if (isOrder) { $scope.orderby = "id"; $("#orderById").val("▽"); isOrder = false; } else{ $scope.orderby = "-id"; $("#orderById").val("△"); isOrder = true; } } //根据价格 $scope.orderByPrice = function(){ if (isOrder) { $scope.orderby = "price"; $("#orderByPrice").val("▽"); isOrder = false; } else{ $scope.orderby = "-price"; $("#orderByPrice").val("△"); isOrder = true; } } //根据下单时间 $scope.orderByRegdate = function(){ if (isOrder) { $scope.orderby = "regdate"; $("#orderByRegdate").val("▽"); isOrder = false; } else{ $scope.orderby = "-regdate"; $("#orderByRegdate").val("△"); isOrder = true; } } //改变状态 $scope.stateChange = function(id){ for (var i = 0; i < $scope.goods.length; i++) { if ($scope.goods[i].id == id) { $scope.goods[i].state = "已发货"; break; } } } //批量删除 $scope.delMore = function(){ var cbs = $(".cb:checked"); if (cbs.length == 0) { alert("请选中数据再删除!"); return; } if (!confirm("是否删除这些数据?")) { return; } cbs.each(function(){ for (var i = 0; i < $scope.goods.length; i++) { if ($scope.goods[i].id == $(this).val()) { if ($scope.goods[i].state == "已发货") { $scope.goods.splice(i,1); break; } } } }) } //加载省份下拉框选项 var datas = new Array(); datas["北京"] = ["海淀","大兴","朝阳"]; datas["河南"] = ["郑州"]; datas["上海"] = ["浦东","黄埔"]; for (province in datas) { $("#province").append("<option>"+province+"</option>"); } //下拉框改变加载市的下拉选项 $("#province").change(function(){ var province = $(this).val(); var citys = datas[province]; $("#city").empty(); $("#city").append("<option>---请选择城市---</option>"); for (var i = 0; i < citys.length; i++) { $("#city").append("<option>"+citys[i]+"</option>"); } }) //添加 $scope.add = function(){ var flag = true; var gname = $scope.aGname; if (gname==null || gname=="" || gname.length==0) { $("#aGname").prop("placeholder","商品名不能为空!"); flag = false; }else { flag = true; } var uname = $scope.aUname; if (uname==null || uname=="" || uname.length==0) { $("#aUname").prop("placeholder","用户名不能为空!"); flag = false; }else { flag = true; } var tel = $scope.aTel; if (tel==null || tel=="" || tel.length==0) { $("#aTel").prop("placeholder","手机号不能为空!"); flag = false; }else { flag = true; } var price = $scope.aPrice; if (price==null || price=="" || price.length==0) { $("#aPrice").prop("placeholder","价格不能为空!"); flag = false; }else { flag = true; } var city = $scope.aCity; var d = new Date(); var str = ""; str += contactTime(d.getMonth()+1) + "-" +contactTime(d.getMonth())+" "+contactTime(d.getHours())+":"+contactTime(d.getMinutes())+":"+contactTime(d.getSeconds()); var shop = {}; shop.id = $scope.goods[$scope.goods.length-1].id++; shop.gname = gname; shop.uname = uname; shop.tel = tel; shop.price = price; shop.city = city; shop.state = "未发货"; shop.regdate = str; if (flag) { $scope.goods.unshift(shop); }else { alert("信息不完善!"); } } }) function contactTime(dd){ if (dd<10) { return "0" + dd; } return dd; } </script> </body> </html>
订单发货试手
最新推荐文章于 2023-05-29 17:58:12 发布