商品增加和查询、排序、批量删除、批量发货

最新推荐文章于 2024-03-29 15:11:04 发布
最新推荐文章于 2024-03-29 15:11:04 发布
阅读量742 收藏
点赞数
分类专栏： Web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gh323093/article/details/78602647
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../ionic_jiabao/js/ionic.bundle.js"></script>
    <style>
        *{
            text-align: center;
        }
        table{
            border-collapse: collapse;
            margin: 20px auto;
        }
        th,td{
            padding: 10px;
            border: 1px solid #000000;
        }
        .select {
            margin-top: 8px;
            margin-right: 30px;
            height: 25px;
            border-radius: 10px;
        }
    </style>
    <script>
        var myapp = angular.module("myapp",[]);
        myapp.controller("myCtrl",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":false,
                    "id":10+i,
                    "gname":"云南白药"+i,
                    "address":"云南",
                    "state":"已发货",
                    "regDate":new Date("2016-"+i+"-1 13:18:41"),
                    "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="myCtrl">
<input type="text" placeholder="输入关键字搜索" ng-model="select" class="select">
<button ng-click="delAll()">批量删除</button>
<button ng-click="fhAll()">批量发货</button>
<table>
    <tr style="background: #999999">
        <td><input type="checkbox" ng-model="isck" ng-change="ckAll()" /></td>
        <th ng-click="title='gname'; desc=!desc">商品名称</th>
        <th ng-click="title='address'; desc=!desc">商品产地</th>
        <th ng-click="title='price'; desc=!desc">商品价格</th>
        <th ng-click="title='regDate'; desc=!desc">生产日期</th>
        <th>状态</th>
        <th>操作</th>
    </tr>
    <tbody>
    <tr ng-repeat="good in goods|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> |
            <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>
    </tbody>
</table>
</body>
</html>


第二个

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

    <script src="../angular-1.5.5/angular.min.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}"><!--|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>
<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>
                <!-- 点击保存时,把不合法的信息都放入数组  valArr -->
                <li ng-repeat="c in valArr ">{{c}}</li>
            </ul>
        </div>
        <button ng-click="savegood()" >保存</button>
    </form>
</div>
</body>
</html>

gh323093
关注
专栏目录
商品管理（批量删除、批量发货、修改、排序）
爱喝柠檬的傻蛋的博客
11-22 1306
商品管理系统 table tr{ border: 1px solid; } body{ width: 800px; margin: 0 auto; } table tr:nth-child(2n){ background-color: #CCCCCA; } angular.module("mya
订单用户表2（用户名查询、手机号查询、选择城市、选择状态、选择月份、ID排序、添加数据、批量发货、批量删除、敏感字、修改数据）
qq_40259191的博客
10-25 2070
依赖：   ------------------------------------------------------------------------------- 效果： ----------------------------------------------------------------
02订单批量发货
痞子王的博客
03-13 812
2.订单批量发货 2.1 批量发货业务逻辑 2.1.1 需求分析 实现批量发货的业务逻辑 2.1.2 代码实现 （1）OrderController新增方法 @PostMapping("/batchSend") public Result batchSend(@RequestBody List<Order> orders){ orderService.batc...
小程序订单如何批量发货
weixin_43096382的博客
06-27 571
将整理好的xls文档发送到手机微信文件传输助手，手机微信上进行导入（目前不支持电脑微信上操作，只能在手机微信上弄）。完成发货后，系统会自动更新订单的发货状态。你可以在订单列表页面或发货管理页面中查看已发货和未发货的订单。同时，系统会自动发送发货通知给买家，提醒他们订单已经发货。通过导入订单信息和自动生成快递单，商家可以快速完成大量订单的发货工作。但在使用批量发货功能时，商家需要注意校对订单信息的准确性，以确保顺利发货并给买家提供良好的购物体验。以上就是批量发货相关介绍。点击批量发货，可以下载批量发货模板。
AngularJs实现增加订单、批量发货
xy8199的博客
10-25 2540
实现效果： 实现要求： 1、 完成页面 2、 点击“新增订单”，弹出上框，新增订单状态都是“待发货” 3、 实现排序 4、 提交订单时，检查表单，提示错误内容，并且将文本框颜色变红色（错误提示） 5、 选择状态查询：待发货、已发货、已收货 6、 点击“发货”按钮，将“待发货”状态改成“已发货” 7、 通过Checkbox全选和全不选 8、 点击“批量删除”按钮，删
虾皮怎么批量订单发货？一文教会你操作，事半功倍！
2401_82831031的博客
03-29 1830
在电子商务领域，批量订单发货是一个至关重要的环节，它直接关系到客户的满意度和商家的运营效率。对于使用虾皮这样的电商平台进行销售的商家来说，掌握批量订单发货的技巧和方法尤为重要。下面，虎观采购将详细介绍在虾皮平台上如何进行批量订单发货。
订单用户表1（用户查询 、手机号查询 、选择城市 、选择状态、月份查询 、ID排序 、添加数据、批量发货、批量删除）
qq_40259191的博客
10-25 1101
依赖： ----------------------------------------------------------------------------------- 效果： -----------------------------------------------------------------------------
基于PHP+javaScript+css+html开发的个人商城系统之卡密自动发货平台+源码+开发文档（高分优秀项目）
最新发布
05-26
4.批量添加卡密（一行一个）/删除卡密 5.一键切换模板[目前1套] 6.对接易支付/码支付/官方支付，可分开对接 7.批量购买 8.网站信息一键修改 9.邮箱自动发送卡密 10.商品独立分享链接 11.商城出售状况邮件通知 12....
商品题(查询+批量删除)
YHMQ66的博客
11-20 550
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/jav
angular搜索 过滤 批量删除 添加 表单验证等小集成
热门推荐
这个不能实现
10-25 2万+
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } .sspan{ b
ECSHOP 商品列表添加批量操作选项。（例如批量修改推荐排序）
weixin_30411239的博客
07-31 386
效果图 可以开发你想要批量操作的一切 1.找到 后台 的 order_list.htm 找开文件 找到<option value="move_to">{$lang.move_to}</option> 在后面添加 <option value="re_to">批量设置排序</option> 在select的结束后添加 &...
JS实现复选框的全选和批量删除功能
Eternal0304的博客
09-28 2275
如图示： 功能描述：在勾选了全选时，所有的商品都会勾选，在取消全选时，取消所有物品的勾选。如果点击批量删除，删除所勾选的商品。<td align="center" width="12%" > <input type="checkbox" id="allChecks" onclick="ckAll()" /> 全选/全不选 </td> //全选 function ckAll(){
（angularjs） 数据的增删改查（添加用户，查询年龄，批量删除，全部删除，修改密码） 类似题
下午茶的博客
10-23 527
上图： 上代码： html> html ng-app="UMApp"> head> meta charset="UTF-8"> meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> script t
angular删除组件（使用cli删除组件的最佳方法）
宁静致远
05-07 1万+
目前Angular CLI不支持删除组件的选项，您需要手动完成。从app.module中删除每个组件的导入引用删除组件文件夹。
AngularJS表格数据全选反选批量删除,删除的数据添加到数组里
thw_m的博客
10-24 657
var app = angular.module("myApp",[]);             app.controller("myCtrl",function($scope){                 $scope.shops = [{                     name:"qq1",                     price:12.9,      
商品的增加删除修改和查询
Theearlybirdcatchw的博客
03-30 1103
运行结果： GoodsDao package com.itheima.dao; import com.itheima.pojo.Goods; import com.itheima.utils.DruidUtils; import org.apache.commons.dbutils.QueryRunner; import org.apache.commons.dbutils.handlers.BeanHandler; import org.apache.commons.dbutils.handl..
Angular +Ionic实现收藏夹的全选和单选删除功能
weixin_44794123的博客
09-28 480
Angular +Ionic实现收藏夹的全选和单选删除功能 一，需求及解决思路 1.实现需求：所展示的产品，通过编辑功能切换复选， 分为单独选择和全选实现将商品从收藏夹中移除。 2.解决思路： 实现商品数据渲染页面后，调用执行删除功能的接口。 实现单选，反选，全选。 通过选中所接收的值拼接成自符串。 取消选择时：将相应选中的字段从当前自符串中移除。 点击删除按钮实现选中商品的移除。 全选时则移除所有的商品。 二，代码 a，关键代码 1，html //单选 <ion-checkbox *ngIf="s
html+css+angularjs 实现商品库存信息管理页面 可删除/批量删除/可模糊查询/可升序降序
飞鸟96
09-18 4260
html> html lang="en"> head> meta charset="UTF-8"> title>Titletitle> script src="angularjs/angular.js">script> style> .box{ width: 100%; } .box1{
angular商品删除
gh323093的博客
11-02 202
html> html lang="en"> head> meta charset="UTF-8"> title>Titletitle> script src="../angular-1.5.5/angular.js">script> script> var app = angular.module("myApp", []); app.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值