aj商品增删改查

xiaoxiao2021-02-28  5

<!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>  
转载请注明原文地址: https://www.6miu.com/read-2000331.html

最新回复(0)