商品訂單（增刪改查）：新增訂單；批量刪除，發貨；模糊查詢，下拉選單內容過濾（含時間）；全選反選，列名排序

Dewey-W發表於2017-10-26

排序

需求：

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>

手寫下拉選單，模糊查詢資料
2018-09-25
SD--批量刪除訂單
2015-06-15
vue.js單選全選刪除
2018-09-15
Vue.js
jquery select下拉選單新增或者刪除option項
2017-03-31
jQuery
jquery新增或者刪除select下拉選單項程式碼
2017-02-22
jQuery
Android列表實現單選、多選、全選、取消、刪除
2018-01-31
Android
CoreData - 簡單增刪改查
2018-12-23
微信支付訂單、退款訂單、轉款訂單的查詢
2016-08-16
使用者資訊：奇偶數隔行變色，選中行變色，滑鼠變小手樣式；姓名查詢條件，過濾敏感字元；下拉選單排序；非空驗證新增資訊；點選按鈕刪除
2017-10-26
字元排序
iOS 多選刪除(附tableViewTips及單選刪除)
2019-02-18
iOSView
使用Vue實現下拉選單框批量新增選項
2020-01-18
Vue
layui前端選單構建-批量刪除-彈框填寫-樹狀選單-樹狀下拉框選擇treeSelect
2020-05-30
UI前端
刪除和新增select下拉選單option項程式碼例項
2017-03-26
swift點選Tableviewcell展開下拉選單內容
2017-12-21
SwiftView
JDBC 增刪改查程式碼過濾查詢語句
2013-12-05
JDBC
JavaScript--全選、全不選、反選、無重新整理刪除、批量刪除、即點即改入庫（在yii框架中操作）
2016-10-21
JavaScript框架
jQuery刪除select下拉選單中所有option項
2017-02-24
jQuery
javascript新增和刪除select下拉選單option項程式碼例項
2017-03-17
JavaScript
layui+ssm簡單增刪改查
2019-08-07
UISSM
MongoDB——簡單增、刪、改、查實踐
2015-01-13
MongoDB
三種方法解決純css下拉選單滑鼠移入選單內容時選單隱藏消失的問題
2020-04-24
CSS
javascript刪除select下拉選單項程式碼例項
2017-03-16
JavaScript
js如何刪除select下拉選單的所有專案
2017-03-26
JS
微信支付開發(5) 訂單查詢
2014-05-27
訂單綜合查詢之sql
2007-07-31
SQL
oracle樹形選單查詢
2012-03-15
Oracle
簡單的js反選，全選，全不選
2015-12-15
JS
使用Django開發簡單介面：文章增刪改查
2019-05-09
Django
單連結串列實現增刪改查
2020-11-16
下拉選單
2006-05-22
恢復被刪除的Word選單
2016-07-12
查詢刪除同訂單同一LINE NUMBER內有不同SHIP FORM ORG ID的處理
2010-09-25
ORM
建立支援類別下拉選單的Oracle查詢表DM
2022-03-21
Oracle
關於下拉選單查詢資料庫的問題
2009-07-07
資料庫
資料庫操作增刪改查模糊查
2007-10-06
資料庫
從微信查詢訂單狀況
2016-05-29
win10滑鼠右鍵選單欄怎麼改刪除右鍵選單欄無用選項的方法
2021-01-01
Win10
Windows 11刪除右鍵選單的新建選單的bmp影像(Bitmap image)
2024-05-27
Windows

商品訂單（增刪改查）：新增訂單；批量刪除，發貨；模糊查詢，下拉選單內容過濾（含時間）；全選反選，列名排序

相關文章