zoukankan      html  css  js  c++  java
  • 表格固定行支持多选

      1 var tableMultiple = {
      2     checkDataArr: [],
      3     checkId:'',
      4     inputCheckFunc: function (tableWrapDoms, id, singleCheck) {//tableWrapDoms-包裹固定表格的dom 、id-用于识别数据的唯一id 、singleCheck-单选
      5         var _this = this;
      6         _this.checkId = id;
      7         //表格选中行
      8         var tableAllSelected = false;
      9         var userAgent = navigator.userAgent.toLowerCase();
     10         var tableWrapDom = $(tableWrapDoms);
     11         tableWrapDom.on('click', '.left-table tr td:first-child', function () {
     12             var _index = $(this).parent().index();
     13             var checkbox = $(this).find('input[type="checkbox"]');
     14             var spreadCheck = JSON.parse(unescape($(this).parent('tr').attr('attr')));
     15             if (!checkbox.prop("disabled")) {
     16                 if ($(this).parent().hasClass('selected-bg')) {//不选中
     17                     $(this).parent().removeClass('selected-bg');
     18                     tableWrapDom.find('.right-table tbody tr').eq(_index).removeClass('selected-bg');
     19                     checkbox.prop('checked', false);
     20                     spreadCheck['Checked'] = false;
     21                 } else {//选中
     22                     $(this).parent().addClass('selected-bg');
     23                     tableWrapDom.find('.right-table tbody tr').eq(_index).addClass('selected-bg');
     24                     checkbox.prop('checked', true);
     25                     spreadCheck['Checked'] = true;
     26                     if (singleCheck) {
     27                         $(this).parent('tr').sinblings().removeClass('selected-bg').find('input[type="checkbox"]').prop('checked', false);
     28                         tableWrapDom.find('.right-table table tbody tr').removeClass('selected-bg');
     29                         tableWrapDom.find('.right-table table tbody tr').eq(_index).addClass('selected-bg');
     30                     }
     31                 }
     32             }            
     33             _this.spreadMultipleFunc(spreadCheck)
     34             var checkLength = tableWrapDom.find('tbody input[type="checkbox"]:checked').length;
     35             var notDsiable = tableWrapDom.find('tbody input[type="checkbox"]:not(:disabled)').length;
     36             if (notDsiable == 0) {
     37                 tableAllSelected = false
     38             } else {
     39                 $('table th input').prop('checked', checkLength == notDsiable ? tableAllSelected = true : tableAllSelected = false);
     40             }
     41         });
     42         //全选
     43         tableWrapDom.on('click', '.left-table table th input', function () {           
     44             _this.checkAllCommonFunc($(this), tableWrapDom, tableAllSelected);
     45         });
     46         tableWrapDom.on('dblclick', '.left-table table th input', function () {
     47             if (userAgent.match(/edge/([d.]+)/) || userAgent.match(/(msies|trident.*rv:)([w.]+)/)) {
     48                 _this.checkAllCommonFunc($(this), tableWrapDom, tableAllSelected);
     49             }
     50         });
     51     },
     52     checkAllCommonFunc: function ($this, tableWrapDom, tableAllSelected) {
     53         var _this = this;
     54         var checkList = tableWrapDom.find('input[type="checkbox"]:not(:disabled)');
     55         var selectedAllData = [];
     56         if ($this.prop('checked')) {
     57             checkList.prop('checked', true);
     58             checkList.parent().parent().addClass('selected-bg');
     59             tableWrapDom.find('.right-table tbody tr').addClass('selected-bg');
     60             tableWrapDom.find('.left-table table tbody tr.selected-bg').each(function () {
     61                 var spreadCheck = JSON.parse(unescape($(this).attr('attr')));
     62                 spreadCheck['Checked'] = true;
     63                 selectedAllData.push(spreadCheck);
     64             });
     65             _this.spreadMultipleFunc(selectedAllData);
     66         } else {
     67             checkList.prop('checked', false);
     68             checkList.parent().parent().removeClass('selected-bg');
     69             tableWrapDom.find('.right-table tbody tr').removeClass('selected-bg');
     70             tableWrapDom.find('.left-table table tbody tr').each(function () {
     71                 var spreadCheck = JSON.parse(unescape($(this).attr('attr')));
     72                 spreadCheck['Checked'] = false;
     73                 selectedAllData.push(spreadCheck);
     74             });
     75             _this.spreadMultipleFunc(selectedAllData, true);
     76         }
     77         $this.parent().parent().removeClass('selected-bg');
     78         tableAllSelected = !tableAllSelected;
     79     },
     80     indexOf: function (val) {
     81         var _this = this;
     82         for (var i = 0; i < _this.checkDataArr.length; i++) {
     83             if (_this.checkDataArr[i] == val) return i;
     84         }  
     85         return -1;  
     86     },
     87     remove: function (val) {
     88         var _this = this;
     89         var index = _this.indexOf(val);  
     90         if (index > -1) {  
     91             _this.checkDataArr.splice(index, 1);
     92         }  
     93     },
     94     spreadMultipleFunc: function (checkData,unCheck) {
     95         var _this = this;
     96         if (checkData instanceof Array) {
     97             if (_this.checkDataArr && _this.checkDataArr.length > 0) {
     98                 var newArr = _this.checkDataArr.concat();
     99                 if (unCheck) {                    
    100                     newArr.forEach(function (item, index) {
    101                         checkData.forEach(function (subItem) {
    102                             if (subItem[_this.checkId] == item[_this.checkId]) _this.remove(item);
    103                         });
    104                     });
    105                 } else {
    106                     checkData.forEach(function (item) {
    107                         var repeatNum = 0;
    108                         newArr.forEach(function (subItem) {
    109                             if (subItem[_this.checkId] == item[_this.checkId]) repeatNum++;
    110                         });
    111                         if (repeatNum == 0) _this.checkDataArr.push(item);
    112                     });
    113                     
    114                 }
    115             } else {
    116                 checkData.forEach(function (item) {
    117                     _this.checkDataArr.push(item);
    118                 });
    119             }
    120         } else {
    121             if (checkData.Checked) {
    122                 if (_this.checkDataArr && _this.checkDataArr.length > 0) {
    123                     if (_this.checkDataArr.indexOf(checkData) === -1) _this.checkDataArr.push(checkData);
    124                 } else {
    125                     _this.checkDataArr.push(checkData);
    126                 }
    127                 
    128             } else {
    129                 _this.checkDataArr.forEach(function (item, index) {
    130                     if (item[_this.checkId] == checkData[_this.checkId]) {
    131                         _this.checkDataArr.splice(index, 1);
    132                     }
    133                 });
    134             }
    135         }
    136     },
    137     initSelectedTr: function (tableWrapDom,dataLength) {
    138         var _this = this;
    139         if ($(tableWrapDom).find('.left-table tbody tr').length > 0 && _this.checkDataArr.length > 0) {
    140             $(tableWrapDom).find('.left-table tbody tr').each(function () {
    141                 var $this = $(this);
    142                 var _index = $(this).index();
    143                 var obj = JSON.parse(unescape($(this).attr('attr')));                
    144                 _this.checkDataArr.forEach(function (item) {
    145                     if (obj[_this.checkId] == item[_this.checkId]) {
    146                         $this.addClass('selected-bg').find('input[type="checkbox"]').prop('checked', true);
    147                         $(tableWrapDom).find('.right-table tbody tr').eq(_index).addClass('selected-bg');
    148                     }
    149                 });
    150             });
    151             if ($(tableWrapDom).find('.left-table tbody tr td input[type="checkbox"]:checked').length == dataLength) {
    152                 $(tableWrapDom).find('.left-table th input[type="checkbox"]').prop('checked', true);
    153             } else {
    154                 $(tableWrapDom).find('.left-table th input[type="checkbox"]').prop('checked', false);
    155             }
    156         }
    157     }
    158 }

    调用:

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

  • 相关阅读:
    6.66 分钟,一文Python爬虫解疑大全教入门!
    十分钟快速入门 Python,看完即会,不用收藏!
    Python3中真真假假True、False、None等含义详解
    Python基础系列讲解——时间模块详解大全之time模块
    超详细Pycharm部署项目视频教程
    Python进阶量化交易专栏场外篇7- 装饰器计算代码时间
    docker 基本命令
    Linux常用命令
    Docker-部署Mysql
    docker 容器内运行vim命令
  • 原文地址:https://www.cnblogs.com/myyouzi/p/11155570.html
Copyright © 2011-2022 走看看