商品管理(批量删除、批量发货、修改、排序)
2017-11-22 19:12
393 查看
代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>商品管理系统</title> <script src="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.title="state"; $scope.desc=false; //数组 $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); // } } } }) </script> </head> <body ng-app="myapp" ng-controller="demoC"> <button ng-click="delAll()">批量删除</button> <button ng-click="fhAll()">批量发货</button> <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"><!--|orderBy 内置排序过滤 title desc 是两个变量 --> <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> | <!-- good.gai:true 显示保存 ; --> <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> </body> </html>
相关文章推荐
- 商品订单(增删改查):新增订单;批量删除,发货;模糊查询,下拉菜单内容过滤(含时间);全选反选,列名排序
- 订单用户表2(用户名查询、手机号查询、选择城市、选择状态、选择月份、ID排序、添加数据、批量发货、批量删除、敏感字、修改数据)
- 实现商品库存信息管理页面(AngularJS过滤器,orderBy排序,批量删除数据)
- 用户名查询、手机号查询、选择城市、选择状态、选择月份、ID排序、添加数据、批量发货、批量删除、敏感字、修改数据)
- AngularJS商品新增订单批量发货删除排序全选反选日期过滤
- 商品增加和查询、排序、批量删除、批量发货
- 购物车的修改查找排序批量删除
- TP--商品管理-删除、修改
- 订单用户表1(用户查询 、手机号查询 、选择城市 、选择状态、月份查询 、ID排序 、添加数据、批量发货、批量删除)
- Spring框架开发实现对商品列表的增删改查以及批量删除和批量修改
- thinkphp 文章列表批量删除 / 批量修改排序
- Angularjs全选 反选 批量删除 修改 排序
- 用户表(查询数据 、添加数据 、排序 、点击删除 、修改密码 、批量删除 、全部删除)
- RedHat学习 linux用户管理命令(添加,删除,修改)
- Ibatis 批量添加修改删除-batch-insert-update-delete
- 封装链表库实现单链表:增加,删除,查询,修改,排序,逆转
- StackExchange.Redis加载Lua脚本进行模糊查询的批量删除和修改
- GridView动态新增行 删除行 适合多数据批量修改保存 新增数据验证
- ecshop后台商品列表和添加修改选择供货商处只显示自己管理的