使用 form-repeater 在填充的表中添加新行需要很长时间（10-15 秒） - jQuery
Posted
技术标签:
【中文标题】使用 form-repeater 在填充的表中添加新行需要很长时间（10-15 秒） - jQuery【英文标题】：Appending a new row inside the populated table using form-repeater takes a huge time (10-15s) - jQuery 【发布时间】：2019-11-29 02:14:52 【问题描述】：我正在为表格元素使用表单中继器插件。填充表格后，当我单击加号按钮（添加新行）时，需要花费大量时间（大约 10-15 秒）才能添加新行。
我的桌子的屏幕截图
每次点击（加号按钮）都会执行以下函数
CheckEmptyInputs() CheckDuplicateRanges() ：检查 Min-Range 和 Max-Range 中的重复范围。我尝试过的事情：
在验证后每次成功单击加号按钮时，将名为“已完成” 的类添加到所有行。我这样做是因为当我再次单击加号按钮时，我告诉 JS 不要检查类 " 已完成 " 的行，以避免不必要的检查。 我删除了类 " completed " OnDOMSubtreeModified 用于 tr。所以这个计划工作得很好，除非类被删除，否则 JS 不会每次都检查这些名为 completed 的行。 我尝试检查哪个函数花费了很多时间，结果 checkEmptyInputs() 和 CheckDuplicateRanges() 执行得更快。注意 - 1： 我正在使用为 Min-Max-Range-Columns 极度定制的 Summernote。 注意 - 2：我正在使用 select2 插件作为下拉列表列。
因此，我认为时间滞后可能是由于以下原因
-
为这 6 列初始化 summernote 和 select2 插件
可能是表单重复代码有问题？？？？ 我没有检查表单重复代码
这是我当前的代码。
加号按钮的 HTML 代码（虚拟和原始）：
<td colspan="2">
<button data-repeater-create type="button" class="btn btn-gradient-
info btn-sm icon-btn ml-2 mb-2" id="btnaddnewroworiginal"
style="display:none;">
<i class="mdi mdi-plus"></i>
</button>
<button type="button" class="btn btn-gradient-info btn-sm icon-btn
ml-2 mb-2 btnaddnewrowdummy" data-toggle="tooltip" data-
placement="top" title="Add new row">
<i class="mdi mdi-plus"></i>
</button>
</td>
加号按钮点击事件：
$(document).on("click", ".btnaddnewrowdummy", function ()
var EmptyInputs = CheckEmptyInputs();
if (EmptyInputs > 0)
alert("Empty Inputs Found. Please fill all the required (*) values.");
else
var DuplicateRangeValues = CheckDuplicateRanges();
if (DuplicateRangeValues > 0)
alert("Duplicate Max-Range values found. Please enter unique values.");
else
$("#SubCategoryTable tr").each(function ()
$(this).addClass("completed");
);
$("#btnaddnewroworiginal").click();
$("#SubCategoryTable tr:last").find('.txtname').val('');
$("#SubCategoryTable tr:last").find(".txtminage").val("0");
$("#SubCategoryTable tr:last").find(".txtmaxage").val("99");
$("#SubCategoryTable tr:last").find('.js-example-basic-single').select2(
escapeMarkup: function (markup)
return markup;
);
$("#SubCategoryTable tr:last").find(".js-example-basic-single-2").select2();
$("#SubCategoryTable tr:last").find(".summernote").summernote(
toolbar: [],
height: 50,
minHeight: 50,
maxHeight: 50,
disableResizeEditoroption: true
);
$("#SubCategoryTable tr:last").find(".summernote").each(function ()
$(this).summernote('code', '');
);
$("#SubCategoryTable tr:last").find('.note-editable').off();
$('[data-toggle="tooltip"]').tooltip();
$("#SubCategoryTable tr:last").find(".txtsubheading").val($("#SubCategoryTable tr:last").prev("tr").find(".txtsubheading").val().trim());
$("#SubCategoryTable tr:last").find(".ddlItemFor").val($("#SubCategoryTable tr:last").prev("tr").find(".ddlItemFor").val()).trigger("change");
if ($("#SubCategoryTable tr:last").prev("tr").find(".txtsubheading").val().trim() != "")
$("#SubCategoryTable tr:last").find(".selectUnits").val($("#SubCategoryTable tr:last").prev("tr").find(".selectUnits").val()).trigger("change");
);
CheckEmptyInputs 函数：
function CheckEmptyInputs()
var empty_count = 0;
$("#SubCategoryTable tr").each(function ()
var row = $(this);
if ($(row).hasClass("completed") == false)
var name = row.find("td").find(".txtname").val();
if (name.trim() == "")
empty_count++;
var UnitsVal = row.find("td").find(".selectUnits").val();
if (UnitsVal == 0)
empty_count++;
var minage = row.find("td").find(".txtminage").val();
if (minage.trim() == "")
empty_count++;
var maxage = row.find("td").find(".txtmaxage").val();
if (maxage.trim() == "")
empty_count++;
var minmalerange = row.find("td").find(".txtminmalerange").summernote("code");
if (minmalerange.trim() == "")
empty_count++;
var minfemalerange = row.find("td").find(".txtminfemalerange").summernote("code");
if (minfemalerange.trim() == "")
empty_count++;
);
return empty_count;
CheckDuplicateRanges 函数：
function CheckDuplicateRanges()
var MinMaleRange = "";
var MaxMaleRange = "";
var MinFemaleRange = "";
var MaxFemaleRange = "";
var DuplicateCount = 0;
$("#SubCategoryTable tr").each(function ()
var row = $(this);
if ($(row).hasClass("completed") == false)
MinMaleRange = row.find("td").find(".txtminmalerange").summernote("code").replace(/ /g, '').replace(/<br\s*[\/]?>/gi, '').replace(/\s/g, '');
MaxMaleRange = row.find("td").find(".txtmaxmalerange").summernote("code").replace(/ /g, '').replace(/<br\s*[\/]?>/gi, '').replace(/\s/g, '');
if (MinMaleRange == MaxMaleRange)
DuplicateCount++;
row.find("td").find(".txtmaxmalerange").next().css("border-color", "red");
else
row.find("td").find(".txtmaxmalerange").next().css("border-color", "#ebedf2");
MinFemaleRange = row.find("td").find(".txtminfemalerange").summernote("code").replace(/ /g, '').replace(/<br\s*[\/]?>/gi, '').replace(/\s/g, '');
MaxFemaleRange = row.find("td").find(".txtmaxfemalerange").summernote("code").replace(/ /g, '').replace(/<br\s*[\/]?>/gi, '').replace(/\s/g, '');
if (MinFemaleRange == MaxFemaleRange)
DuplicateCount++;
row.find("td").find(".txtmaxfemalerange").next().css("border-color", "red");
else
row.find("td").find(".txtmaxfemalerange").next().css("border-color", "#ebedf2");
);
return DuplicateCount;
表单重复代码：
(function($)
'use strict';
$(function()
$('.repeater').repeater(
defaultValues:
'text-input': 'foo'
,
show: function ()
$(this).slideDown();
// I wonder if there is a problem with .not()
$('#tblRepeater>tbody>tr').not(':first').each(function ()
var select = $(this).closest('tr').find(".drpUnits");
$(this).closest('tr').find(".drpUnits").addClass('js-example-basic-double');
// I think this line here is unnecessary as it is
// initialized in my code ??
$('.js-example-basic-double').select2();
);
,
hide: function (deleteElement)
if (confirm("Are you sure you want to delete this row ?. Once deleted data cannot be retrieved."))
$(this).slideUp(deleteElement);
else
,
isFirstItemUndeletable: false
)
);
)(jQuery);
【问题讨论】：
【参考方案1】：我终于找到了解决问题的方法。我所做的只是按照预期从 form-repeater js 代码中隐藏了这些行。因为每次我点击加号按钮时，这些行都会重复地重新初始化 $.each 中的所有行。
我的解决方案： 我从表单重复器中隐藏了这四行，这将时间延迟从 15-20 秒大幅减少到 1-2 秒
show: function ()
$(this).slideDown();
//$('#tblRepeater>tbody>tr').not(':first').each(function ()
//var select = $(this).closest('tr').find(".drpUnits");
//$(this).closest('tr').find(".drpUnits").addClass('js-example-basic-double');
//$('.js-example-basic-double').select2();
//);
,
【讨论】：
以上是关于使用 form-repeater 在填充的表中添加新行需要很长时间（10-15 秒） - jQuery的主要内容，如果未能解决你的问题，请参考以下文章