Удаление строк и изменение порядка индексов из строк таблицы

Question

У нас есть функция, которая позволяет удалять строки из таблицы с помощью функции ниже.

function setDeleteItemButtonBehavior() {
    $(document).on('click', '.delete-boxItem', function (e) {
        e.preventDefault();
        //$(this).removeClass('.delete-boxItem');
        //showLoadingDialog();
        var type = $(this).data('type');
        var oTable = type == "U" ? TableR : TableS;

        if (oTable.fnGetData().length > 0) {
            //$(this).closest("tr").remove();
            var nRow = $(this).closest("tr")[0];
            oTable.fnDeleteRow(nRow);
            updateReceivedItemLabelWhenRemove();
            controlDeleteItem(type, oTable);
            var deleteIndex = parseInt($(nRow).find("input[name*='Index']").val());
            var tagRemove = parseInt($(nRow).find("input[name*='Tag']").val());
            updateTagItemOrder(type, deleteIndex, tagRemove, true);
        }
        //makeModalContentInvisible();
    });
}

Из-за других логик, возникающих при удалении, таких как переупорядочение строк и тегов, Internet Explorer завершается сбоем, поскольку запуск сценария занимает слишком много времени. Будет ли у кого-нибудь еще предложение о том, как оптимизировать эту функцию? Ниже приведен пример способа переупорядочения индексов:

 function controlDeleteItem(type, oTable) {

    var grid = oTable.fnGetNodes();

    $.each(grid, function (index, value) {
        $(value).find('input[name$=".Index"]').val(index);

        $(value).find('input, div, span').each(function () {

            if ($(this).attr('id')) {
                var boxItems = $(this).attr('id').split("_")[0];
                var field= $(this).attr('id').split("__")[1];
                $(this).attr('id', boxItems + '_' + index + '__' + field);
            }

            if ($(this).attr('name')) {
                var boxItems = $(this).attr('name').split("[")[0];
                var field = $(this).attr('name').split("]")[1];
                $(this).attr('name', boxItems + '[' + index + ']' + field);
            }

            if ($(this).data('valmsg-for')) {
                var boxItems = $(this).data('valmsg-for').split("[")[0];
                var field = $(this).data('valmsg-for').split("]")[1];
                $(this).data('valmsg-for', boxItems + '[' + index + ']' + field);
            }

        });

        $(value).find('button[id^="btnSetWarrantyLostReason_R"]').each(function () {
            $(this).attr('id', 'btnSetWarrantyLostReason_R' + index);
        });

    });
}


function prepareDataTable() {
    oTableR = $('table.data-table-r').dataTable({
        "bPaginate": false,
        "bLengthChange": false,
        "bFilter": false,
        "bSort": false,
        "bInfo": false,
        "bAutoWidth": false,
        "aoColumns": [{ "sClass": "" }, { "sClass": "" }, { "sClass": "" }, { "sClass": "" }, { "sClass": "" },
                      { "sClass": "align-text-center align-center" }, { "sClass": "" },
                      { "sClass": "align-text-center align-center" }, { "sClass": "align-text-center" }, { "sClass": "align-text-center" }]
    });

    oTableS = $('table.data-table-s').dataTable({
        "bPaginate": false,
        "bLengthChange": false,
        "bFilter": false,
        "bSort": false,
        "bInfo": false,
        "bAutoWidth": false,
        "aoColumns": [{ "sClass": "" }, { "sClass": "" }, { "sClass": "" }, { "sClass": "" }, { "sClass": "" },
                      { "sClass": "align-text-center align-center" }, { "sClass": "" },
                      { "sClass": "align-text-center align-center" }, { "sClass": "align-text-center" }, { "sClass": "align-text-center" }]
    });
}

Данная функция является сборкой моего объекта DataTables.

Answer 1

Основная проблема в создании вашего идентификатора.

Если вы можете просто изменить свою конструкцию id. Если вы не можете, вы должны подумать, потому что это спасет вас от нескольких нейронов. (Вы не должны перемещать идентификатор из одного элемента в другой ...).

Имена вашего идентификатора с возрастающей модой могут служить двум целям:

1. с заказанной / сопоставимой коллекцией
2. с легким расчетом расстояния между двумя элементами

Чтобы удовлетворить 1. это на самом деле тривиально: просто сделать идентификатор с отметкой времени

id = Date.now()+'_'+(z++)%1000 //the z part in case you create several items at the same timestamp

Очевидно, лучше использовать guid или ObjectId

Для удовлетворения 2. просто используйте массив вдоль вашей DOM

myIds = []
myIds.splice(myIds.indexOf(yourId), 1)//delete
myIds.push(yourId)//add
var d = (aId,bId)=> myIds.indexOf(bId) - myIds.indexOf(aId)

attr name и valmsg-for не должны семантически включать часть «index», но если принудительно, вы можете сделать то же самое