删除 添加 全选 批量删除

最新推荐文章于 2019-12-22 13:17:00 发布
最新推荐文章于 2019-12-22 13:17:00 发布
阅读量284 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xzw521/article/details/78862403
版权
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        
        <style>
            
            .true{
                background: chartreuse;
            }
            .false{
                background: yellow;
            }
            
        </style>
        
        <script src="js/angular.min.js"></script>
        <script type="text/javascript">
            
            var v=angular.module("myApp",[]);
            
            v.controller("mycont",function($scope){
                
                var arr=[{
                          "cb":false,
                          "gid":"1024",
                          "name":"iphoneX",
                          "user":"张丽",
                          "tel":"17600000123",
                          "price":"8699",
                          "city":"北京",
                          "time":"1234343543",
                          "zt":false
                        },
                        {
                          "cb":false,
                          "gid":"2369",
                          "name":"华为P10",
                          "user":"小明",
                          "tel":"17634535435",
                          "price":"4999",
                          "city":"上海",
                          "time":"7876654234",
                          "zt":false
                        },
                        {
                          "cb":false,
                          "gid":"1435",
                          "name":"小米6",
                          "user":"小王",
                          "tel":"17600000123",
                          "price":"3999",
                          "city":"南京",
                          "time":"6765454453",
                          "zt":false
                        },
                        {
                          "cb":false,
                          "gid":"1024",
                          "name":"三星",
                          "user":"小二",
                          "tel":"17600000123",
                          "price":"6999",
                          "city":"上海",
                          "time":"2354654654",
                          "zt":false
                        }
                ];
                    
                    $scope.goods=arr;
                    
                $scope.fahuo=function($index){
                    
                    $scope.goods[$index].zt=true;
                    
                }
                    
                $scope.name_cha=function($event){
                    
                    var temp=[];
                    
                    var key=$event.keyCode;
                    
                    if(key==13){
                        
                        for(var i=0;i<arr.length;i++){
                            
                            if(arr[i].name.indexOf($scope.name)!=-1){
                                temp.push(arr[i]);
                            }
                            
                        }
                        $scope.goods=temp;
                    }
                    
                }
                
                $scope.tel_cha=function($event){
                    
                    var temp=[];
                    
                    var key=$event.keyCode;
                    
                    if(key==13){
                        
                        for(var i=0;i<arr.length;i++){
                            
                            if(arr[i].tel.indexOf($scope.tel)!=-1){
                                
                                temp.push(arr[i]);
                                
                            }
                            
                        }
                        $scope.goods=temp;
                    }
                    
                }
                
                var id_falg=true;
                        $scope.id_paixu=function(){
                            if(id_falg){
                                arr.sort(function(a,b){
                                    return a.gid-b.gid
                                });
                            }else{
                                arr.sort(function(a,b){
                                    return b.gid-a.gid
                                });
                            }
                            id_falg=!id_falg;
                            $scope.goods = arr;
                        }
                        
                var price_falg=true;
                $scope.price_paixu=function(){
                    
                    if(price_falg){
                    arr.sort(function(a,b){
                        return a.price-b.price
                    });
                }else{
                    arr.sort(function(a,b){
                        
                        return b.price-a.price
                        
                        });
                    }
                    
                    price_falg=!price_falg;
                    $scope.goods=arr;
                    
                }
                
                var time_falg=true;
                $scope.time_paixu=function(){
                    
                    if(time_falg){
                    arr.sort(function(a,b){
                        return a.time-b.time;
                    })
                }else{
                    arr.sort(function(a,b){
                        return b.time-a.time;
                    })
                }
                time_falg=!time_falg;
                $scope.goods=arr;
                }
                
                $scope.isFahuo=function(fahuo1){
                    
                    var temp=[];
                    var f=$scope.fahuo1;
                    if(f=="已发货"){
                        for(var i=0;i<arr.length;i++){
                            var f1=arr[i].zt;
                            if(f1){
                                temp.push(arr[i]);
                            }
                        }
                    }else{
                        for(var i=0;i<arr.length;i++){
                            var f1=arr[i].zt;
                            if(f1==false){
                                temp.push(arr[i]);
                            }
                        }
                    }
                    $scope.goods=temp;
                }
                
                $scope.tianjia=function(){
                    
                    var n=$scope.gname;
                    if(n==undefined){
                        $scope.s1="商品名不能为空";
                        return;
                    }else{
                        $scope.s1="";
                    }
                    var u=$scope.guser;
                    if(u==undefined){
                        $scope.s2="用户名不能为空";
                        return;
                    }else{
                        $scope.s2="";
                    }
                    
                    var good={
                          "name":$scope.gname,
                          "user":$scope.guser,
                          "tel":$scope.gtel,
                          "price":$scope.gprice,
                          "city":$scope.gcity,
                          "time":new Date().getTime(),
                          "zt":false
                    }
                    $scope.goods.push(good);
                    $scope.bb=false;
                }
                
                $scope.qx=function(){
                    
                $scope.checked=!$scope.checked;
                
                for (var i = 0; i < arr.length; i++) {
                    arr[i].cb=!arr[i].cb;
                }
                    
                }
                
                $scope.pil=function(){
                    
                    for(var i=0;i<$scope.goods.length;i++){
                        if($scope.goods[i].cb==true&&$scope.goods[i].zt==true){
                            $scope.goods.splice(i,1);
                            i--;
                        }
                    }
                    
                }
                
            })
            
            v.filter("myFilter",function(){
                
                return function(input){
                    
                    if(input){
                        return"已发货";
                    }else{
                        return"未发货";
                    }
                    return input;
                }
                
            })
            
        </script>
        
    </head>
    <body ng-app="myApp" ng-controller="mycont">
        
        <button ng-click="bb=true">新增订单</button>
        <button ng-click="pil()">批量删除</button>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="text" placeholder="按商品名称查询" ng-keydown="name_cha($event)" ng-model="name" />
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="text" placeholder="按手机号查询" ng-keydown="tel_cha($event)" ng-model="tel" />
        
        <select ng-change="isFahuo()" ng-model="fahuo1" ng-init="fahuo1='--按状态查询--'">
            
            <option>已发货</option>
            <option>未发货</option>
            
        </select>
        
        <table border="1px" cellspacing="0px">
            
            <thead>
                
                <tr>
                    <td><input type="checkbox" ng-checked="checked" ng-click="qx()" /></td>
                    <td>id<button ng-click="id_paixu()">排序</button></td>
                    <td>商品名</td>
                    <td>用户名</td>
                    <td>手机号</td>
                    <td>价格<button ng-click="price_paixu()">排序</button></td>
                    <td>城市</td>
                    <td>下单时间<button ng-click="time_paixu()">排序</button></td>
                    <td>状态</td>
                </tr>
                
            </thead>
            
            <tbody>
                
                <tr ng-repeat="g in goods">
                    <td><input type="checkbox"  ng-checked="checked" ng-click="qx1()"/></td>
                    <td>{{g.gid}}</td>
                    <td>{{g.name}}</td>
                    <td>{{g.user}}</td>
                    <td>{{g.tel}}</td>
                    <td>{{g.price|currency:"￥:"}}</td>
                    <td>{{g.city}}</td>
                    <td>{{g.time|date:"yyyy-MM-dd HH:mm:ss"}}</td>
                    <td><input type="button" value="{{g.zt|myFilter}}" ng-click="fahuo($index)" class="{{g.zt}}" /></td>
                </tr>
                
            </tbody>
            
        </table>
        
        <fieldset ng-show="bb">
            
            <legend>添加信息</legend>
            
            <table>
                
                <tr>
                    <td>商品名</td>
                    <td><input type="text" ng-model="gname"/></td>
                    <td><span>{{s1}}</span></td>
                </tr>
                <tr>
                    <td>用户名</td>
                    <td><input type="text" ng-model="guser"/></td>
                    <td><span>{{s2}}</span></td>
                </tr>
                <tr>
                    <td>手机号</td>
                    <td><input type="text" ng-model="gtel"/></td>
                    <td><span></span></td>
                </tr>
                <tr>
                    <td>价格为</td>
                    <td><input type="text" ng-model="gprice"/></td>
                    <td><span></span></td>
                </tr>
                <tr>
                    <td>城市</td>
                    <td>
                        <select ng-model="gcity">
                            <option>石家庄</option>
                            <option>杭州</option>
                            <option>苏州</option>
                        </select>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td rowspan="3"><button ng-click="tianjia()">添加</button></td>
                </tr>
                
            </table>
            
        </fieldset>
        
    </body>
</html>

未来你好i
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
批量删除记录时如何实现全选方法总结
01-21
如果有个全选按钮把多个页面上显示的记录全都选中删除那比一条条的删除要人性化得多，接下来说一说如何实现，其实网上一搜有好多文章都是说如何进行批量删除的，大体上可以分为两大类1：利用JS脚本实现全选。...
单条数据&批量删除
weixin_44569910的博客
06-25 207
今天向大家分享一下我之前所学的知识，单条数据&批量删除；这个单条数据&批量删除怎么写呢? 我是给了一个名为delStuInfos方法，首先先给两个int的方法记录一下我删除成功和删除失败的数据条数：int countSuccessDel = 0;//记录删除成功的数据条数 int countFailedDel = 0;//记录删除失败的数据条数 接下来就是判断参数是否为null，代...
SSM批量删除
大小鱼鱼鱼鱼鱼
11-13 462
jsp页面: &amp;amp;lt;input type=&amp;quot;checkbox&amp;quot; class=&amp;quot;middle children-checkbox&amp;quot; name=&amp;quot;check&amp;quot; value=&amp;quot;${info.productId}&amp;quot;/&amp;amp;gt; &amp;a
批量添加，删除，修改数据 基于MySQL SSM
wen_z_j的博客
11-07 825
添加 &lt;insert id="functionName" parameterType="java.util.List"&gt;   INSERT INTO table_name   (    field1,field2,field3  )   VALUE   &lt;foreach collection="list" item="item" index="index" sepa
ssm框架下进行的批量删除
liqz666的博客
08-09 1万+
引言：开发web项目时，批量删除作为一个重要的操作模块必不可少，对于很多Java初学者是一个很大的麻烦，我 看了很多关于批量删除写的博客，漏洞百出，因此在我解决问题之后写下一篇博客对那些需要帮助的人指一条明路。 思路:基于ssm框架，利用js和ajax勾选复选框发出请求到Controller进行批量删除操作。 如果想学习java后台开发或者前端开发，需要各种资料，以及遇到开发中的问题，想看源...
全选删除的简单实现
weixin_30251587的博客
11-16 114
<input type="checkbox" id="ckb_selectAll" onclick="selectAll()" title="选中/取消选中"> <a href="javascript:void(0);" onclick="del_()" title="删除选定数据" style="font-weight:normal">删除</a> ...
.net开发中批量删除记录时实现全选功能的具体方法
01-20
往页面上拖一个GridView，设置好数据源，并为GridView添加一个模板列，往模板列里添加一个chekcbox，比如下面的代码 代码如下:”GridView1″ runat=”server” AutoGenerateColumns=”False” DataKeyNames=”...
Android Recyclerview实现多选,单选,全选,反选,批量删除的功能
01-20
Recyclerview 实现多选,单选,全选,反选,批量删除的步骤 1.在Recyclerview布局中添加上底部的全选和反选按钮,删除按钮,和计算数量等控件 2.这里选中的控件没有用checkbox来做,用的是imageview,选中和不选中其实是两...
表格的添加，全选，删除
11-27
html表格的添加，全选，删除
Recyclerview 实现多选,单选,全选,反选,批量删除的功能的实现
11-09
Recyclerview 实现多选,单选,全选,反选,批量删除的功能的实现 1.在Recyclerview布局中添加上底部的全选和反选按钮,删除按钮,和计算数量等控件  2.这里选中的控件没有用checkbox来做,用的是imageview,选中和不选中...
在checkebok选项中进行批量删除
Nightliar的博客
01-14 1009
1.post.html 发布帖子 批量删除 //批量删除的js function publish_delete(){ var ids=""; $("input:checkbox[name=checkBox]:checked").each(function(index){ //代码调试 // console.
spingmvc学习总结——8——批量增加和删除
yss的博客
08-20 1075
springmvc如何实现批量增加和删除呢？ 首先看需求，一个jsp页面，可以选择多个学生进行删除： &lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%&gt; &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 ...
ssm 框架中批量删除操作功能实现流程！
qq_41338740的博客
07-13 1706
首先mapper类定义：public interface VideoMapper { void deleteAllVideo(String[] ids); }再次是videomapper.xml中的映射管理：&lt;?xml version="1.0" encoding="UTF-8"?&gt;&lt;!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapp...
Java+Spring框架实现批量删除操作
大房子爱生活的博客
03-01 1万+
效果展示图： 代码部分： JSP客户端页面部分： 这里用from表单来接收提交的数据传到controller层来进行批量删除操作，用来显示勾选选项，其中的name属性参数都用同一个，然后再控制层接收的时候回自动封装成一个代表id集合的数组，具体代码如下： &lt;form action="delall" method="post"&gt; &lt;p&gt;&lt;a href="/S...
SSM框架整合，实现增删改查
GRAY_KEY的博客
03-22 1066
源码下载：https://github.com/GrayooKey/SSM 项目环境 1、开发工具：IntelliJ IDEA （Maven3.3） 2、数据库：MySql5.6 3、JDK版本：1.8 4、容器：Tomcat8.0 5、框架：Spring + SpringMVC + Mybatis ...
基于SSM批量删除
新春客
12-22 485
简单的删除功能很容易实现，但是在实际开发中批量删除是很常见的一个功能，最近做项目刚好使用过这个功能。所以记录下来。 其实批量删除和删除没有很大的区别，只是修改一下sql语句，然后参数传进来的是一个数组的形式，然后在sql语句中循环这个数组，执行sql语句。直接上代码。 DAO层代码 /**批量删除简历*/ void deleteMany(String[] resumeID); s...
checkbox批量删除功能
热门推荐
lwh_zfj的博客
05-29 2万+
今天来实现一个批量删除的功能：批量删除的功能呢，首先前台页面可以想到使用checkbox来做，这里后台数据库其实有两种删除的方式，如下：但是不管数据库以哪种形式的sql删除，想要批量删除，那么前台传到后台的id肯定是多个哟！！！1、下面就正式开如吧，下面是前台代码片段，迭代的时候取得它的索引号：这个索引是从0开始的，如果想要1，那么就+1就好啦—-${st.index+1}(如下图：)当然啦，上面图
批量删除实现js+springmvc
weixin_33885676的博客
09-08 97
前台的控件 <input type='checkbox' name='isSelect' value='"+data[i].id+"' ></input></td>"; 绑定按钮： <input type="button" onclick="delEdu()" value="Delete" style="color:#95a5a6;...
ssm框架批量删除【亲测】
天地一蜉蝣
12-03 1328
1.点击按钮调用批量删除方法 &lt;button type="button" onclick="deleteUsers()"&gt;删除&lt;/button&gt; 2.放置信息的位置 &lt;form id="userForm"&gt; &lt;table class="table table-bordered"&amp
element表格全选和单选批量删除
最新发布
04-20
针对 element 表格的全选和单选批量删除，您可以首先在表格组件中设置 selection 属性为 true，然后在表格渲染出来后会自动生成一个多选框，您可以通过 v-model 绑定一个数组来获取选中的行数据。 接着，在表格的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值