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构造。

如果您仅能更改id的构造。如果不能，您应该考虑一下，因为它可以为您节省一些神经元。（您不希望将ID从一项转移到另一项...）。

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

具有有序/可比较的集合
两个元素之间的距离计算简单

要满足1.它实际上是微不足道的：只需用时间戳记创建一个ID

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名称和valmsg-for不应在语义上包括“索引”部分，但如果强制执行，则可以执行相同的操作

从表行删除行并重新排序索引

1 个答案: