表格发货

来源：互联网发布：抄袭知乎编辑：程序博客网时间：2024/04/28 01:41
<!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>
阅读全文
0 0