Question

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

我的桌子的屏幕截图

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

CheckEmptyInputs（）
CheckDuplicateRanges（）：这将检查最小范围和最大范围中的重复范围。

我尝试过的事情：

将名为“ completed” 的类添加到所有行。我这样做是因为当我再次单击加号按钮时，我告诉JS不要检查具有“ completed” 类的行，以避免不必要的检查。
我删除了该类的“完成的” OnDOMSubtreeModified。因此，此计划运行良好，除非删除该类，否则JS不会每次检查名称为完成的类的这些行。
我尝试检查哪个函数花费大量时间，结果checkEmptyInputs（）和CheckDuplicateRanges（）的执行速度更快。

注意-1：我正在使用针对最小-最大范围列定制的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(/&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秒< / em>

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-15s）-jQuery

这是我当前的代码。

1 个答案: