javascript - 我如何知道数据表中是否选择了任何行？

Question

我正在使用 DataTables 和validationEngine 插件。

我的问题是我只能知道分页中特定页面上选择了哪些行。因此，如果我在分页的第二页上选择了行，而在第一页上没有选择任何行，则会显示错误“请选择一行”。

我已经阅读过有关它的帖子，但没有特定于我的代码，所以这就是我问这个问题的原因。

所以除了我的验证代码之外，我还应该添加以下代码，

代码

$("#mSelector").on("click", "button[name='next'],button[name='finish']",               
function() {
var $stepSelector = $(".WizardStep:visible"); // get current step               

 var anyError = false;                      
 $stepSelector .find("input,textarea,select").each(function () {
 if (!$(this).validationEngine('validate')) {// validate every input element inside this step
           anyError = true;
    }

 });

 if (anyError)
  return false; // exit if any error found

});

});

代码

$(function () {
        var singleSelect =  $('.single-select').DataTable({
            'lengthMenu': ['300']
        });

        // Single row select
        $('.single-select tbody').on('click', 'tr', function () {
            if ($(this).hasClass('selected')) {
                $(this).removeClass('selected');
                $('#hId').val('');
            } else {
                singleSelect.$('tr.selected').removeClass('selected');
                $(this).addClass('selected');
                $('#Id').val($(this).attr('id'));
            }
        });

        var cId = $('#hdId').val();

        if (cId > 0) {
            $("#grid1.single-select")
                .find("[id='" + currentId + "']")
                .addClass('selected');
        }

        //selection
        var mGrid = $("#mSelector").DataTable({
            'lengthMenu': ['300']

        });
        $('#mSelector tbody').on('click', 'tr', function () {

            if ($(this).hasClass('selected')) {
                $(this).removeClass('selected');
                $('#mId').val('');

            } else {
                mGrid.$('tr.selected').removeClass('selected');
                $(this).addClass('selected');
                $('#mId').val($(this).attr('id'));
            } 

        });

代码

$("button[name='next'],button[name='finish']").click(function() {
  var $step = $(".Step:visible"); // get current step

  var ifError = false;

  $step.find("input,textarea,select").each(function() {
    if (!$(this).validationEngine('validate')) { // validate 
      ifError = false;
    }
  });

  if (ifError)
    return false; // exit if there is an error
});

Answer 1

CAUSE

出于各种原因，DataTables 会从 DOM 中删除不可见的行，因此当您附加事件处理程序时，它仅适用于当前可见的元素。

SOLUTION

您需要通过在 on() 中提供选择器作为第二个参数来使用事件委托(delegate)。打电话。

替换此代码:

$("button[name='next'],button[name='finish']").click(function() {
   // ... skipped ...
});

与

$("#mSelector").on("click", "button[name='next'],button[name='finish']", function() {
   // ... skipped ...
});

其中 mSelector 是您的表 ID。

来自 jQuery on()方法文档:

Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time.

请参阅 jQuery 中的“直接事件和委托(delegate)事件”on()方法文档和jQuery DataTables – Why click event handler does not work了解更多信息。