表格发货

最新推荐文章于 2024-08-07 21:22:06 发布
Liuxb_zao
最新推荐文章于 2024-08-07 21:22:06 发布
阅读量447
点赞数
CC 4.0 BY-SA版权
本文链接：https://blog.youkuaiyun.com/Liuxb_zao/article/details/78348981
本文介绍了一个使用AngularJS实现的订单管理系统，该系统具备强大的筛选、排序功能，并支持新增订单及状态更新操作。通过实例展示了如何整合HTML、CSS与AngularJS，以实现一个交互式的订单管理界面。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="angular-1.3.0.js"></script>
    <style>
        .in1{
            border:1px solid gray;
            border-radius: 4px;
        }
        .even{
            background-color: #999999;
        }
        .odd{
            background-color: #EEEEEE;
        }
        .form {
            width: 460px;
            border: 1px solid #999;
            margin: 0 auto;
        }
        .form .label {
            display: block;
            float: left;
            width: 80px;
            height: 40px;
            line-height: 40px;
            text-align: end;
        }

        .form .txt {
            display: block;
            float: left;
            width: 340px;
            height: 40px;
            line-height: 40px;
            padding-left: 16px;
        }

        .form input {
            width: 312px;
            height: 24px;
            border: 1px solid #999;
            border-radius: 4px;
            padding-left: 8px;
        }

        .form select {
            width: 64px;
            height: 24px;
            border: 1px solid #999;
            border-radius: 4px;
        }

        .form button {
            width: 56px;
            height: 24px;
            background-color: green;
            border: 0;
            border-radius: 4px;
            color: white;
        }

        .form .errTips {
            width: 250px;
            background-color: lightpink;
            color: darkred;
            border-radius: 4px;
            margin-left: 96px;
            margin-top: 6px;
            margin-bottom: 4px;
            padding: 16px 48px;
        }
    </style>
    <script>
        var app=angular.module("myApp",[]);
        var data=[
            {
                done:false,
                id:1,
                goodsname:"iPhone4",
                name:"张三",
                phonenumber:12335822645,
                price:4999,
                city:"北京",
                time:"08-01 10:00",
                zt:"待发货"
            },
            {
                done:false,
                id:2,
                goodsname:"小米6",
                name:"李四",
                phonenumber:15035822645,
                price:2999,
                city:"北京",
                time:"08-02 10:00",
                zt:"待发货"
            },
            {
                done:false,
                id:3,
                goodsname:"华为P9",
                name:"王五",
                phonenumber:18235822645,
                price:3999,
                city:"上海",
                time:"09-04 10:00",
                zt:"已发货"
            },
            {
                done:false,
                id:4,
                goodsname:"OPPO R11",
                name:"赵六",
                phonenumber:15135822645,
                price:4999,
                city:"天津",
                time:"09-04 10:00",
                zt:"已收货"
            },
            {
                done:false,
                id:5,
                goodsname:"Vivo X9",
                name:"周七",
                phonenumber:13835822645,
                price:2999,
                city:"重庆",
                time:"10-04 10:00",
                zt:"已发货"
            }
        ]
        app.controller("myCtrl",function ($scope) {
            $scope.data = data;
            $scope.checkAll=function () {
                for(var i=0;i<$scope.data.length;i++)
                {
                    if($scope.chec==true)
                    {
                        $scope.data[i].done=true;
                    }
                    else{
                        $scope.data[i].done=false;
                    }
                }
            }
            $scope.filterByMonth = function (data) {
                if ($scope.beginyue == undefined || $scope.beginyue == "") {
                    return true;
                }

                if ($scope.endyue == undefined || $scope.endyue == "") {
                    return true;
                }

                if ($scope.beginyue > $scope.endyue) {
                    return true;
                }

                var month = data.time.substr(0, data.time.indexOf("-"));
                month = parseInt(month);
                return (month >= $scope.beginyue && month <= $scope.endyue);
            };
            // 将待发货，改成已发货
            $scope.deliver = function (id) {
                for (var i in $scope.data) {
                    if ($scope.data[i].id == id) {
                        $scope.data[i].zt = "已发货";
                    }
                }
            };
        });
    </script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
     <div>
         <div style="margin-left: 200px">
             <input class="in1" type="text" placeholder="用户名搜索" ng-model="names" style="height: 18px">
             <input class="in1" type="text" placeholder="手机号搜索" ng-model="phones"style="height: 18px">
             <select  class="in1" style="height: 25px" ng-model="citys"><option value="">选择城市</option><option value="北京">北京</option><option value="上海">上海</option><option value="天津">天津</option><option value="重庆">重庆</option></select>
             <select class="in1" style="height: 25px" ng-model="zts"><option value="">选择状态</option><option value="待发货">待发货</option><option value="已发货">已发货</option><option value="已收货">已收货</option></select>
             <select class="in1" style="height: 25px" ng-model="beginyue">
                 <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 class="in1" style="height: 25px"ng-model="endyue">
             <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 class="in1" style="height: 25px" ng-model="hh"><option value="-">ID倒序</option> <option value="">ID正序</option></select>
         </div>
         <br>
         <div  style="margin-left: 200px">
             <button style="background-color: forestgreen;color: white" class="in1" ng-click="addgoods()">新增订单</button>
             <button style="background-color: forestgreen;color: white" class="in1">批量发货</button>
         </div>
         <br>
         <div  style="margin-left: 200px">
             <table width="800px" cellspacing="0" rules="cols" border="1px">
                 <thead>
                 <tr style="background-color: dimgray">
                     <td ><input type="checkbox"ng-click="checkAll()" ng-model="chec"></td>
                     <td>ID</td>
                     <td >商品名</td>
                     <td >用户名</td>
                     <td >手机号</td>
                     <td >价格<button style="background-color: forestgreen;color: white" class="in1">排序</button></td>
                     <td >城市</td>
                     <td >下单时间<button style="background-color: forestgreen;color: white" class="in1">排序</button></td>
                     <td >状态</td>
                 </tr>
                 </thead>
                 <tr ng-repeat="item in data|filter:{name:names}|orderBy:hh+'id'|filter:{phonenumber:phones}|filter:{city:citys}|filter:{zt:zts}|filter: filterByMonth"ng-class="{even:!$even,odd:!$odd}">
                     <td><input type="checkbox" ng-model="item.done"></td>
                     <td>{{item.id}}</td>
                     <td>{{item.goodsname}}</td>
                     <td>{{item.name}}</td>
                     <td>{{item.phonenumber}}</td>
                     <td style="color: red">{{item.price|currency:"¥"}}</td>
                     <td>{{item.city}}</td>
                     <td>{{item.time}}</td>
                     <td><span ng-show="item.zt=='待发货'" ng-click="deliver(item.id)">
                         <a href="javascript:void(0);">发货</a>
                </span>
                         <span ng-show="item.zt=='已发货'">已发货</span>
                         <span ng-show="item.zt=='已收货'">已收货</span>
                     </td></td>
                 </tr>
             </table>
         </div>
         <br>
         <div>
             <div class="form">
                 <div>
                     <span class="label">新增订单</span>
                     <span class="txt"></span>
                 </div>
                 <div style="clear: both"></div>
                 <div>
                     <span class="label">商品名</span>
                     <span class="txt"><input type="text" placeholder="6-20个字符"/></span>
                 </div>
                 <div style="clear: both"></div>
                 <div>
                     <span class="label">用户名</span>
                     <span class="txt"><input type="password" placeholder="4-16个字符" class="formErr"/></span>
                 </div>
                 <div style="clear: both"></div>
                 <div>
                     <span class="label">手机号</span>
                     <span class="txt"><input type="text"/></span>
                 </div>
                 <div style="clear: both"></div>
                 <div>
                     <span class="label">城市</span>
                     <span class="txt">
   <select>
   <option>北京</option>
   <option>上海</option>
   <option>天津</option>
   <option>重庆</option>
   </select>
   </span>
                 </div>
                 <div style="clear: both"></div>
                 <div class="errTips">
                     <ul>
                         <li>商品名不能为空！</li>
                         <li>商品名必须是6-20个字符！</li>
                         <li>用户名不能为空！</li>
                         <li>用户名必须是4-16个字符！</li>
                         <li>手机号不能为空！</li>
                         <li>手机号格式不正确！</li>
                         <li>请选择城市！</li>
                     </ul>
                 </div>
                 <div style="clear: both"></div>
                 <div>
                     <span class="label"></span>
                     <span class="txt"><button>提交</button></span>
                 </div>
                 <div style="clear: both"></div>
             </div>
         </div>
     </div>



</body>
</html>