哈哈哈哈哈哈哈哈哈哈哈哈

最新推荐文章于 2022-05-31 21:02:37 发布
最新推荐文章于 2022-05-31 21:02:37 发布
阅读量341 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/blgktlp/article/details/78612658
版权
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../angular/angular.js" ></script>
        <style>
            /*表格隔行换色*/
            table tr:nth-child(even){
                background-color: gainsboro;
            }
            table tr:nth-child(odd){
                background-color: darkgrey;
            }
            /*按钮变小手样式*/
            #hand{
                cursor: pointer;
            }
        </style>
        <script>
            var app=angular.module("myApp",[]);
            app.controller("myCtrl",function($scope){
                $scope.products=[{
                    id:80,
                    name:"iPhone",
                    price:5400,
                    state:false
                },{
                    "id": 1200,
                    "name": "ipad mini",
                    "price": 2200,
                    state:false
                },{
                    "id": 500,
                    "name": "ipad air",
                    "price": 2340,
                    state:false
                },{
                    "id": 290,
                    "name": "ipad",
                    "price": 1420,
                    state:false
                },{
                    "id": 910,
                    "name": "imac",
                    "price": 15400,
                    state:false
                }];
                //删除操作
                $scope.delProduct=function(name){
                    if(window.confirm("确定要删除吗？")==true){
                        for(index in $scope.products){
                            if(name==$scope.products[index].name){
                                $scope.products.splice(index,1);
                                alert("删除成功");
                            }
                        }
                    }
                };

                $scope.search = "";
                //下拉菜单过滤商品价格范围
                $scope.productPrice = "--请选择--";
                $scope.isShow = function(price) {
                    if($scope.productPrice == "--请选择--") {
                        return true;
                    } else {
                        var priceArr = $scope.productPrice.split("-");
                        var min = priceArr[0];
                        var max = priceArr[1];
                        if(price < min || price > max) {
                            return false;
                        } else {
                            return true;
                        }
                    }
                }
                //按钮全选反选
                $scope.sAll=function(selectAll){
                    if($scope.selectAll){
                        $scope.selectAll=false;
                        for(index in $scope.products){
                            $scope.products[index].state=false;
                        }
                }else{
                            $scope.selectAll=true;
                            for(index in $scope.products){
                                $scope.products[index].state=true;
                            }
                        }
                    }
                //全选反选
                $scope.selectAll = false;
                $scope.selectAllFun = function() {
                    if($scope.selectAll) {
                        for(index in $scope.products) {
                            $scope.products[index].state = true;
                        }
                    } else {
                        for(index in $scope.products) {
                            $scope.products[index].state = false;
                        }
                    }
                }
                //全不选
                $scope.checkSelectAll = function() {
                    var a = 0;
                    for(index in $scope.products) {
                        if(!$scope.products[index].state) {
                            $scope.selectAll = false;
                        } else {
                            a++;
                        }
                        if(a == $scope.products.length) {
                            $scope.selectAll = true;
                        } else {
                            $scope.selectAll = false;
                        }
                    }
                }
                //批量删除
                $scope.delSelect=function(){
                    var arr=[];
                    for(index in $scope.products){
                        if($scope.products[index].state){
                            arr.push($scope.products[index].name);
                        }
                    }
                    if(arr.length<=0){
                        alert("请先选择")
                    }else{
                        if(window.confirm("确定删除么？")){
                            for(index in arr){
                                for(index2 in $scope.products){
                                    if(arr[index]==$scope.products[index2].name){
                                        $scope.products.splice(index2,1)
                                    }
                                }
                            }
                        }
                    }
                }
                //新增商品
                $scope.formShow = false;
                $scope.formShowFun = function() {
                    if($scope.formShow) {
                        $scope.formShow = false;
                    } else {
                        $scope.formShow = true;
                        $scope.updateShow = false;
                    }
                }

                //提交新加商品进行验证
                $scope.newId = "";
                $scope.newName = "";
                $scope.newPrice = "";
                //$scope.checkSub = [];
                $scope.divShow = false;
                $scope.sub = function() {
                    $scope.checkSub = [];
                    if($scope.newId == "" || $scope.newId == null) {
                        $scope.checkSub.push("产品编号为空");
                    } else if(isNaN($scope.newId)) {
                        $scope.checkSub.push("产品编号不是整数");
                    }
                    if($scope.newName == "" || $scope.newName == null) {
                        $scope.checkSub.push("产品名称为空");
                    }
                    if($scope.newPrice == "" || $scope.newPrice == null) {
                        $scope.checkSub.push("产品价格为空");
                    } else if(isNaN($scope.newPrice)) {
                        $scope.checkSub.push("产品价格不是整数");
                    }

                    if($scope.checkSub.length > 0) {
                        $scope.divShow = true;
                    } else {
                        $scope.divShow = false;
                        var newPro = {
                            "id": parseInt($scope.newId),
                            "name": $scope.newName,
                            "price": parseInt($scope.newPrice),
                            state: false
                        };
                        $scope.products.push(newPro);
                    }
                }

                //修改页面
                $scope.updateShow = false;
                $scope.updateId = "";
                $scope.updateName = "";
                $scope.updatePrice = "";
                $scope.updateShowFun = function(pro) {
                    $scope.updateShow = true;
                    $scope.formShow = false;
                    $scope.updateId = pro.id;
                    $scope.updateName = pro.name;
                    $scope.updatePrice = pro.price;
                }
                $scope.updateSub = function() {
                    $scope.updateArr = [];
                    if($scope.updateName == "" || $scope.updateName == null) {
                        $scope.updateArr.push("产品名称为空");
                    }
                    if($scope.updatePrice == "" || $scope.updatePrice == null) {
                        $scope.updateArr.push("产品价格为空");
                    } else if(isNaN($scope.updatePrice)) {
                        $scope.updateArr.push("产品价格不是整数");
                    }

                    //验证不满足
                    if($scope.updateArr.length > 0) {
                        $scope.haha = true;
                    } else {
                        $scope.haha = false;
                        for(index in $scope.products) {
                            if(parseInt($scope.updateId) == $scope.products[index].id) {
                                $scope.products[index].name = $scope.updateName;
                                $scope.products[index].price = $scope.updatePrice;
                                $scope.updateShow = false;
                            }
                        }
                    }
                }
            });
        </script>
    </head>
    <body ng-app="myApp" ng-controller="myCtrl">
        <center>
            <h3>购物车</h3>
        <input type="text" size="10" placeholder="产品名称" ng-model="search"/>
        产品价格<select ng-model="productPrice">
            <option>--请选择--</option>
            <option>0-2000</option>
                <option>2001-3000</option>
                <option>3001-4000</option>
                <option>4001-5000</option>
                <option>5001-6000</option>
                <option>6001-7000</option>
                <option>7001-8000</option>
                <option>8001-无穷大</option>
        </select>
        <select ng-model="selOrder">
            <option value="">排序方式</option>
                <option value="id">id正序</option>
                <option value="-id">id逆序</option>
                <option value="price">价格正序</option>
                <option value="-price">价格逆序</option>
        </select>
        <button ng-click="delSelect()">批量删除</button>
        <button ng-click="sAll()" id="hand">全选/全不选</button><br /><br />
        <table border="1px solid blue" cellpadding="10" cellspacing="0">
            <thead>
                <tr>
                    <th><input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()"/></th>
                    <th>产品编号</th>
                    <th>产品名称</th>
                    <th>产品价格</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="pro in products | filter:{'name':search} | orderBy:selOrder" ng-show="isShow(pro.price)">
                    <td><input type="checkbox" ng-model="pro.state" ng-click="checkSelectAll()"/></td>
                    <td>{{pro.id}}</td>
                    <td>{{pro.name}}</td>
                    <td>{{pro.price | currency:"￥:"}}</td>
                    <td><button ng-click="delProduct(pro.name)">删除</button>
                        <button ng-click="updateShowFun(pro)">修改</button>
                    </td>
                </tr>
            </tbody>
        </table><br />
        <button ng-click="formShowFun()">添加新产品</button><br /><br />
        <form style="border: 1px solid blue; width: 300px;" ng-show="formShow">
                <h3>添加商品</h3> 商品编号：
                <input type="text" placeholder="商品编号" ng-model="newId" /><br /><br /> 商品名称：
                <input type="text" placeholder="商品名称" ng-model="newName" /><br /><br /> 商品价格：
                <input type="text" placeholder="商品价格" ng-model="newPrice" /><br /><br />
                <div style="border: 1px solid blue; width: 250px; background-color: pink;" ng-show="divShow">
                    <ul>
                        <li ng-repeat="chenk in checkSub">{{chenk}}</li>
                    </ul>
                </div><br />
                <input type="button" value="提交" ng-click="sub()" />
            </form>
            <!-- 修改 -->
            <form style="border: 1px solid blue; width: 300px;" ng-show="updateShow">
                <h3>修改商品</h3> 商品编号：
                <input type="text" placeholder="商品编号" ng-model="updateId" disabled="disabled" /><br /><br /> 商品名称：
                <input type="text" placeholder="商品名称" ng-model="updateName" /><br /><br /> 商品价格：
                <input type="text" placeholder="商品价格" ng-model="updatePrice" /><br /><br />
                <div style="border: 1px solid blue; width: 250px; background-color: pink;" ng-show="haha">
                    <ul>
                        <li ng-repeat="chenk in updateArr">{{chenk}}</li>
                    </ul>
                </div><br />
                <input type="button" value="提交" ng-click="updateSub()" />
            </form>
        </center>
    </body>
</html>
blgktlp
关注
哈哈哈哈哈哈公式哈哈哈哈哈哈哈哈
09-07
哈哈哈哈哈哈公式哈哈哈哈哈哈哈哈
增加+删除+批量删除+修改+查询+排序+全选
blgktlp的博客
11-22 455
table tr:nth-child(even){                 background-color: gainsboro;             }             table tr:nth-child(odd){                 background-color: darkgrey;             }              
商品信息单个删除和批量删除
weixin_47267628的博客
05-31 816
商品信息删除 1.根据ID发送ajax请求删除商品信息 button按钮 <button type="button" onclick="deleteProd(${p.pId})" class="btn btn-default">删除</button> 按钮单击事件 <%-- 使用ajax发送删除商品信息 --%> function deleteProd(pId) { alert(pId); $.ajax({ url:"${pageC
layui中删除与批量删除，调用同一个接口
QYHuiiQ
08-27 4495
页面展示： 前端jsp： 删除单个： 批量删除：data是一个数组，将其拼接成ids（list） 后端，封装一个专门接收前端传过来的id列表的工具类： controller： service层： mapper： ...
前后端能不能这样约定接口
hezheqiang的专栏
08-28 1457
现在开发的项目，尤其是管理后台的项目，CURD操作是非常频繁的，如果接口约定的不好，后端就需要开发各种Api，前端人员也需要在Api文件中添加多个Api，开发成本不知不觉就增加了。 所以，针对比较普遍的CURD操作，前后端在接口上就需要制定一些约定。 一、添加和修改 1.添加操作和修改操作约定成一个接口。 添加一般情况下是没有ID的，修改一般情况下是有ID的。两个操作的其他字段其实都是一样的...
单条删除、批量删除方法
weixin_44406304的博客
07-29 375
单条删除、批量删除方法 开发工具与关键技术 ：VS2015、ASP.NET MVC 撰写时间：2019.7.28 单条删除、批量删除两个方法在页面这边是要分开写的，因为是两个按钮的，代码如下图。 先弹出提示层，然后进行删除操作，然后关闭提示层，刷新表格，再给提示删除成功或者失败。 再到批量删除的方法。代码如下图 首先获取到选中checkbox，再获取单位ID，申明var strID是去掉最后的“...
很好很好很好哈哈哈哈哈哈和好
06-13
很好很好很好哈哈哈哈哈哈和好
算法哈哈哈哈哈哈哈哈哈哈哈哈
12-27
算法哈哈哈哈哈哈哈哈哈哈哈 本资源总结了两种不同的算法问题，包括统计数字问题和字典序问题。 统计数字问题 统计数字问题是指给定一个数字n，统计每个数字（0-9）在n的每个位数中出现的次数。该问题可以使用...
Idea哈哈哈哈哈哈哈哈哈
06-17
【标题】：“Idea哈哈哈哈哈哈哈哈哈” 【描述】：“Idea哈哈哈哈哈哈哈哈哈” 【标签】：“IntelliJ IDEA” 【压缩包子文件的文件名称列表】：hp_demo 正文： IntelliJ IDEA，简称IDEA，是一款由JetBrains公司...
哈哈哈哈哈哈哈哈大大大
08-01
的点点滴滴的点点滴滴多大
订单管理（添加、删除、修改、排序）
08-27
该程序采用Java语言编写，实现图形用户界面，使用access数据库作为后台支持，功能强大。
thinkphp框架实现删除和批量删除
01-20
本文实例讲一下如何用thinkphp实现数据的删除和批量删除吧。 预期效果图：   原谅博主对照片的处理是如此的草率吧。。。 仍然是 通过MVC模式进行拆分： 首先是视图部分：  <form action=__MODULE__/Admin/User/del method=get> <tr> <th width=4%><input type=checkbox name=checkbox10 id=checkbox10></th> <th width=13%>用户名</th> <th width=10
java批量删除
09-26
批量删除，速度快,效率高，代码不是问题，重要的是人品
j2ee07:jdbc01：Properties对象、四大参数、批量删除、基本的增删改查
08-12
NULL 博文链接：https://1601844782.iteye.com/blog/2271756
单条删除和批量删除的思路和实现
weixin_51625266的博客
08-14 1475
单条删除和批量删除 5.1 目标 前端的“单条删除”和“批量删除”在后端合并为同一套操作。合并的依据是：单 条删除时 id 也放在数组中，后端完全根据 id 的数组进行删除 5.2 思路 点击总删除和单个删除按钮，弹出模态框，显示你要删除的角色姓名，将其封装为一个数组，然后用户确认，发送ajax请求，后台进行删除 代码（后端） RoleHandler @ResponseBody @RequestMapping("/role/remove/by/role/id/array.json") public Resu
列表批量删除和单个删除共用一个方法传递集合到Controller
weixin_30335575的博客
08-10 686
前台方法（前台部分用的bootstrap）： 后台Controller： 这里的id实际就是前台传过来的集合，这种方式，后台的 集合接收变量名称可以随意起名，因为前台传过来的就是一个集合，本身就没有名字，所以这里可以用 “id” 前台传送的参数形式： 转载于:https://www.cnblogs.com/libin6505/p/9455...
实现批量删除的后台接口
han_shuai_的博客
09-28 2933
controller 层： @PostMapping(value = "/batchPeopleManageDelete") public ProcessResult batchPeopleManageDelete(@ApiParam(name = "ids",value="用户ID数组",required = true) @RequestParam("ids[]") Integer[] ids) { try { mapManageService.batchPeopleManag
ThinkCMF二次开发--实现批量删除以及排序
非专业程序员小田
11-17 5881
/** * 设置排序 */ public function listorders() { $status = $this->listSort( $this->download_obj ); if( $status ) $this->success( '更新排序成功' ); else
在C中，"4哈哈哈哈哈哈哈哈"
最新发布
09-13
如果你想创建一个包含特定文本的字符串，比如 "4哈哈哈哈哈哈哈哈"，你需要按照以下方式定义： ```c char str[] = "4哈哈哈哈哈哈哈哈"; ``` 这里的 `str` 就是一个字符数组，其中存储了对应的字符串。注意，C语言...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值