我正在使用DataTables和validateEngine插件。
我的问题是,我只能知道分页中特定页面上选择了哪些行。因此,如果我在分页的第二页上选择了行,而在第一页上没有选择行,则会向我显示错误“请选择一行”。
我已经阅读了有关它的文章,但并不特定于我的代码,所以这就是我问这个问题的原因。
因此,除了我拥有的验证代码外,我还应该添加以下代码,
代码
$("#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
});
原因
DataTables出于各种原因会从DOM中删除不可见的行,因此,当您附加事件处理程序时,它仅适用于当前可见的元素。
解决方案
您需要通过在on()
调用中提供选择器作为第二个参数来使用事件委托。
替换此代码:
$("button[name='next'],button[name='finish']").click(function() {
// ... skipped ...
});
和
$("#mSelector").on("click", "button[name='next'],button[name='finish']", function() {
// ... skipped ...
});
mSelector
您的表ID在哪里。
从jQueryon()
方法文档中:
委派事件的优势在于,它们可以处理以后在以后添加到文档中的后代元素中的事件。
请参阅jQueryon()
方法文档和jQuery DataTables中的“直接事件和委托事件” –为什么单击事件处理程序不起作用以获取更多信息。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句