js实现跨页勾选复选框

最新推荐文章于 2024-09-23 15:38:48 发布

置顶

奔波霸0620

最新推荐文章于 2024-09-23 15:38:48 发布

阅读量4.5k

点赞数

分类专栏： js 文章标签： js实现跨页勾选

本文链接：https://blog.csdn.net/qq_38130865/article/details/81218544

版权

本文介绍了如何在前台列表页面利用JavaScript实现跨页勾选复选框的功能。通过创建一个JS Map存储勾选的主键，点击事件处理函数检查和更新Map，实现了勾选和取消勾选的操作。同时，提供了代码示例和相关Markdown语法的展示。

摘要由CSDN通过智能技术生成

在这里插入代码片# 前台列表页面实现跨页勾选复选框

思路：分页是后台服务端分页。做不到实时性。所以在js中可以封装一个js Map，每勾选一个将勾选的主键放到Map中，取消勾选时将其从Map中移除。不多说了上代码吧。
/**

点击单个checkbox
@param ydsjuuid
*/
function checkOne(ydsjuuid) {
$KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲ydsxListTable t\dots$ ("#" + ydsjuuid).is(’:checked’)) {
$(this).addClass(“selected”);
var value = “{ydsjuuid:” + “”" + ydsjuuid + “”}";
_ydsjUuidList.remove(ydsjuuid);
_ydsjUuidList.put(ydsjuuid, value);
$("#ydsxListTable tbody tr").unbind(“click”);// 清除行绑定事件
} else {
$(this).removeClass(“selected”);
_ydsjUuidList.remove(ydsjuuid);
$("#ydsxListTable tbody tr").unbind(“click”);// 清除行绑定事件
}
});
}

封装Map.js
function Map() {
this.elements = new Array();

//获取MAP元素个数     
this.size = function() {     
    return this.elements.length;     
};     
   
//判断MAP是否为空     
this.isEmpty = function() {     
    return(this.elements.length < 1);     
};   
   
//删除MAP所有元素     
this.clear = function() {     
    this.elements = new Array();     
};     
   
//向MAP中增加元素（key, value)      
this.put = function(_key, _value) {     
    this.elements.push( {     
        key : _key,     
        value : _value     
    });     
};     
   
//删除指定KEY的元素，成功返回True，失败返回False     
this.remove = function(_key) {     
    var bln = false;     
    try{     
        for(i = 0; i < this.elements.length; i++) {     
            if(this.elements[i].key == _key) {     
                this.elements.splice(i, 1);     
                return true;     
            };     
        };     
    } catch(e) {     
        bln = false;     
    }     
    return bln;     
};     
   
//获取指定KEY的元素值VALUE，失败返回NULL     
this.get = function(_key) {     
    try{     
        for(i = 0; i < this.elements.length; i++) {     
            if(this.elements[i].key == _key) {     
                return this.elements[i].value;     
            }     
        }     
    } catch(e) {     
        return null;     
    };     
};     
   
//获取指定索引的元素（使用element.key，element.value获取KEY和VALUE），失败返回NULL     
this.element = function(_index) {     
    if(_index < 0 || _index >= this.elements.length) {     
        return null;     
    }     
    return this.elements[_index];     
};     
   
//判断MAP中是否含有指定KEY的元素     
this.containsKey = function(_key) {     
    var bln = false;     
    try{     
        for(i = 0; i < this.elements.length; i++) {     
            if(this.elements[i].key == _key) {     
                bln = true;     
            }     
        }     
    } catch(e) {     
        bln = false;     
    }     
    return bln;     
};     
   
//判断MAP中是否含有指定VALUE的元素     
this.containsValue = function(_value) {     
    var bln = false;     
    try{     
        for(i = 0; i < this.elements.length; i++) {     
            if(this.elements[i].value == _value) {     
                bln = true;     
            };     
        };     
    } catch(e) {     
        bln = false;     
    }     
    return bln;     
};     
   
//获取MAP中所有VALUE的数组（ARRAY）     
this.values = function() {     
    var arr = new Array();     
    for(i = 0; i < this.elements.length; i++) {     
        arr.push(this.elements[i].value);     
    }     
    return arr;     
};     
   
//获取MAP中所有KEY的数组（ARRAY）     
this.keys = function() {     
    var arr = new Array();     
    for(i = 0; i < this.elements.length; i++) {     
        arr.push(this.elements[i].key);     
    }     
    return arr;     
};