商品订单（增删改查）：新增订单；批量删除，发货；模糊查询，下拉菜单内容过滤（含时间）；全选反选，列名排序

需求：

1、完成页面

2、点击“新增订单”，弹出上框，新增订单状态都是“待发货”

3、提交订单时，检查表单，提示错误内容，并且将文本框颜色变红色

4、选择状态查询：待发货、已发货、已收货

5、点击“发货”按钮，将“待发货”状态改成“已发货”

6、通过Checkbox全选和全不选

7、点击“批量删除”按钮，删除选中的订单

8、选择“开始月份”：01~12

9、选择“结束月份”：01~12，查询开始月份和结束月份之间的订单

效果图：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品订单（增删改查）：新增订单；批量删除，发货；模糊查询，下拉菜单内容过滤（含时间）；全选反选，列名排序</title>
    <style type="text/css">
        .first{
            background-color: #007aff;
        }
        /*  表格奇数行变 中绿 色     */
        tbody tr:nth-child(odd){
            background-color: #00FA9A;
        }
        /*  表格偶数行变 弱绿 色   */
        tbody tr:nth-child(even){
            background-color: #98FB98;
        }
        .li{
            background-color:#FEB6C1;
            font-size: 15px;
            color:#93212E;
        }
        .inputErrorColor{
            border:1px solid #ff3b30;
        }
        .inputSuccessColor{
            border:1px solid black;
        }
    </style>
    <script src="../js/jquery-2.1.0.js"></script>
    <script type="text/javascript">
        $(function () {
            /*  表格第一行变 天蓝 色     */
            $("thead tr").addClass("first");
        });
    </script>
    <script src="../js/angular.js"></script>
    <script>
        var app = angular.module("myApp",[]);
        app.controller("myCtrl",function ($scope) {
            $scope.Products = [
                {id:1,goodsName:"IPhone5S",userName:"果果",tel:13112332100,price:4999,city:"北京",time:"08-01 10:00",goodsState:"发货",state:false},
                {id:2,goodsName:"小米6",userName:"米粉",tel:15222991111,price:2999,city:"深圳",time:"08-02 10:00",goodsState:"发货",state:false},
                {id:3,goodsName:"华为P9",userName:"华仔",tel:13678953456,price:3999,city:"上海",time:"09-03 10:00",goodsState:"已发货",state:false},
                {id:4,goodsName:"OPPO R11",userName:"欧弟",tel:18631090582,price:4998,city:"天津",time:"09-04 10:00",goodsState:"已收货",state:false},
                {id:5,goodsName:"VIVO",userName:"朵唯",tel:15810266912,price:2998,city:"重庆",time:"10-04 10:00",goodsState:"发货",state:false}
            ];

            //1. 选择城市
            $scope.selectCity = "选择城市";
            $scope.CityTest = function (city,selectCity) {
                if(selectCity == "选择城市"){
                    return true;
                }else {
                    if(city == selectCity){
                        return true;
                    }else {
                        return false;
                    }
                }
            }
            //2. 选择状态查询：待发货、已发货、已收货
            $scope.selectState = "选择状态";
            $scope.StateTest = function (state,selectState) {
                if(selectState == "选择状态"){
                    return true;
                }else {
                    if(state == selectState){
                        return true;
                    }else {
                        return false;
                    }
                }
            }

            // 3. 选择“开始月份”：01~12 “结束月份”：01~12，查询开始月份和结束月份之间的订单
            $scope.startMonth = "开始月份";
            $scope.endMonth = "结束月份";
            $scope.filterMonth = function (index) {
                //获得开始和结束的时间月份
                var time = $scope.Products[index].time;
                var month = parseInt(time.split("-")[0]);
                if($scope.startMonth == "开始月份" || $scope.endMonth == "结束月份"){
                    return true;
                }else {
                    var startTime = parseInt($scope.startMonth);
                    var endTime = parseInt($scope.endMonth);
                    //当选择的月份时间在开始和结束的月份之间时，就返回内容
                    if(month >= startTime && month <= endTime){
                        return true;
                    }else {
                        return false;
                    }
                }
            }

            // 4. 开始复选框绑定的值默认是全不选
            $scope.checkedAll = false;
            var a=0;
            //正着全选
            $scope.selectAll =function(){
                if($scope.checkedAll){
                    for(var i=0;i<$scope.Products.length;i++){
                        $scope.Products[i].state = true;
                        a++;
                    }
                }else{
                    for(var i=0;i<$scope.Products.length;i++){
                        $scope.Products[i].state = false;
                        a--;
                    }
                }
            };

            //反着全选
            $scope.selectOne = function(index){
                if($scope.Products[index].state){
                    a++;
                }else{
                    a--;
                }
                if(a==$scope.Products.length){
                    //如果小按钮全部选中了,就让大的全选按钮也选中
                    $scope.checkedAll = true;
                }else{
                    $scope.checkedAll = false;
                }
            };

            //批量发货点击事件
            $scope.plFahuo = function(){
                if(a==0){
                    alert("请选择要批量发货的商品!");
                }else{
                    if(confirm("您是否确定要批量发货选中商品？")){
                        for(var i=0;i<$scope.Products.length;i++){
                            if($scope.Products[i].state){
                                $scope.Products[i].goodsState = "已发货";
                                $scope.Products[i].state = false;
                                a--;
                            }
                        }
                        $scope.checkedAll = false;
                    }
                }
            };

            //批量删除点击事件
            $scope.delSelect = function(){
                if(a==0){
                    alert("请选择要批量删除的商品!");
                }else{
                    if(confirm("您是否确定要批量删除选中商品？")) {
                        for (var i = 0; i < $scope.Products.length; i++) {
                            if ($scope.Products[i].state) {
                                $scope.Products.splice(i, 1);
                                i--;//会出现下标越界,所以i--
                                a--;
                            }
                        }
                        $scope.checkedAll = false;
                    }
                }
            };
            /* 5. 使用AngularJS过滤器orderBy对商品进行排序：具体是点击每一列标题名字时，产品进行正序倒序排列。*/
            $scope.sortFlag = "-";           //正序标识符
            $scope.sortName = "name";       //根据商品名称倒序排序
            $scope.sortProducts = function (columnName) {
                $scope.sortName = columnName;
                if($scope.sortFlag == "-"){
                    $scope.sortFlag = "";
                }else {
                    $scope.sortFlag = "-";
                }
            };

            // 6. 点击“发货”按钮，将“待发货”状态改成“已发货”
            $scope.changeState = function (index) {
                $scope.Products[index].goodsState = "已发货";
            }

            $scope.showTable = false;
            // 7、点击“新增订单”，弹出 新增信息表，新增订单状态都是“待发货”
            $scope.addGoods = function () {
                $scope.showTable = true;   //弹出 新增信息表
                //输入框的样式
                $scope.goodsNameClass = "";
                $scope.userNameClass = "";
                $scope.telClass = "";

                $scope.goodsName = "";
                $scope.userName = "";
                $scope.tel = "";
                $scope.city = "选择城市";
                $scope.state = false;
                $scope.flag1 = false;     //标志位
                $scope.flag2 = false;     //标志位
                $scope.flag3 = false;     //标志位
                $scope.flag4 = false;     //标志位
                $scope.flag5 = false;     //标志位
                $scope.flag6 = false;     //标志位
                $scope.flag7 = false;     //标志位
                
                $scope.sub = function () {
                    //（1）判断商品名是否为空
                    if($scope.goodsName == null || $scope.goodsName == ""){
                        $scope.flag1 = true;
                        $scope.goodsNameClass = "inputErrorColor";
                    }else {
                        $scope.flag1 = false;
                        $scope.goodsNameClass = "inputSuccessColor";
                        //判断商品名是否符合格式 6-20个字符
                        if($scope.goodsName.length < 6 ||  $scope.goodsName.length > 20){
                            $scope.flag2 = true;
                            $scope.goodsNameClass = "inputErrorColor";
                        }else {
                            $scope.flag2 = false;
                            $scope.goodsNameClass = "inputSuccessColor";
                        }
                    }
                    //（2）判断用户名是否为空
                    if($scope.userName == null || $scope.userName == ""){
                        $scope.flag3 = true;
                        $scope.userNameClass = "inputErrorColor";
                    }else {
                        $scope.flag3 = false;
                        $scope.userNameClass = "inputSuccessColor";
                        //判断用户名是否符合格式 4-16个字符
                        if($scope.userName.length < 4 ||  $scope.userName.length > 16){
                            $scope.flag4 = true;
                            $scope.userNameClass = "inputErrorColor";
                        }else {
                            $scope.flag4 = false;
                            $scope.userNameClass = "inputSuccessColor";
                        }
                    }
                    //（3）判断手机号是否为空
                    if($scope.tel == null || $scope.tel == ""){
                        $scope.flag5 = true;
                        $scope.telClass = "inputErrorColor";
                    }else {
                        $scope.flag5 = false;
                        $scope.telClass = "inputSuccessColor";
                        //判断手机号是否符合格式
                        if($scope.tel.length == 11){
                            //判断手机号是否为数字
                            if(isNaN($scope.tel)){
                                $scope.flag6 = true;
                                $scope.telClass = "inputErrorColor";
                            }else {
                                $scope.flag6 = false;
                                $scope.telClass = "inputSuccessColor";
                            }
                        }else {
                            $scope.flag6 = true;
                            $scope.telClass = "inputErrorColor";
                        }
                    }
                    //（4）选择城市
                    if($scope.city == "选择城市"){
                        $scope.flag7 = true;
                    }else {
                        $scope.flag7 = false;
                    }

                    //满足条件后添加商品
                    if($scope.flag1 != true && $scope.flag2 != true  && $scope.flag3 != true  && $scope.flag4 != true  && $scope.flag5 != true  && $scope.flag6 != true  && $scope.flag7 != true ){
                        //全显示，格式全不正确，才能进来
                        //遍历数据源，拿到商品id
                        var goodsID = 0;
                        for(index in $scope.Products){
                            if($scope.Products[index].id > goodsID){
                                goodsID = $scope.Products[index].id;
                            }
                        }
                        alert("添加成功！");
                        //添加发货时间
                        var date = new Date();
                        var month = date.getMonth()+1;
                        var day = date.getDate();
                        var hours = date.getHours();
                        var minute = date.getMinutes();
                        var newTime = month+"-"+day+" "+hours+":"+minute;
                        var newGood = {
                            id:goodsID+1,
                            goodsName:$scope.goodsName,
                            userName:$scope.userName,
                            tel:$scope.tel,
                            price:3668.00,
                            city:$scope.city,
                            time:newTime,
                            goodsState:"发货",
                            state:false
                        };
                        //添加新数据
                        $scope.Products.push(newGood);
                        $scope.showTable = false;
                    }else {
                        //提交订单时，检查表单，提示错误内容，并且将文本框颜色变红色
                        $("ul").addClass("li");
                    }
                }
            }
        });
    </script>
</head>

<body ng-app="myApp" ng-controller="myCtrl">
<center>
    <h3>商品订单信息表</h3>
    <div>
        <input placeholder="用户名搜索" ng-model="searchName">&nbsp;
        <input placeholder="手机号搜索" ng-model="searchTel"> &nbsp;
        <select  ng-model="selectCity">
            <option>选择城市</option>
            <option>北京</option>
            <option>上海</option>
            <option>重庆</option>
            <option>天津</option>
            <option>深圳</option>
        </select>&nbsp;
        <select ng-model="selectState">
            <option>选择状态</option>
            <option>发货</option>
            <option>已发货</option>
            <option>已收货</option>
        </select>&nbsp;&nbsp;
        <select ng-model="startMonth">
            <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>
            <option>12</option>
        </select>&nbsp;-
        <select ng-model="endMonth">
            <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>
            <option>12</option>
        </select>
    </div><br>
    <button ng-click="addGoods()" style="background-color: #28a54c;color: white;border: 0 solid #28a54c;float: left;margin-left: 192px;">新增订单</button>
    <button ng-click="plFahuo()" style="background-color: #28a54c;color: white;border: 0 solid #28a54c;float: left;margin-left: 18px;">批量发货</button>
    <button ng-click="delSelect()" style="background-color: #28a54c;color: white;border: 0 solid #28a54c;float: left;margin-left: 18px;">批量删除订单</button><br><br>
    <table align="center" border="1 solid #777777" cellspacing="0" cellpadding="18">
        <thead>
            <tr>
                <th><input type="checkbox" ng-model="checkedAll" ng-click="selectAll()"></th>
                <th>ID
                    <!--根据商品列名 ID 排序的点击事件-->
                    <button ng-click="sortProducts('id')" style="background-color: #28a54c;color: white;border: 0 solid #28a54c;">排序</button>
                </th>
                <th>商品名</th>
                <th>用户名</th>
                <th>手机号</th>
                <th>价格
                    <!--根据商品列名 价格 排序的点击事件-->
                    <button ng-click="sortProducts('price')"  style="background-color: #28a54c;color: white;border: 0 solid #28a54c;">排序</button>
                </th>
                <th>城市</th>
                <th>下单时间
                    <!--根据商品列名 下单时间 排序的点击事件-->
                    <button ng-click="sortProducts('time')"  style="background-color: #28a54c;color: white;border: 0 solid #28a54c;">排序</button>
                </th>
                <th>状态</th>
            </tr>
        </thead>
        <tbody align="center" >
            <!--先遍历出商品数据，再过滤子元素，实现模糊查询功能,最后根据列头标题实现排序  注意：需要使用多个ng-show指令时可以用 && 连接在一起，如下  -->
        <tr ng-repeat="goods in Products | filter:searchName | filter:searchTel | orderBy:(sortFlag+sortName)" ng-if="CityTest(goods.city,selectCity)" ng-show="StateTest(goods.goodsState,selectState) && filterMonth($index) ">
                <th><input type="checkbox" ng-model="goods.state" ng-click="selectOne($index)"></th>
                <td>{{goods.id}}</td>
                <td>{{goods.goodsName}}</td>
                <td>{{goods.userName}}</td>
                <td>{{goods.tel}}</td>
                <td>￥{{goods.price.toFixed(2)}}</td>
                <td>{{goods.city}}</td>
                <td>{{goods.time}}</td>
                <td>
                    <span ng-if="goods.goodsState == '发货'">
                        <a ng-click="changeState($index)" href="#">{{goods.goodsState}}</a>
                    </span>
                    <span ng-if="goods.goodsState == '已发货'">{{goods.goodsState}}</span>
                    <span ng-if="goods.goodsState == '已收货'">{{goods.goodsState}}</span>
                </td>
            </tr>
        </tbody>
    </table>

    <!--    比如 ng-show=“show”指令表示为方法时，内容就加上() 就是 ng-show=“show()”；表示为变量时，就是 ng-show=“show”  -->
    <div ng-show="showTable">
        <h4>新增订单表</h4>
        <table border="1 solid #777777" cellspacing="0" cellpadding="12" >
            <tr>
                <td align="right" >商品名&nbsp;&nbsp;</td>
                <td align="left" >       &nbsp;&nbsp;
                    <input ng-model="goodsName" type="text" placeholder="6-20个字符" ng-class="goodsNameClass" />
                </td>
            </tr>
            <tr>
                <td align="right">用户名&nbsp;&nbsp;</td>
                <td align="left">        &nbsp;&nbsp;
                    <input ng-model="userName" type="text" placeholder="4-16个字符" ng-class="userNameClass" />
                </td>
            </tr>
            <tr>
                <td align="right" >手机号&nbsp;&nbsp;</td>
                <td align="left" >       &nbsp;&nbsp;
                    <input ng-model="tel" placeholder="请输入手机号" ng-class="telClass"/>
                </td>
            </tr>
            <tr>
                <td align="right" >城市&nbsp;&nbsp;</td>
                <td align="left" >       &nbsp;&nbsp;
                    <select ng-model="city">
                        <option>选择城市</option>
                        <option>北京</option>
                        <option>上海</option>
                        <option>重庆</option>
                        <option>天津</option>
                        <option>深圳</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <ul>
                        <li ng-show="flag1">商品名不能为空！</li>
                        <li ng-show="flag2">商品名必须是6-20个字符！</li>
                        <li ng-show="flag3">用户名不能为空！</li>
                        <li ng-show="flag4">用户名必须是4-16个字符！</li>
                        <li ng-show="flag5">手机号不能为空！</li>
                        <li ng-show="flag6">手机号格式不正确！</li>
                        <li ng-show="flag7">请选择城市！</li>
                    </ul>
                    <button ng-click="sub()"  style="background-color: #28a54c;color: white;border: 0 solid #28a54c;">提交</button>
                </td>
            </tr>
        </table>
    </div>
 </center>
</body>
</html>

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

mvvm双向绑定实现全选和反选
//全选按钮默认未选中$scope.ischecked false;//全选按钮事件$scope.updateAllChecked function () {if ($scope.ischecked) {$scope.ischecked false;_.forEach($scope.batchData, function (n) {n.checked false;});} else {$scope.ischecked true;_.forEach($scope.bat…...
2024/4/29 0:42:28
Angular6实现复选框的全选
顾名思义全选就是点击全选按钮所有的复选框按钮都会被选中！话不多说，直接上代码这里实现点击全选表格中的选择一列的复选框全部被选中，批量操作按钮变为可编辑状态，再次点击全选则取消全选批量操作按钮变为不可编辑状态 html:<…...
2024/4/30 3:10:16
表格3：《增 + 删 + 改 + 查 + 排序 + 全选 + 反选 + 状态查询 + 模糊查询》
<!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"j…...
2024/4/29 13:06:26
埋线第二天双眼皮能用鸡蛋敷吗
...
2024/4/29 0:58:41
angularjs的全选与反选
最近项目用了angular框架，正好需要用到全选反选，在这里整理了一下...... 这里只适合刚学习angular的小伙伴们稍作参考，如有不对的地方，还请指教...... 接下来...... 上代码...... 在这里说明一下，此处是放在表格里面循…...
2024/4/28 16:34:12
通过函数实现全选和反选
通过函数和DOM实现全选和反选程序要求思路代码小结程序要求通过点击全选/反选按钮实现其他复选框的全选和反选思路 （1）创建简单的复选按钮框架，进行基础框架建构 （2）通过调用函数实现全选和反选要求 （…...
2024/4/28 2:03:47
购物车——（批量删除，全选反选，修改值）
<!DOCTYPE html><html><head><meta charset"UTF-8"><title>购物车批量删除全选反选</title><script type"text/javascript" src"js/angular.js"></script><script>var app angular.modu…...
2024/4/28 22:15:26
双眼皮做后要做睁眼运动吗
...
2024/4/27 5:41:27
ionic4.x仿京东 - 10.1.4.购物车-全选反选、保存购物车状态、商品详情跳转到购物车
一、全选反选 1.实现刚进来时，若商品前面的checkbox都选中，则全选按钮选中，只要有一个未选中，全选按钮未选中思路：购物车里的商品数量和选中的商品数量进行对比，若相等，则全选 => 要封装一个获取选中的商品数量的函数（1）在【cart.service.ts】里封装获取选…...
2024/4/28 23:04:48
angularjs操作CheckBox单选、多选、全选、反选
angularjs操作CheckBox单选、多选、全选、反选应用场景：分页查询出列表中，对已勾选的数据跳转到下一页面进行展示。CheckBox可进行单选、多选、全选、反选。当所有都勾选上时，全选按钮选上，有一条数据取消勾选时，全选…...
2024/4/28 20:06:11
双眼皮上哪家医院好啊
...
2024/4/28 22:19:58
AngualrJS 全选和反选
AngualrJS 全选和反选 2017/11/22 18:24:48 ng-checked 全选反选效果代码 <!DOCTYPE html><html lang"en"><head><meta charset"UTF-8"><title>ng-checked 全选反选</title><script type"text/javascrip…...
2024/4/28 23:31:03
双眼皮睁眼紧绷
...
2024/4/28 0:14:08
双眼皮不拆线可以吗
...
2024/4/28 11:47:15
割完双眼皮睁眼好费劲
...
2024/4/29 15:44:01
双眼皮不手术
...
2024/4/28 5:52:04
【Angular】修改密码功能实现
前言： 最近项目组需要做一个修改密码的功能，为大家介绍一下。 modify-password.html： <header class"mui-bar mui-bar-nav"><a class"mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a&…...
2024/4/28 14:54:13
切开双眼皮失败图
...
2024/4/28 13:21:44
【angular2】（1）angular-cli修改端口号
找到node_modules/angular-cli/lib/config/schema.json default值就是默认的端口 "serve": {"description": "Properties to be passed to the serve command","type": "object","properties": {"port&quo…...
2024/4/30 15:22:23
Angular 如何修改启动的端口
在默认的情况下 Angular 启动使用的是端口 4200。如果修改这个启动的端口，比如说我们希望再 4100 端口上启动？ 可以在启动的时候添加端口参数 --port。例如使用下面的启动命令： ng serve --open --port 4100 就可以让你的 Angular 应…...
2024/4/28 6:32:01

商品订单（增删改查）：新增订单；批量删除，发货；模糊查询，下拉菜单内容过滤（含时间）；全选反选，列名排序

相关文章

最新文章