查询

来源：互联网发布：centos配置vncserver 编辑：程序博客网时间：2024/04/28 13:08
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        table{            border-collapse: collapse;        }        select{            height: 22px;            border-radius: 5px;        }        input{            border-radius: 5px;            height: 20px;        }        button{            background-color: green;            border-radius: 5px;            color: white;            border:none;        }        tr{            height: 30px;        }        th{            padding-right: 20px;            padding-left: 20px;            line-height: 25px;        }        td{            border: 1px solid black;            font-weight: 600;        }        .span{            padding-top: 10px;            padding-left: 20px;            font-weight: 600;            padding-right: 10px;        }        li{            margin-left: 20px;        }    </style>    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>    <script>        var myapp=angular.module("myapp",[]);        myapp.controller("myCtrl",function ($scope) {            $scope.data=[                {"chack":false,"ID":"1","name":"iPhone4","username":"张三","tel":"15111111111","price":4999,"city":"北京","datatime":"08-01 10:00","status":true},                {"chack":false,"ID":"2","name":"小米6","username":"李四","tel":"152222222222","price":2999,"city":"上海","datatime":"08-02 10:00","status":true},                {"chack":false,"ID":"3","name":"华为p9","username":"王五","tel":"15333333333","price":3999,"city":"天津","datatime":"08-03 10:00","status":false},                {"chack":false,"ID":"4","name":"OPPO R11","username":"赵六","tel":"154444444444","price":4999,"city":"重庆","datatime":"09-04 10:00","status":null},                {"chack":false,"ID":"5","name":"VIVO","username":"周七","tel":"1566666666666","price":2999,"city":"深圳","datatime":"10-04 10:00","status":false}            ];            //城市查找            $scope.citysize="选择城市";            $scope.cityFun=function(item){                //return true;                if($scope.citysize!="选择城市"){                    if($scope.citysize==item.city){                        return true;                    }else{                        return false;                    }                }else{                    return true;                }            };            //状态查找            $scope.statussize="选择状态";            $scope.statusFun=function(item){                //return false;                if($scope.statussize!="选择状态"){                    if(item.status==true&&$scope.statussize=="待发货"){                        return true;                    }else if(item.status==null&&$scope.statussize=="已收货"){                        return true;                    }else if(item.status==false&&$scope.statussize=="已发货"){                        return true;                    }                }else{                    return true;                }            };            //全选，反选            $scope.checkBtn=false;            $scope.checkAll=function(){                console.log($scope.checkBtn);                if($scope.checkBtn==true){                    for(var i=0;i<$scope.data.length;i++){                        $scope.data[i].chack=true;                    }                }else{                    for(var i=0;i<$scope.data.length;i++){                        $scope.data[i].chack=false;                    }                }            }            //计数功能            var n=0;            $scope.fx=function(index){                //console.log(index);                if($scope.data[index].check==true){                    n++;                }else{                    n--;                }                console.log(n);                if(n==$scope.data.length){                    $scope.checkBtn=true;                }else{                    $scope.checkBtn=false;                }            };            //添加            $scope.addup=function () {                $scope.a=true;            }            $scope.addpush=function () {                $scope.data.push({                    ID:$scope.data.length+1,                    name: $scope.newname,                    username: $scope.newusername,                    tel: $scope.newtel,                    price: 3999,                    city:$scope.xuanze,                    chack: false,                    datatime:"10-25 12:00",                    status:true                });                $scope.a=false;            }            //批量删除            $scope.delect=function(){                for(var i=0;i<$scope.data.length;i++){                    if($scope.data[i].chack==true){                        $scope.data.splice(i,1);                        i--;                    }                }            };            //批量发货            $scope.setstatus=function(){                for(var i=0;i<$scope.data.length;i++){                    if($scope.data[i].status==true&&$scope.data[i].chack==true){                        $scope.data[i].status=false;                    }                }            };            $scope.dianji=function (index) {                for(var i=0;i<$scope.data.length;i++){                    $scope.data[index].status=false;                }            }            /*排序功能的实现*/            $scope.namenext="";            $scope.clickid=function (b,c,d) {                $scope.b=true;                $scope.c=false;                $scope.d=false;            }            $scope.clickprice=function (b,c,d) {                $scope.b=false;                $scope.c=true;                $scope.d=false;            }            $scope.clickdatatime=function (b,c,d) {                $scope.b=false;                $scope.c=false;                $scope.d=true;            }        });    </script></head><body ng-app="myapp" ng-controller="myCtrl"><input type="text" placeholder="用户名搜索" ng-model="namesou"><input type="text" placeholder="手机号搜索" ng-model="telsou"><select ng-model="citysize">    <option>选择城市</option>    <option>北京</option>    <option>天津</option>    <option>上海</option>    <option>重庆</option>    <option>深圳</option></select><select ng-model="statussize">    <option>选择状态</option>    <option>待发货</option>    <option>已发货</option>    <option>已收货</option></select><select>    <option>开始月份</option>    <option>01</option>    <option>02</option>    <option>03</option>    <option>04</option>    <option>05</option>    <option>06</option>    <option>07</option>    <option>08</option>    <option>09</option>    <option>10</option>    <option>11</option></select><span>-</span><select>    <option>结束月份</option>    <option>02</option>    <option>03</option>    <option>04</option>    <option>05</option>    <option>06</option>    <option>07</option>    <option>08</option>    <option>09</option>    <option>10</option>    <option>11</option>    <option>12</option></select><br><button ng-click="addup()" style="margin-top: 10px;margin-bottom: 10px;">新增订单</button><button ng-click="setstatus()" style="margin-top: 10px;margin-bottom: 10px;">批量发货</button><button ng-click="delect()" style="margin-top: 10px;margin-bottom: 10px;">批量删除</button><table>    <thead style="background-color: dimgray">    <tr>        <th><input type="checkbox" ng-model="checkBtn" ng-click="checkAll()"></th>        <th>ID<button ng-click="clickid()" style="font-size: 12px; height: 17px">排序</button></th>        <th>商品名</th>        <th>用户名</th>        <th>手机号</th>        <th>价格<button ng-click="clickprice()" style="font-size: 12px; height: 17px">排序</button></th>        <th>城市</th>        <th>下单时间<button ng-click="clickdatatime()" style="font-size: 12px; height: 17px">排序</button></th>        <th>状态</th>    </tr>    </thead>    <tbody>    <tr ng-repeat="item in data|filter:{username:namesou}|filter:{tel:telsou}|filter:cityFun|filter:statusFun|orderBy:clickprice($b):clickid($c):clickdatatime($d)">        <td><input type="checkbox" ng-model="item.chack" ng-click="fx($index)"></td>        <td ng-model="ID">{{item.ID}}</td>        <td>{{item.name}}</td>        <td>{{item.username}}</td>        <td>{{item.tel}}</td>        <td ng-model="price">{{item.price|currency:'￥'}}</td>        <td>{{item.city}}</td>        <td ng-model="datatime">{{item.datatime}}</td>        <td><a href="#"ng-if="item.status==true" ng-click="dianji($index)">发货</a><span ng-if="item.status==null">已收货</span><span ng-if="item.status==false">已发货</span></td>    </tr>    </tbody></table><div style="margin: 0 auto;width: 350px;height: 450px;border: 1px solid black" ng-show="a==true">    <span class="span">新增订单</span><br><br>    <span class="span">商品名</span><input type="text" ng-model="newname" placeholder="6-20个字符"><br>    <span class="span">用户名</span><input type="text" ng-model="newusername" placeholder="4-16个字符"><br>    <span class="span">手机号</span><input type="number" ng-model="newtel"><br>    <span class="span">城市</span>    <select ng-model="xuanze">        <option>选择城市</option>        <option>北京</option>        <option>天津</option>        <option>上海</option>        <option>重庆</option>        <option>深圳</option>    </select><br>    <ul style="background-color: lightpink;border: 1px solid  white;padding: 20px;margin-left: 20px;margin-right: 20px;border-radius: 5px;width: 250px">        <li>商品名不能为空！</li>        <li>商品名必须是6-20个字符！</li>        <li>用户名不能为空</li>        <li>用户名必须是4-16个字符！</li>        <li>手机号不能为空！</li>        <li>手机号格式不正确！</li>        <li>请选择城市！</li>    </ul>    <button ng-click="addpush()" style="margin-left: 50px">提交</button></div></body></html>
阅读全文
0 0