商品管理系统_增删改查过滤

来源：互联网发布：日本清酒知乎编辑：程序博客网时间：2024/06/05 04:58

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>商品管理系统</title>

       <script src="../lib/js/ionic.bundle.js"></script>
       <style>
           table tr{
               border: 1px solid;
           }
           body{
               width: 800px;
               margin: 0 auto;
           }
           table tr:nth-child(2n){
               background-color: #CCCCCA;
           }
       </style>
       <script>
           angular.module("myapp",[])
           .controller("demoC",function($scope){
               //新增区域默认不显示
               $scope.showadd=false;



               $scope.title="state";
               $scope.desc=false; //默认false升 true降

               //数组
               $scope.goods=[];
               for(var i=1;i<5;i++){
                   var g={
                       "checked":false,   //复选是否被选中
                       "id":i,
                       "gname":"云南白药"+i,
                       "address":"云南",
                       "state":"发货",
                       "regDate":new Date(),
                       "price":100+i
                   };
                   var g2={
                       "checked":true,
                       "id":10+i,
                       "gname":"云南白药"+i,
                       "address":"云南",
                       "state":"已发货",
                       "regDate":new Date("2016-"+i+"-1 3:01:02"),
                       "price":100+i
                   };
                   $scope.goods.push(g);

                   $scope.goods.push(g2);
               }

               //全选操作
               $scope.ckAll=function(){
                   var ck=$scope.isck;// 表头中的复选框
                   for(var i=0;i<$scope.goods.length;i++){
                       $scope.goods[i].checked=ck;
                   }
               }

               $scope.delAll=function(){
                   var b=false; //默认么有选中的
                   for(var i=0;i<$scope.goods.length;i++){
                       if($scope.goods[i].checked==true){
                           b=true;
                           break;
                       }
                   }
                   console.log("是否有选择",b);
                   //执行删除操作
                   if(b==true){
                       for(var i=0;i<$scope.goods.length;i++){
                       if($scope.goods[i].checked==true){
                           $scope.goods.splice(i,1);
                           i--; //删除后,下次依然从当前索引开始
                       }
                   }
                   }else{
                       alert("请选择后操作");
                   }
               }
               //批量发货
               $scope.fhAll=function(){
                   var b=false; //默认么有选中的
                   for(var i=0;i<$scope.goods.length;i++){
                       if($scope.goods[i].checked==true){
                           b=true;
                           break;
                       }
                   }
                   console.log("是否有选择",b);
                   //执行删除操作
                   if(b==true){
                       for(var i=0;i<$scope.goods.length;i++){
                       if($scope.goods[i].checked==true){
                           $scope.goods[i].state="已发货";
                       }
                   }
                   }else{
                       alert("请选择后操作");
                   }


               }

               //单个删除
               $scope.del=function(g){ //当前删除行的对象
                   for(var i=0;i<$scope.goods.length;i++){
                       if($scope.goods[i].id==g.id){   //查找当前删除的对象在数组中的索引
                           $scope.goods.splice(i,1); //
                       }
                   }
               }

               $scope.savegood=function(){
                   $scope.tips=false; //控制错误信息是否显示
                   $scope.valArr=[];
                   //商品名地址   价格
                   if($scope.gname==undefined||$scope.gname==""){
                       $scope.valArr.push("用户名不能为空");
                   }else if(!($scope.gname.length>2 && $scope.gname.length<10)){
                       $scope.valArr.push("用户名长度在2到10");
                   }

                   if($scope.address==undefined || $scope.address==""){
                       $scope.valArr.push("地址不能为空");
                   }

                   //数字   /^\d+$/
                   if(! /^\d+$/.test($scope.price)){

                       $scope.valArr.push("价格必须为有效数字");
                   }

                   if($scope.valArr.length>0){
                       $scope.tips=true;
                   }else{
                       var g2={
                       "checked":false,
                       "id":100,
                       "gname":$scope.gname,
                       "address":$scope.address,
                       "price":$scope.price,
                       "state":"发货",
                       "regDate":new Date()
                       };
                       //添加到数组
                       $scope.goods.push(g2);
                       $scope.showadd=false;
                   }

               }

               $scope.orderby=function(){
                   //获取输入框内容
                   var t=$scope.ordertype;
                   if(t=="1"){
                       $scope.title='price';
                       $scope.desc=false;
                   }else if(t=="2"){
                       $scope.title='price';
                       $scope.desc=true;
                   }else if(t=="3"){
                       $scope.title='regDate';
                       $scope.desc=false;
                   }else if(t=="4"){
                       $scope.title='regDate';
                       $scope.desc=true;
                   }

               }

           })

       </script>
   </head>
   <body ng-app="myapp" ng-controller="demoC">
       <button ng-click="showadd=true">新增</button>
       <button ng-click="delAll()">批量删除</button>
       <button ng-click="fhAll()">批量发货</button>
       <input ng-model="selname" placeholder="根据商品名字查询" />
       <input ng-model="seladdress" placeholder="根据商品生成地查询" />
       <select ng-model="ordertype" ng-change="orderby()">
           <option value="">请选择排序方式</option>
           <option value="1">商品价格升序</option>
           <option value="2">商品价格降序</option>
           <option value="3">生产日期升序</option>
           <option value="4">生产日期降序</option>

       </select>

       <table border="1px">
           <tr style="background-color: #787876;">
               <td><input type="checkbox" ng-model="isck" ng-change="ckAll()" /></td>
               <td ng-click="title='gname';desc=!desc">商品名称</td>
               <td ng-click="title='address';desc=!desc">商品产地</td>
               <td ng-click="title='price';desc=!desc">商品价格</td>
               <td ng-click="title='regDate';desc=!desc">生产日期</td>
               <td>状态</td>
               <td>操作</td>
           </tr>

           <tr style="border: 1px;" ng-repeat="good in goods|orderBy:title:desc|filter:{'gname':selname,'address':seladdress}">
               <td><input type="checkbox" ng-model="good.checked" /> </td>
               <td>
               <span ng-hide="good.edit">{{good.gname}} </span>
               <span ng-show="good.edit==true"> <input ng-model="good.gname" /> </span>
               </td>
               <td>{{good.address}}</td>
               <td>{{good.price}}</td>
               <td>{{good.regDate|date:"yyyy年MM月dd日 hh时mm分ss秒"}}</td>
               <td>
               <span ng-show="good.state=='已发货'">
                  {{good.state}}
               </span>
               <span ng-show="good.state=='发货'">
                  <a href="#" ng-click="good.state='已发货'">
                  {{good.state}}
                  </a>
               </span>
               </td>
               <td>

                  <button ng-click="del(good)">删除</button> |
                        
                      <button ng-hide="good.edit" ng-click="good.edit=true">修改</button>
                      <button ng-show="good.edit==true" ng-click="good.edit=false">保存</button>
               </td>

           </tr>
       </table>
       <div ng-show="showadd">
           <form>
               商品名:<input ng-model="gname" /><br />
               生产地:<input ng-model="address" /><br />
               价格 : <input ng-model="price" /><br />
               <div style="width: 200px; background-color: pink;">
                   <ul>
                       
                       <li ng-repeat="c in valArr ">{{c}}</li>
                   </ul>
               </div>


               <button ng-click="savegood()" >保存</button>


           </form>

       </div>
   </body>

</html>

===============================================

效果:

阅读全文

0 0