表格固定行支持多选

var tableMultiple = {
    checkDataArr: [],
    checkId:'',
    inputCheckFunc: function (tableWrapDoms, id, singleCheck) {//tableWrapDoms-包裹固定表格的dom 、id-用于识别数据的唯一id 、singleCheck-单选
        var _this = this;
        _this.checkId = id;
        //表格选中行
        var tableAllSelected = false;
        var userAgent = navigator.userAgent.toLowerCase();
        var tableWrapDom = $(tableWrapDoms);
        tableWrapDom.on('click', '.left-table tr td:first-child', function () {
            var _index = $(this).parent().index();
            var checkbox = $(this).find('input[type="checkbox"]');
            var spreadCheck = JSON.parse(unescape($(this).parent('tr').attr('attr')));
            if (!checkbox.prop("disabled")) {
                if ($(this).parent().hasClass('selected-bg')) {//不选中
                    $(this).parent().removeClass('selected-bg');
                    tableWrapDom.find('.right-table tbody tr').eq(_index).removeClass('selected-bg');
                    checkbox.prop('checked', false);
                    spreadCheck['Checked'] = false;
                } else {//选中
                    $(this).parent().addClass('selected-bg');
                    tableWrapDom.find('.right-table tbody tr').eq(_index).addClass('selected-bg');
                    checkbox.prop('checked', true);
                    spreadCheck['Checked'] = true;
                    if (singleCheck) {
                        $(this).parent('tr').sinblings().removeClass('selected-bg').find('input[type="checkbox"]').prop('checked', false);
                        tableWrapDom.find('.right-table table tbody tr').removeClass('selected-bg');
                        tableWrapDom.find('.right-table table tbody tr').eq(_index).addClass('selected-bg');
                    }
                }
            }            
            _this.spreadMultipleFunc(spreadCheck)
            var checkLength = tableWrapDom.find('tbody input[type="checkbox"]:checked').length;
            var notDsiable = tableWrapDom.find('tbody input[type="checkbox"]:not(:disabled)').length;
            if (notDsiable == 0) {
                tableAllSelected = false
            } else {
                $('table th input').prop('checked', checkLength == notDsiable ? tableAllSelected = true : tableAllSelected = false);
            }
        });
        //全选
        tableWrapDom.on('click', '.left-table table th input', function () {           
            _this.checkAllCommonFunc($(this), tableWrapDom, tableAllSelected);
        });
        tableWrapDom.on('dblclick', '.left-table table th input', function () {
            if (userAgent.match(/edge\/([\d.]+)/) || userAgent.match(/(msie\s|trident.*rv:)([\w.]+)/)) {
                _this.checkAllCommonFunc($(this), tableWrapDom, tableAllSelected);
            }
        });
    },
    checkAllCommonFunc: function ($this, tableWrapDom, tableAllSelected) {
        var _this = this;
        var checkList = tableWrapDom.find('input[type="checkbox"]:not(:disabled)');
        var selectedAllData = [];
        if ($this.prop('checked')) {
            checkList.prop('checked', true);
            checkList.parent().parent().addClass('selected-bg');
            tableWrapDom.find('.right-table tbody tr').addClass('selected-bg');
            tableWrapDom.find('.left-table table tbody tr.selected-bg').each(function () {
                var spreadCheck = JSON.parse(unescape($(this).attr('attr')));
                spreadCheck['Checked'] = true;
                selectedAllData.push(spreadCheck);
            });
            _this.spreadMultipleFunc(selectedAllData);
        } else {
            checkList.prop('checked', false);
            checkList.parent().parent().removeClass('selected-bg');
            tableWrapDom.find('.right-table tbody tr').removeClass('selected-bg');
            tableWrapDom.find('.left-table table tbody tr').each(function () {
                var spreadCheck = JSON.parse(unescape($(this).attr('attr')));
                spreadCheck['Checked'] = false;
                selectedAllData.push(spreadCheck);
            });
            _this.spreadMultipleFunc(selectedAllData, true);
        }
        $this.parent().parent().removeClass('selected-bg');
        tableAllSelected = !tableAllSelected;
    },
    indexOf: function (val) {
        var _this = this;
        for (var i = 0; i < _this.checkDataArr.length; i++) {
            if (_this.checkDataArr[i] == val) return i;
        }  
        return -1;  
    },
    remove: function (val) {
        var _this = this;
        var index = _this.indexOf(val);  
        if (index > -1) {  
            _this.checkDataArr.splice(index, 1);
        }  
    },
    spreadMultipleFunc: function (checkData,unCheck) {
        var _this = this;
        if (checkData instanceof Array) {
            if (_this.checkDataArr && _this.checkDataArr.length > 0) {
                var newArr = _this.checkDataArr.concat();
                if (unCheck) {                    
                    newArr.forEach(function (item, index) {
                        checkData.forEach(function (subItem) {
                            if (subItem[_this.checkId] == item[_this.checkId]) _this.remove(item);
                        });
                    });
                } else {
                    checkData.forEach(function (item) {
                        var repeatNum = 0;
                        newArr.forEach(function (subItem) {
                            if (subItem[_this.checkId] == item[_this.checkId]) repeatNum++;
                        });
                        if (repeatNum == 0) _this.checkDataArr.push(item);
                    });
                    
                }
            } else {
                checkData.forEach(function (item) {
                    _this.checkDataArr.push(item);
                });
            }
        } else {
            if (checkData.Checked) {
                if (_this.checkDataArr && _this.checkDataArr.length > 0) {
                    if (_this.checkDataArr.indexOf(checkData) === -1) _this.checkDataArr.push(checkData);
                } else {
                    _this.checkDataArr.push(checkData);
                }
                
            } else {
                _this.checkDataArr.forEach(function (item, index) {
                    if (item[_this.checkId] == checkData[_this.checkId]) {
                        _this.checkDataArr.splice(index, 1);
                    }
                });
            }
        }
    },
    initSelectedTr: function (tableWrapDom,dataLength) {
        var _this = this;
        if ($(tableWrapDom).find('.left-table tbody tr').length > 0 && _this.checkDataArr.length > 0) {
            $(tableWrapDom).find('.left-table tbody tr').each(function () {
                var $this = $(this);
                var _index = $(this).index();
                var obj = JSON.parse(unescape($(this).attr('attr')));                
                _this.checkDataArr.forEach(function (item) {
                    if (obj[_this.checkId] == item[_this.checkId]) {
                        $this.addClass('selected-bg').find('input[type="checkbox"]').prop('checked', true);
                        $(tableWrapDom).find('.right-table tbody tr').eq(_index).addClass('selected-bg');
                    }
                });
            });
            if ($(tableWrapDom).find('.left-table tbody tr td input[type="checkbox"]:checked').length == dataLength) {
                $(tableWrapDom).find('.left-table th input[type="checkbox"]').prop('checked', true);
            } else {
                $(tableWrapDom).find('.left-table th input[type="checkbox"]').prop('checked', false);
            }
        }
    }
}

 

 

调用：

tableMultiple.inputCheckFunc('#mianTable', 'RecordId');

//获取选中的数据

tableMultiple.checkDataArr.forEach(function (item) {
                item['PassStatus'] = PassStatus;
                try {
                    tempDt.forEach(function (item2) {
                        if (item.SapId == item2.SapId) {
                            item2['PassStatus'] = PassStatus;
                            throw '';
                        }
                    });
                    tempDt.push(item);
                } catch (e) {

                }
            });

　　tableMultiple.initSelectedTr('#mianTable', result.data.rows.length);