zoukankan      html  css  js  c++  java
  • angular4.x实现一个全选,反选,外加从下一页返回上一页,选中上一次的操作记录

    效果图片展示

    
    productMap:any = new Map<string, string>(); //定义一个map的数据模型
        //只要操作这个checkbox 那么只管把数据全部勾起了就行了 刷新数据源:products
        checkAll(page:any): void{
    
            //todo 取出用户当前是选中还是取消选中的标识
            let isTrue = $('#all_'+page).is(':checked');
            //let productMap = new Map();
            var tempArr = this.products;
            for(let item of tempArr){
                if(isTrue){
                    item['checked'] = true;
                    this.productMap.set(item.product_id, true);
                }else {
                    item['checked'] = false;
                    this.productMap.set(item.product_id, false);
                }
    
            }
    
            this.products = JSON.parse(JSON.stringify(tempArr)); //刷新数据源——这里需要深度拷贝界面才会动态刷新
    
            //console.log('tempArr',tempArr);
            console.log("this.products",this.products)
            console.log('checkAllproductMap',this.productMap);
        }
    
    
        //操作某一个checkbox框,做两件事:记录是否选中,去循环判断顶部的全选是否需要选中
        checkChange(obj):void{
    
            let tempArr = this.products;
            for(let item of tempArr){
                if(item.product_id === obj.product_id){
                    let isFlag = !item.checked;
                    item['checked']=!item.checked;
                    this.productMap.set(item.product_id, isFlag);
                }
    
            }
    
            //返回一个新的数组,包含从 start 到 end (不包括该元素)的 arrayObject 中的元素。返回选定的元素,该方法不会修改原数组。
            let tempList = tempArr.slice(0,tempArr.length)
            this.products = tempList; //刷新数据源
            console.log('checkChangeproductMap',this.productMap);
    
            //todo 处理顶部按钮是否是全选的逻辑
            //let isChecked =
            let result = tempList.filter(item => {
                return item.checked ===true;
            })
            //debugger
            let pageNum = this.productList.pager.currentPage;
            if(result.length ===15){ //顶部的全选选中
                $("#all_"+pageNum).prop("checked",true);
            }else { //顶部的全选不选中
                $("#all_"+pageNum).attr("checked",false);
            }
    
    
        }
    
        //每次翻页的时候进行比对需要选中哪些数据
        pageChange():void{
    
            //从当前的15条数据中回显需要选中的数据,前置条件:如果本地的this.productMap有值
            let tempArr = this.products;
            for(let item of tempArr){
                item['checked'] = this.productMap.get(item.product_id)
            }
    
            let tempList = tempArr.slice(0,tempArr.length);
            let result = tempList.filter(item => {
                return item.checked ===true;
            })
            //debugger
            let pageNum = this.productList.pager.currentPage;
            if(result.length ===15){ //顶部的全选选中
                $("#all_"+pageNum).prop("checked",true);
            }else { //顶部的全选不选中
                $("#all_"+pageNum).attr("checked",false);
            }
    
            this.products = tempList;
        }
    
    
    
    
  • 相关阅读:
    学习Mybatis与mysql数据库的示例笔记
    SpringAOP学习笔记
    idea开发ssh(Spring+struts+Hibernate)实现对MySQL数据库的增删改查
    springmvc加vue实现前后端数据的跨域访问
    idea开发工具springmvc加vue.js实现MySQL数据库的查询操作
    利用idea开发工具实现ssh(spring+struts+hibernate)加vue.js前后台对数据库的查询
    appweb 7.0.2版本编译
    Unable to register the DLL/OCX: RegSvr32 failed with exit code 0x3 我的解决方法
    无法定位程序输入点 InitializeCriticalSectionEx 于动态链接库 Kernel32.dll 上 问题解决方法
    海思3516D + IMX291图像闪烁问题定位
  • 原文地址:https://www.cnblogs.com/zxyun/p/11451187.html
Copyright © 2011-2022 走看看