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

Question

我正在为表格元素使用 form-repeater 插件。填充表格后，当我单击加号按钮(添加新行)时，需要花费大量时间(大约 10-15 秒)来附加新行。

Screenshot of my table

每次点击(加号按钮)时都会执行以下功能

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

我尝试过的事情:

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

NOTE - 1 : I am using summernote extremely customized for the Min-Max-Range-Columns. NOTE - 2 : I am using select2 plugin for the dropdownlist Columns.

因此我认为时间滞后可能是由于以下原因造成的

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);

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