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; }