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;
}
angular4.x实现一个全选,反选,外加从下一页返回上一页,选中上一次的操作记录的更多相关文章
- jQuery全选反选插件
(function($){ $.fn.check = function(options){ var options = $.extend({ element : "input[name='n ...
- JavaScript、全选反选-课堂笔记
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JQuery实现列表中复选框全选反选功能封装
我们在做列表的时候经常会遇到全选,反选进行批量处理问题,例如: 我当时就是简单的实现了,然后想封装到公共的js中,封装的太烂,不好意思贴出来了(就是把实现代码之间放到公共js中,然后每个页面都用固定的 ...
- 用Vue实现一个全选指令
最近用vue做了两个项目,都需要实现全选反选的功能,两个项目用了两种实现方法,第一个项目用vue的computed,第二个项目用指令来实现,用起来,发觉指令更加方便. 第一次做全选的时候是刚开始接触v ...
- 关于input全选反选恶心的异常情况
上一篇讲到:第一次点击全选按钮input显示对勾,第二次则不显示,需要用prop来添加checked属性. 但是用prop会出现一个问题,对勾显示,而checked属性不会被添加(比如:$(" ...
- 用javascript实现全选/反选组件
以下是本人制作的全选/反选 组件,供广大同行参考.指正: 效果如图: 在实现的过程中,全选和全部取消选中这两个功能较为简单,只需用for循环遍历所有复选框为true或false即可.反选也较为简单,也 ...
- 如何在datagridview 的head上绘制一个全选按钮
winform的项目中,经常要用到datagridview控件,但是为控件添加DataGridViewCheckBoxColumn来实现数据行选择这个功能的时候,经常需要提供全选反选功能,如果不重绘控 ...
- Dom操作--全选反选
我们经常会在网站上遇到一些多选的情况,下面我就来说说使用Dom写全选反选的思路. 全选思路:首先,我们来分析一下知道,当我们点击"全选"复选框的时候,所有的复选框应该都被选中,那我 ...
- jquery 书写全选反选功能
书写一个后台管理中用到的全选反选功能.代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta ...
随机推荐
- live555流媒体框架介绍
LIVE555 Streaming Media This code forms a set of C++ libraries for multimedia streaming, using open ...
- Maven 学习(一)-Maven 使用入门
http://www.cnblogs.com/xdp-gacl/p/3498271.html http://www.cnblogs.com/xdp-gacl/p/4240930.html 一.Mave ...
- c语言联合union的使用用途
在使用联合的使用,我们通常用来判断大小端,但是其实不仅仅有这个用处. 我在网上看到还有其他的用途: 1.分离高低字节 这个需要结合cpu大小端来判断,原文如下: 这样的操作,而一个除法消耗四个机器周期 ...
- .dxf文件
DXF 是 AutoCAD 与其它软件之间进行 CAD 数据交换的开放矢量数据文件格式,可以分为两类:ASCII 格式和二进制格式:ASCII 具有可读性好的特点,但占用的空间较大:二进制格式则占用的 ...
- 简要总结selenium四个工具组
selenium 是基于WEB的自动化测试工具. 由以下几个工具组组成 1.selenium IDE: 一个火狐插件 点击这个插件就进入录制界面,能够记录用户的操作,并且将其导出为可重复使用的测试脚本 ...
- vim命令(转)
1.Linux下创建文件 vi test.txt 或者 vim test.txt 或者 touch test.txt 2.vi/vim 使用 基本上 vi/vim 共分为三种模式,分别是命令模式(Co ...
- java 面向对象2
1. 类是对某一类事物的抽象描述,而对象用于表示现实中该类事物的个体. 玩具模型是类: 玩具是对象: ★局部变量和成员变量的区别: 区别一:定义的位置不同 定义在类中的变量是成员变量 定义在方法中或 ...
- RFM模型的变形LRFMC模型与K-means算法的有机结合
应用场景: 可以应用在不同行业的客户分类管理上,比如航空公司,传统的RFM模型不再适用,通过RFM模型的变形LRFMC模型实现客户价值分析:基于消费者数据的精细化营销 应用价值: LRFMC模型构建之 ...
- git 中文文件名乱码
git 默认中文文件名是 \xxx\xxx 等八进制形式,是因为 对0x80以上的字符进行quote. 只需要设置core.quotepath设为false,就不会对0x80以上的字符进行quote. ...
- UE4破碎物体
1. 创建可破碎物体 首先,启用插件: 然后,选择一个模型,右键,创建可破碎物体: 2. 创建蓝图 把新创建出来的物体创建为蓝图: 击碎物体的蓝图节点: 当然,要把那个物体(图上的Destructib ...