javascript - 使用 form-repeater 在填充的表中添加新行需要花费大量时间（10-15 秒） - jQuery

Question

我正在为表格元素使用表单中继器插件。填充表格后，当我单击加号按钮（添加新行）时，需要花费大量时间（大约 10-15 秒）才能附加新行。

我的桌子截图

每次单击（加号按钮）时，都会执行以下功能

• CheckEmptyInputs()
• CheckDuplicateRanges() ：检查 Min-Range 和 Max-Range 中的重复范围。

我尝试过的事情：

• 在验证后每次成功单击加号按钮时，将名为“已完成”的类添加到所有行。我这样做是因为当我再次单击加号按钮时，我告诉 JS 不要检查具有“已完成”类的行，以避免不必要的检查。
• 我删除了 tr 的“已完成” OnDOMSubtreeModified 类。所以这个计划工作得很好，除非类被删除，否则 JS 不会每次都检查这些名为 completed 的行。
• 我尝试检查哪个函数花费了很多时间，结果 checkEmptyInputs() 和 CheckDuplicateRanges() 执行得更快。

注意 - 1：我正在使用为 Min-Max-Range-Columns 非常定制的 Summernote。 注意 - 2：我正在为下拉列表列使用 select2 插件。

因此，在我看来，时间滞后可能是由于以下原因

1. 为这 6 列初始化 Summernote 和 select2 插件
2. 表单重复器代码可能有问题。我没有检查表单转发器代码

这是我当前的代码。

加号按钮的 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(/&nbsp;/g, '').replace(/<br\s*[\/]?>/gi, '').replace(/\s/g, '');
                    MaxMaleRange = row.find("td").find(".txtmaxmalerange").summernote("code").replace(/&nbsp;/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(/&nbsp;/g, '').replace(/<br\s*[\/]?>/gi, '').replace(/\s/g, '');
                    MaxFemaleRange = row.find("td").find(".txtmaxfemalerange").summernote("code").replace(/&nbsp;/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);

标签： javascriptjqueryperformancejquery-plugins

Answer 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();
                 //});
                },