增删改查模糊排序json串-优快云博客

本文介绍了一个使用AngularJS实现的商品管理系统，该系统支持商品的增删改查操作，并具备查询、排序、批量删除等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <style type="text/css">
   .color1{
    background-color: red;
   }
   .color2{
    background-color: green;
   }
  </style>
  <script type="text/javascript" src="js/angular.min.js" ></script>
  <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
  <script type="text/javascript">
   var app = angular.module("myApp",[]);
   app.controller("myCtrl",function($scope,$http){
    $scope.Goods = "";
    $scope.id = 6;

    $http({
     method:"get",
     url:"Goods.json"
    }).then(function success(response){
     $scope.Goods = response.data;
    },function error(response){
     $scope.Goods = "请求失败";
    });


    // 赋初值
    $scope.search = "";
    $scope.orderCheck = "";
    $scope.checkAll = false;
    $scope.showTable = true;
    $scope.showAdd = false;
    $scope.showUpdate = false;

    // 全选全不选
    $scope.checkAllFun = function (){
     for (i in $scope.Goods) {
      $scope.Goods[i].check = $scope.checkAll;
     }
    }

    // 添加数据
    $scope.name = "";
    $scope.price = "";
    $scope.num = "";
    $scope.gdate = "";
    $scope.product = "";
    $scope.check = false;

    $scope.add = function (){
     var newGood = {};
     newGood.id = $scope.id++;
     newGood.name = $scope.name;
     newGood.price = $scope.price;
     newGood.num = parseInt($scope.num);
     newGood.gdate = $scope.gdate;
     newGood.product = $scope.product;

     $scope.Goods.push(newGood);

     $scope.showAdd = false;
     $scope.showTable = true;
    }

    // 删除
    $scope.delete = function(id){
     if(confirm("确定删除么?")){
      for (var i = 0 ; i < $scope.Goods.length; i ++ ) {
       if($scope.Goods[i].id == id){
        $scope.Goods.splice(i,1);
       }
      }
      alert("删除成功!");
     }

     if($scope.Goods.length == 0){
      $scope.showTable = false;
     }
    }

    // 修改数据
    var updateGood = [];
    $scope.name = "";
    $scope.price = "";
    $scope.num = "";
    $scope.gdate = "";
    $scope.product = "";

    $scope.update = function(id){
     $scope.showUpdate = true;
     for (var i = 0 ; i < $scope.Goods.length; i ++ ) {
      if($scope.Goods[i].id == id){
       updateGood = $scope.Goods[i];
      }
     }

     // 回显
     $scope.updateName = updateGood.name;
     $scope.updatePrice = updateGood.price;
     $scope.updateNum = updateGood.num;
     $scope.updateGdate = updateGood.gdate;
     $scope.updateProduct = updateGood.product;

     // 修改
     $scope.submit = function (){
      updateGood.name = $scope.updateName;
      updateGood.price = $scope.updatePrice;
      updateGood.num = parseInt($scope.updateNum);
      updateGood.gdate = $scope.updateGdate;
      updateGood.product = $scope.updateProduct;

      $scope.showUpdate = false;
     }
    }

    // 批量删除
    $(function(){
     $scope.batchDelete = function (){
      var arr = $(":checkbox:checked");
      if(arr.length > 0){
       if(confirm("确定删除么?")){
        arr.each(function(){
         var _id = $(this).prop("title");
         for (i in $scope.Goods) {
          if($scope.Goods[i].id == _id){
           $scope.Goods.splice(i,1);
          }
         }
        });
       }
      }
      else {
       alert("请勾选数据!");
      }
      if($scope.Goods.length == 0){
       $scope.showTable = false;
      }
     }
    });
   });
  </script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
  <center>
   查询:<input type="text" ng-model="search" />
   排序:<select ng-model="orderCheck">
     <option value="">--请选择--</option>
     <option value="id">--编号正序--</option>
     <option value="-id">--编号倒叙--</option>
     <option value="name">--名称正序--</option>
     <option value="-name">--名称正序--</option>
     <option value="price">--价格正序--</option>
     <option value="-price">--价格倒序--</option>
     <option value="num">--数量正序--</option>
     <option value="-num">--数量倒序--</option>
     <option value="price*num">--小计正序--</option>
     <option value="-(price*num)">--小计倒序--</option>
     <option value="gdate">--日期正序--</option>
     <option value="-gdate">--日期倒叙--</option>
     <option value="product">--总部正序--</option>
     <option value="-product">--总部倒叙--</option>
   </select>
   <input type="button" value="入库" ng-click="showAdd = !showAdd" />

   
   <div ng-show="showAdd">
    商品名称:<input type="text" ng-model="name" placeholder="输入商品名称.." /><br />
    商品价格:<input type="text" ng-model="price" placeholder="输入商品价格.." /><br />
    商品数量:<input type="text" ng-model="num" placeholder="输入商品数量.." /><br />
    商品日期:<input type="text" ng-model="gdate" placeholder="输入商品日期.." /><br />
    商品总部:<input type="text" ng-model="product" placeholder="输入商品总部.." /><br />
    <input type="button" value="添加" ng-click="add()" />
   </div>

   <table style="width: 50%; text-align: center;" cellspacing="0" cellpadding="0" border="1px" ng-show="showTable">
    <tr style="background-color: lightgray;">
     <td>
      <input type="checkbox" ng-model="checkAll" ng-click="checkAllFun()" />
     </td>
     <td ng-click="orderCheck = 'id' ">商品编号</td>
     <td ng-click="orderCheck = 'name' ">商品名称</td>
     <td ng-click="orderCheck = 'price' ">商品价格</td>
     <td ng-click="orderCheck = 'num' ">商品数量</td>
     <td ng-click="orderCheck = 'price*num' ">商品小计</td>
     <td ng-click="orderCheck = 'gdate' ">出厂日期</td>
     <td ng-click="orderCheck = 'product' ">商品总部</td>
     <td>
      <input type="button" value="批量删除" ng-click="batchDelete()" />
     </td>
    </tr>
    <tr ng-repeat="q in Goods | filter:search | orderBy:orderCheck" class="{{$index%2 == 0 ? 'color1' : 'color2' }}">
     <td>
      <input type="checkbox" ng-model="q.check" title="{{q.id}}" />
     </td>
     <td>{{q.id}}</td>
     <td>{{q.name}}</td>
     <td>{{q.price}}</td>
     <td>
      <input type="number" ng-model="q.num" style="width: 70px" />
     </td>
     <td>{{q.price*q.num}}</td>
     <td>{{q.gdate}}</td>
     <td>{{q.product}}</td>
     <td>
      <input type="button" value="删除" ng-click="delete(q.id)" />
      <input type="button" value="修改" ng-click="update(q.id)" />
     </td>
    </tr>
    <tr>
     <td colspan="9">

     </td>
    </tr>
   </table>
   
   <div ng-show="showUpdate">
    商品名称:<input type="text" ng-model="updateName" /><br />
    商品价格:<input type="text" ng-model="updatePrice" /><br />
    商品数量:<input type="text" ng-model="updateNum" /><br />
    商品日期:<input type="text" ng-model="updateGdate" /><br />
    商品总部:<input type="text" ng-model="updateProduct" /><br />
    <input type="button" value="提交" ng-click="submit()" />
   </div>
  </center>
</body>
</html>