aj商品增删改查

来源：互联网发布：福彩红五图库永久域名编辑：程序博客网时间：2024/06/02 23:47
<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Title</title>  
    <style>  
        table {  
            border-collapse: collapse;  
        }  
  
        td, th {  
            width: 200px;  
            border: 1px solid gainsboro;  
            text-align: center;  
            padding: 20px;  
        }  
  
        button {  
            width: 100px;  
            height: 40px;  
            background: orange;  
            color: white;  
            border: 0px;  
            border-radius: 5px;  
        }  
  
        .search {  
            background: ghostwhite;  
            border: 1px solid gainsboro;  
            border-radius: 5px;  
            width: 1450px;  
            height: 50px;  
            line-height: 50px;  
            margin-bottom: 10px;  
        }  
  
        .search input {  
            width: 200px;  
            height: 30px;  
            color: #999;  
            border-radius: 5px;  
            margin-left: 20px;  
            border: 1px solid gainsboro;  
        }  
  
        .search button {  
            float: right;  
            margin-top: 5px;  
            margin-right: 10px;  
            background: red;  
        }  
  
        .active {  
            color: red;  
        }  
    </style>  
    <script src="angular.js"></script>  
    <script>  
        var falg=false;  
        var data =  
                [{"id": 1234, "name": 'ipad', "price": 3400, "count": 10},  
                    {"id": 1244, "name": 'aphone', "price": 6400, "count": 100},  
                    {"id": 1334, "name": 'mypad', "price": 4400, "count": 20},  
                    {"id": 8234, "name": 'zpad', "price": 8400, "count": 130},  
                ];  
        var myapp = angular.module("myapp", []);  
        myapp.controller("myCtrl", function ($scope) {  
            $scope.ycxiugai=false;  
            $scope.yctianjia=false;  
  
            /**排污*/  
            $scope.px1=function(){  
                alert($scope.paixu);  
  
                if($scope.paixu==2){  
                    falg=true;  
                }else{  
                    falg=false;  
                }  
  
                data.sort(function(a,b){  
                    if(falg){  
                        return a.count< b.count?1:-1;  
                    }else{  
                        return a.count>b.count?1:-1;  
                    }  
                });  
            }  
  
            $scope.tianjia=function(){  
                $scope.yctianjia=true;  
            }  
            $scope.xiugai=function(index){  
                var jihe=$scope.data[index];  
                $scope.x_id=jihe.id,  
                $scope.x_name="",  
                $scope.x_price="",  
                $scope.x_count="",  
                $scope.ycxiugai=true;  
                $scope.index=index;  
            }  
  
            $scope.data = data;  
            //设置页面默认显示  
            data.sort(function(a,b){  
                if(falg){  
                    return a.count< b.count?1:-1;  
                }else{  
                    return a.count>b.count?1:-1;  
                }  
            });  
            $scope.show = true;  
            //设置checkbox默认不选中  
            $scope.chk = false;  
            $scope.xuanz = false;  
            $scope.check = function (val) {  
                /*判断是否选中，然后控制下方的是否选中*/  
                if (val) {  
                    $scope.xuanz = true;  
                } else {  
                    $scope.xuanz = false;  
                }  
            }  
            $scope.search;  
            /*删除按钮*/  
            $scope.remove = function (index) {  
                /*判断是否确认删除*/  
                var b = confirm("确认删除");  
                if (b) {  
                    $scope.data.splice(index, 1);  
                }  
            }  
            $scope.del = function () {  
                /*判断是否确认删除*/  
                if ($scope.xuanz || $scope.checkD) {  
                    var b = confirm("确认删除");  
                    if (b) {  
                        //删除所有商品信息  
                        if ($scope.chk) {  
                            $scope.data.splice(0, $scope.data.length);  
                            //让商品信息管理页面为空白界面  
                            $scope.show = false;  
                        } else {  
                            for (var i = $scope.xuan1.length - 1; i >= 0; i--) {  
                                console.log($scope.xuan1[i]);  
                                for (var j = 0; j < $scope.data.length; j++) {  
                                    console.log($scope.data[j].id == $scope.xuan1[i]);  
                                    if ($scope.data[j].id == $scope.xuan1[i]) {  
                                        $scope.data.splice(j, 1);  
                                    }  
                                }  
                            }  
                        }  
                    }  
                } else {  
                    alert("先进行选中要删除的商品信息");  
                }  
            }  
            /**删除全部*/  
             $scope.shanchu=function(){  
                 var b = confirm("确认删除");  
                 if(b){  
                     $scope.data.splice(0, $scope.data.length);  
                     //让商品信息管理页面为空白界面  
                     $scope.show = false;  
                 }  
  
             }  
  
            /**添加*/  
            $scope.tianjiaan=function(){  
  
                if ($scope.t_id == undefined || $scope.t_id == "") {  
                    alert("id不能为空！");  
                    return;  
                }  
  
                if ($scope.t_name == undefined || $scope.t_name == "") {  
                    alert("name不能为空！");  
                    return;  
                }  
  
                if ($scope.t_price == undefined || $scope.t_price == "") {  
                    alert("price不能为空！");  
                    return;  
                }  
  
                if ($scope.t_count == undefined || $scope.t_count == "") {  
                    alert("count不能为空！");  
                    return;  
                }  
  
                if (!/^\d+$/.test($scope.t_id)) {  
                    alert("id必须是整数！");  
                    return;  
                }  
  
                if (!/^\d+$/.test($scope.t_price)) {  
                    alert("价格必须是整数！");  
                    return;  
                }  
                if (!/^\d+$/.test($scope.t_count)) {  
                    alert("数量必须是整数！");  
                    return;  
                }  
  
                $scope.data.push({  
                    id:$scope.t_id,  
                    name:$scope.t_name,  
                    price:$scope.t_price,  
                    count:$scope.t_count  
                });  
                data.sort(function(a,b){  
                    if(falg){  
                        return a.count< b.count?1:-1;  
                    }else{  
                        return a.count>b.count?1:-1;  
                    }  
                });  
                        $scope.t_id="",  
                        $scope.t_name="",  
                        $scope.t_price="",  
                        $scope.t_count=""  
                $scope.yctianjia=false;  
  
            }  
  
  
            /**排序*/  
            $scope.px=function(){  
                if($scope.paixu==2){  
                    falg=true;  
                }else{  
                    falg=false;  
                }  
  
                data.sort(function(a,b){  
                   if(falg){  
                       return a.count> b.count?1:-1;  
                   }else{  
                       return a.count<b.count?1:-1;  
                   }  
                });  
            }  
  
            $scope.xiugaian=function(){  
                if ($scope.x_id == undefined || $scope.x_id == "") {  
                    alert("id不能为空！");  
                    return;  
                }  
  
                if ($scope.x_name == undefined || $scope.x_name == "") {  
                    alert("name不能为空！");  
                    return;  
                }  
  
                if ($scope.x_price == undefined || $scope.x_price == "") {  
                    alert("price不能为空！");  
                    return;  
                }  
  
                if ($scope.x_count == undefined || $scope.x_count == "") {  
                    alert("count不能为空！");  
                    return;  
                }  
  
                if (!/^\d+$/.test($scope.x_id)) {  
                    alert("id必须是整数！");  
                    return;  
                }  
  
                if (!/^\d+$/.test($scope.x_price)) {  
                    alert("价格必须是整数！");  
                    return;  
                }  
                if (!/^\d+$/.test($scope.x_count)) {  
                    alert("数量必须是整数！");  
                    return;  
                }  
                $scope.ycxiugai=false;  
                $scope.data[$scope.index].name=$scope.x_name;  
                $scope.data[$scope.index].price=$scope.x_price;  
                $scope.data[$scope.index].count=$scope.x_count;  
                data.sort(function(a,b){  
                    if(falg){  
                        return a.count< b.count?1:-1;  
                    }else{  
                        return a.count>b.count?1:-1;  
                    }  
                });  
            }  
  
  
  
            $scope.checkD = false;  
            $scope.xuan1 = [];  
            $scope.xuan = function (xuanl, id) {  
                console.log(id);  
                $scope.checkD = xuanl;  
                if (xuanl) {  
                    $scope.xuan1.push(id);  
                }  
            }  
            //判断的功能,默认是名字排序  
  
        })  
    </script>  
</head>  
<body ng-app="myapp" ng-controller="myCtrl">  
<div class="search">  
    <input type="text" placeholder="输入关键字…" ng-model="search">  
    <select ng-model="paixu" ng-change="px1()">  
        <option value="">库存正序</option>  
        <option value="2">库存倒序</option>  
    </select>  
    <button ng-click="del()">批量删除</button>  
    <button ng-click="tianjia()">添加</button>  
    <button ng-click="shanchu()">删除全部</button>  
</div>  
<!--用来遍历对象并渲染到页面中-->  
<table ng-show="show">  
    <thead>  
    <th><input type="checkbox" ng-model="chk" ng-click="check(chk)"></th>  
    <th ng-click="sort1('id')" ng-class="{active:active=='id'}">商品编号</th>  
    <th ng-click="sort1('name')" ng-class="{active:active=='name'}">商品名称</th>  
    <th ng-click="sort1('price')" ng-class="{active:active=='price'}">商品价格</th>  
    <th ng-click="sort1('count')" ng-class="{active:active=='count'}">商品库存</th>  
    <th>数据删除</th>  
    <th>数据修改</th>  
    </thead>  
    <tbody>  
    <!--实现模糊查询-->  
    <tr ng-repeat="item in data| filter:search">  
        <td><input type="checkbox" ng-model="xuanz" ng-click="xuan(xuanz,item.id)"></td>  
        <td>{{item.id}}</td>  
        <td> {{item.name}}</td>  
        <!--商品价格前面加“￥”-->  
        <td>{{item.price | currency:"￥"}}</td>  
        <td>{{item.count}}</td>  
        <td>  
            <button ng-click="remove($index)">删除</button>  
        </td>  
        <td>  
            <button ng-click="xiugai($index)">修改</button>  
        </td>  
    </tr>  
    </tbody>  
</table>  
<div ng-show="ycxiugai">  
    <p>修改商品</p>  
    <p>商品编号：<input type="text" ng-model="x_id"/></p>  
  
    <p>商品名称：<input type="text" ng-model="x_name"/></p>  
  
    <p>商品价格：<input type="text" ng-model="x_price"/></p>  
  
    <p>商品库存：<input type="text" ng-model="x_count"/></p>  
  
    <p>  
        <button ng-click="xiugaian($index)">修改</button>  
    </p>  
</div>  
  
<div ng-show="yctianjia">  
    <p>添加商品</p>  
    <p>商品编号：<input type="text" ng-model="t_id"/></p>  
  
    <p>商品名称：<input type="text" ng-model="t_name"/></p>  
  
    <p>商品价格：<input type="text" ng-model="t_price"/></p>  
  
    <p>商品库存：<input type="text" ng-model="t_count"/></p>  
  
    <p>  
        <button ng-click="tianjiaan($index)">添加</button>  
    </p>  
</div>  
</body>  
</html>  
阅读全文
0 0