JavaScript处理数据列表页面的复选框

[ JavaScript ] 2019-12-19 20:56:27 杨歆 411
var TableCheckBox = {

    // 表格标签选择器
    el: '.table-check-box',
    // 全选框选择器
    selectAll: '.check-box-all',
    // 单个选择框选择器
    select: '.check-box-only',
    // 回调方法
    callback: function(){},
    // 配置
    config: {},
    // 对象
    objects: {
        el: null,
        selectAll: null,
        select: null
    },
    version: 'v2.1008.1352',
    /**
     * 初始化
     * @param config
     */
    init(config){
        // 配置处理
        this.conf(config);
        this.objects.el = document.querySelector(this.el);
        if(this.objects.el instanceof HTMLElement){
            this.objects.selectAll = this.objects.el.querySelectorAll(this.selectAll);
            this.objects.select = this.objects.el.querySelectorAll(this.select);
        }
        // 调用处理选择框
        this.handle();
        return this;
    },

    /**
     * 处理选择框
     */
    handle(){
        let that = this;
        that.foreach(that.objects.selectAll, function (only) {
            only.addEventListener('click', function (event) {
                event.stopPropagation();
                let selectAll = this, count = 0;
                that.foreach(that.objects.select, function(box){
                    box.checked = selectAll.checked ? true : false;
                    if(box.checked == true) count++;
                });
                that.foreach(that.objects.selectAll,function(box){
                    box.checked = selectAll.checked ? true : false;
                });
            });
        });
        that.foreach(that.objects.select, function(only, len){
            only.addEventListener('click', function(event){
                event.stopPropagation();
                let count = 0;
                that.foreach(that.objects.select,function(box){
                    if(box.checked == true) count++;
                });
                that.foreach(that.objects.selectAll,function(box){
                    box.checked = (count == len) ? true : false;
                });
            });
        });
    },

    /**
     * 配置相关参数
     * @param config
     */
    conf(config){
        // 配置
        if(typeof(config) == "object" && Object.prototype.toString.call(config).toLowerCase() == "[object object]" && !config.length){
            this.config = config;
        }
        // 表格标签选择器
        this.el = this.config.hasOwnProperty('el') ? this.config.el : this.el;
        // 全选框选择器
        this.selectAll = this.config.hasOwnProperty('selectAll') ? this.config.selectAll : this.selectAll;
        // 单个选择框选择器
        this.select = this.config.hasOwnProperty('select') ? this.config.select : this.select;
        // 回调执行方法
        if(typeof this.config.callback != 'undefined' && this.config.callback instanceof Function){
            this.callback = this.config.callback;
        };
    },

    /**
     * 循环回调
     * @param array
     * @param callback
     */
    foreach(array, callback){

        var length = array.length;
        for(var i = 0; i < length; i++){
            if(typeof callback != 'undefined' && callback instanceof Function){
                callback(array[i], length);
            };
        }

    },

};
TableCheckBox.init();
支付宝支付
打赏
微信支付

联系我吧

有些人是会淡出你的生活的,有些人刻意不再联系,是因为你知道ta不需要你,或者从一开始就不是同一个初衷在一起度过,不主动联系很久也不见一次面,所有的感情也罢,都会败给时间和距离。因为时间是最无情,给你后悔的时刻却不会给你改过重来的机会。

位置

成都市 四川省 中国

联系电话

028-6406-0000

邮箱

y139w@163.com

企鹅

27572048

网址

https://www.weania.com