ctrl,shift 多选表格行

jerry thinkphp 2015年11月19日 收藏
实现类似资源管理器一样的选择方案
按住ctrl加选,按住shift连选,
active是选中后的CSS效果,自行设计或更改
var lastChecked;
    $('#example tbody').on("click","tr", function(event) {
                 
        if(!lastChecked) {
            lastChecked = this;
        }
         
        if(event.shiftKey) {
            var start = $('#example tbody tr').index(this);
            var end = $('#example tbody tr').index(lastChecked);
     
            for(i=Math.min(start,end);i<=Math.max(start,end);i++) {
                if (!$('#example tbody tr').eq(i).hasClass('active')){
                    $('#example tbody tr').eq(i).addClass("active");
                }
            }
            
            //清楚浏览器光标选择
            if (window.getSelection) {
                if (window.getSelection().empty) {  // Chrome
                    window.getSelection().empty();
                } else if (window.getSelection().removeAllRanges) {  // Firefox
                    window.getSelection().removeAllRanges();
                }
            } else if (document.selection) {  // IE
                document.selection.empty();
            }
        } else if ((event.metaKey || event.ctrlKey)){
            $(this).toggleClass('active');
        } else {
            $('#example tbody tr').removeClass('active');
            $(this).toggleClass('active');  
        }
         
        lastChecked = this;
    });