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;
    }
相關文章
相關標籤/搜索