Kendo ASP.NET核心网格拖放多行性能问题

Question

我有以下代码：

dropsGrid.table.kendoSortable({
        filter: ">tbody >tr",
        placeholder: $('<tr class="placeholder"><td colspan="11">Drop Here!</td></tr>'),
        hint: function (element) {
            var width = $('#Drops').width();
            var table = $('<table style="width: ' + width + 'px;" class="k-grid k-widget"></table>'),
                hint;

            table.append($('#Drops .k-state-selected').clone());
            table.css("opacity", 0.7);

            return table;
        },
        start: function (e) {
            if ($('#Drops .k-state-selected').length == 0) {
                e.preventDefault();
            } else {
                $('#Drops .k-state-selected').hide();
            }
        },
        end: function (e) {
            $('#Drops .k-state-selected').show();
        },
        change: function (e) {
            try {
                isDropInProgress = true;

                var items = this.element.find('.k-state-selected').not(e.item);
                for (var i = 0; i < items.length; i++) {
                    console.log(items[i]);
                    $(items[i]).insertBefore(e.item).show();
                }

                var selectedSequence = $(e.item[0]).find('.row-number').text();
                for (var i = 0; i < items.length; i++) {
                    var sequence = $(items[i]).find('.row-number').text();
                    if (Number(sequence) > Number(selectedSequence)) {
                        $(e.item).insertBefore(items[i]);
                        break;
                    }
                }

                var rows = $(dropsGrid.tbody[0]).find('tr');
                for (var i = 0; i < rows.length; i++) {
                    var uid = $(rows[i]).data('uid');
                    var drops = dropsGrid.dataSource.data();
                    var dataItem = null;
                    for (var j = 0; j < drops.length; j++) {
                        if (drops[j].uid == uid) {
                            dataItem = drops[j];
                            break;
                        }
                    }
                    if (dataItem != null) {
                        dropsGrid.dataSource.remove(dataItem);
                        dropsGrid.dataSource.insert(i, dataItem);
                    }
                }

            } finally {
                isDropInProgress = false;
                isDirty = true;
                onDataBound();
                refreshMap(dropsGrid.dataSource._data);
            }
        },
        cancel: function (e) {
            $('#Drops .k-state-selected').show();
        }
    }).data("kendoSortable");

使用此代码，用户可以使用拖放功能重新排序网格上的行。也就是“ refreshMap（dropsGrid.dataSource._data）;”当用户更改行顺序时，将更新google map上的图钉。

一切正常，但是如果网格包含，可以说80行，并且您试图一次移动3行，那么性能将受到很大影响。也就是说，这些行放置在适当的位置需要9到10秒。

我对其进行了一些调试，发现问题出在下面的代码块中：

var rows = $(dropsGrid.tbody[0]).find('tr');
                for (var i = 0; i < rows.length; i++) {
                    var uid = $(rows[i]).data('uid');
                    var drops = dropsGrid.dataSource.data();
                    var dataItem = null;
                    for (var j = 0; j < drops.length; j++) {
                        if (drops[j].uid == uid) {
                            dataItem = drops[j];
                            break;
                        }
                    }
                    if (dataItem != null) {
                        dropsGrid.dataSource.remove(dataItem);
                        dropsGrid.dataSource.insert(i, dataItem);
                    }
                }

在过去的几天里，我尝试替换嵌套的for循环，但没有获得完全成功的结果。

通过使用以下代码，我可以使单个选择与地图同步工作：

var skip = 0,
                oldIndex = e.oldIndex + skip,
                newIndex = e.newIndex + skip,
                //data = dropsGrid.dataSource.data(),
                dataItem = dropsGrid.dataSource.getByUid(e.item.data("uid"));

            console.log("------" + e.newIndex + " " + newIndex + " " + skip + " - " + e.oldIndex + " " + oldIndex + " " + skip);

            dropsGrid.dataSource.remove(dataItem);
            dropsGrid.dataSource.insert(newIndex, dataItem);

但是我失去了多选功能。

通过使用以下代码：

start: function (e) {
            if ($('.k-state-selected').length === 0) {
                e.preventDefault();
            } else {
                $('.k-state-selected').hide();
            }
        },
        end: function (e) {

            $('.k-state-selected').show();
        },
        change: function (e) {
            try {
                isDropInProgress = true;

                console.time("whole drop");

                var items = this.element.find('.k-state-selected').not(e.item);
                for (var i = 0; i < items.length; i++) {
                    console.log(items[i]);
                    $(items[i]).insertBefore(e.item).show();
                }

                var selectedSequence = $(e.item[0]).find('.row-number').text();
                for (var i = 0; i < items.length; i++) {
                    var sequence = $(items[i]).find('.row-number').text();
                    if (Number(sequence) > Number(selectedSequence)) {
                        $(e.item).insertBefore(items[i]);
                        break;
                    }
                }

                $('.k-state-selected').removeClass("state-selected");

                console.timeEnd("whole drop");
            } finally {
                isDropInProgress = false;
                isDirty = true;
                onDataBound();
                refreshMap(dropsGrid.dataSource._data);
            }
        },
        cancel: function (e) {
            $('.k-state-selected').show();
        }
    }).data("kendoSortable");

    testDrop.draggable.userEvents.bind("tap", function (e) {
        if (e.event.ctrlKey) {
            e.target.toggleClass("state-selected");
        } else {
            $('.k-state-selected').removeClass("state-selected");
            e.target.addClass("state-selected");
        }
    });

多选和单选有效，但地图上的图钉不再更新。

上述方法的另一个问题是，当我从第5行的位置1和2移动两行时，我得到以下行为：

• 选中我移动的2行（预期行为）

• 还选择了替换位置1和2的行（不需要的行为，因为这会造成混乱）

昨天我想出了这段代码：

dropsGrid.table.kendoSortable({
    filter: ">tbody >tr",
    placeholder: $('<tr class="placeholder"><td colspan="11">Drop Here!</td></tr>'),
    hint: function (element) {
        var width = $('#Drops').width();
        var table = $('<table style="width: ' + width + 'px;" class="k-grid k-widget"></table>'),
            hint;

        table.append($('#Drops .k-state-selected').clone());
        table.css("opacity", 0.7);

        return table;
    },
    start: function (e) {
        if ($('#Drops .k-state-selected').length == 0) {
            e.preventDefault();
        } else {
            $('#Drops .k-state-selected').hide();
        }
    },
    end: function (e) {
        $('#Drops .k-state-selected').show();
    },
    change: function (e) {
        try {
            isDropInProgress = true;

            console.time("whole drop");

            var grid = $('#' + dropsGridName).data("kendoGrid");    //$('#' + dropsGridName).data("kendoGrid");  //$('#Drops').data('kendoGrid');
            var rows = grid.select();
            var record = [];
            var uidSelectedRows;
            var selectedRowsIndex = [];
            rows.each(function() {
                record.push(grid.dataItem(this));
                uidSelectedRows = $(this).data('uid');
                var currentRowIndex = $(this).closest("tr").index();
                if (selectedRowsIndex.indexOf(currentRowIndex) === -1) {
                    selectedRowsIndex.push(currentRowIndex);
                }
                console.log("\n" + "This is the value of record: " + "\n" + record + "\n");
                console.log("\n" + "This is the value of uidSelectedRows: " + "\n" + uidSelectedRows + "\n");
                console.log("\n" + "This is the value of selectedRowsIndex: " + "\n" + currentRowIndex + "\n");
            });

            console.log("This is the value of selectedRowsIndex: " + "\n" + selectedRowsIndex);

                var uid = uidSelectedRows;
                var drops = dropsGrid.dataSource.data();
                var dataItem = null;
                console.log("first for loop");
                for (var j = 0; j < drops.length; j++) {
                    if (drops[j].uid === uid) {
                        dataItem = drops[j];
                        console.log("second for loop");
                        break;
                    }
                }
                if (dataItem != null) {
                    dropsGrid.dataSource.remove(dataItem);
                    dropsGrid.dataSource.insert(selectedRowsIndex, dataItem);
                    console.log("This the value of i:" + "\n" + i + "\n" +
                        "\n" + "This is the value of uid:" + "\n" + uid + "\n" + "This is the value of drops:" + "\n" + drops +
                        "\n" + "This is the value of j:" + "\n" + drops.length + "\n" + "This is the selectedRowsIndex" + "\n" + selectedRowsIndex);
                }

            console.timeEnd("whole drop");

        } finally {
            isDropInProgress = false;
            isDirty = true;
            onDataBound();
            refreshMap(dropsGrid.dataSource._data);
        }
    },
    cancel: function (e) {
        $('#Drops .k-state-selected').show();
    }
}).data("kendoSortable");

在上述情况下，多选拖放操作无效。

由于我已经在此问题上待了几天，所以我想知道能否请您提供示例或指导以解决该问题。

我期待着您的来信！

谢谢