时间戳

首页 > 解决方案 > 从表行中删除行和重新排序索引

javascript - 从表行中删除行和重新排序索引

问题描述

我们有一个功能，我们可以通过下面的函数从表中删除行。

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 对象的组装。

标签： javascriptjqueryperformance

解决方案

主要问题在于您的 id 构造。

如果你可以改变你的 id 结构。如果你不能，你应该考虑，因为它会为你节省一些神经元。（您不应该将 id 从一个项目转移到另一个项目......）。

以越来越流行的方式命名您的 id 有两个目的：

  1. 有一个有序/可比较的集合
  2. 在两个元素之间进行简单的距离计算

为了满足 1. 它实际上是微不足道的：juste make an id with a timestamp

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

显然最好使用 aguid或 anObjectId

为了满足 2. juste 在你的 DOM 中使用一个数组

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

attr 名称和 valmsg-for 不应在语义上包含“索引”部分，但如果强制，您也可以这样做

推荐阅读