如何使用shift键选择jQuery数据表中的多行

时间:2013-02-26 05:20:28

标签: jquery datatable datatables

我需要使用shift键在jQuery数据表中选择多行,与shift-key select函数相同,并将选定的行项存储在变量中。另外,我需要使用点击事件选择多行。

使用单个变量,我需要传递实时点击行和移动选择行。我是怎么做到的?

这不能正常工作,并且不会为所选行存储单个变量。我哪里错了?

我的代码:

var aSelected = [];
var lastSelected;

$('#table tr').live('click', function (event) {
    var tableRow = $(this).closest("tr").prevAll("tr").length + 1;

    var id = this.cells[0].innerHTML;
    var index = jQuery.inArray(id, aSelected);
    if (index === -1) {
        aSelected.push(id);
    } else {
        aSelected.splice(index, 1);
    }

    $(this).toggleClass('row_selected');

    if (event.shiftKey) {
        var table = $('#table ');
        var start = Math.min(tableRow, lastSelected);
        var end = Math.max(tableRow, lastSelected);

        for (var i = start; i < end; i++) {
            $('#table').each(function () {
                table.find('tr:gt(' + (start - 1) + '):lt(' + (end) + ')').addClass('row_selected');
            });
        }

    } else {

        lastSelected = $(this).closest("tr").prevAll("tr").length + 1;
    }
});

例如我有20行。有3个原因我选择行并传递选定的行ID 1.使用Ctrl键选择多行并传递2.使用shift键选择下一个接下来的10行并传递3.使用shift键选择下一个接下来的10个行行和额外的2行使用Ctrl键其他10行并传递12行

2 个答案:

答案 0 :(得分:1)

使用以下代码

     $('#tableId').dataTable( {

    "sDom": 'T<"clear">lfrtip',
    "oTableTools": {
        "sRowSelect": "multi",
        "aButtons": [ "select_all", "select_none" ]
    }
} );

使用此代码,您可以选择多行,而不使用Shift键

答案 1 :(得分:0)

window.onmousemove = function (e) {
    shiftKey=false;
    if (e.shiftKey) shiftKey=true;
} 
dataTableID='yourDataTable';
$('#'+dataTableID).DataTable().on( 'select', function ( e, dt, type, indexes ) {                        
    thisID=e.currentTarget.id;
    selecting=$('#'+thisID).attr('selecting');
    if (typeof(selecting)=="undefined" || selecting=="false"){
        idx=indexes[0];
        lastSelected=$('#'+thisID).attr('lastSelected');
               
        if (shiftKey==true) {
            $('#'+thisID).attr('lastSelected',idx);
            if (typeof(lastSelected)!="undefined" && lastSelected !='') {   
                min=idx+1;
                max=lastSelected;
                if (max<min) {
                    tmp=min;
                    min=max;
                    max=tmp;                
                }
                if (min<max) {
                    $('#'+thisID).attr('selecting',"true");
                    for (x=min;x<max;x++) $('#'+thisID).DataTable().row( x ).select();
                    $('#'+thisID).attr('selecting',"false");                                    
                }
            }
        } else {
            $('#'+thisID).attr('lastSelected','');
        }
    }                    
});
$('#'+settings.sTableId).DataTable().on( 'deselect', function ( e, dt, type, indexes ) {                        
    thisID=e.currentTarget.id;
    $('#'+thisID).attr('lastSelected','');                 
});