使用 nghandsontable 移动行

Question

我正在尝试使用 ngHandsontable 实现行移动。虽然在视觉上一切正常，但数据源没有得到更新。因此，我实现了 "AfterRowMove" 事件处理程序来手动重新排列数据源。我是这样实现的：-

控制器：-

var app = angular.module('appHandson', ['ngHandsontable']);

app.controller('HandsOnCtrl', ['hotRegisterer', function (hotRegisterer) {
var vm = this;
    vm.rowHeaders = true;
    vm.colHeaders = true;
vm.db = {
        items: [
            {
                Company: 'XXX',
                Customer: 5464,
                Order: 'One',
                Priority: 1
            },
            {
                Company: 'XXX',
                Customer: 5464,
                Order: 'Two',
                Priority: 2
            },
            {
                Company: 'XXX',
                Customer: 546433,
                Order: 'Three',
                Priority: 3
            }
        ]
    };

//// Following method will be called when a row is moved. In this method, I am re-arranging the data in the data source according to the changes in the UI.

vm.onAfterRowMove = function(startRow, endRow) {

    if (startRow > endRow) {
        var data = angular.copy(vm.db.items);
        var rowChange = data[startRow];

        for (var loop = startRow; loop > endRow; loop--)
        {
            data[loop] = data[loop - 1];
        }

        data[endRow] = rowChange;
        vm.db.items = data;
    }
    else if (startRow < endRow)
    {
        //// re-arrange data accordingly.
    }
};
}

在 html 文件中，我有以下标记：-

<div id="body" ng-app="appHandson">
    <section>
        <div ng-controller="HandsOnCtrl as ctrl">
            <div class="scroll-container">
                <button type="button" ng-click="ctrl.addOrder()">Add Rule</button>
                <hot-table hot-id="my-handsontable" manual-row-move scroll-v="auto" col-widths="100" row-headers="ctrl.rowHeaders" col-headers="ctrl.colHeaders" datarows="ctrl.db.items" on-after-row-move="ctrl.onAfterRowMove" >
                    <hot-column data="Company" title="'company'" read-only></hot-column>
                    <hot-column data="Customer" title="'customer'" read-only></hot-column>
                    <hot-column data="Order" title="'order'"></hot-column>
                </hot-table>
            </div>
            <div>

实施上述解决方案后，事件处理程序 "ctrl.onAfterRowMove" 正确地重新安排了数据源中的数据，但是当 Angular 的下一个摘要周期运行时（由于按钮单击或通过手动调用 $scope.$apply()) 它在视觉上随机移动 handsontable/grid 中的数据。请注意，数据源 "ctrl.db.items" 中的数据顺序正确，但只是在视觉上出现了乱序。

Answer 1

事实证明，不需要重新排列数据源中的数据。 Handsontable 有一个名为 "manualRowPositions" 的数组，它根据视觉上的任何内容跟踪行位置。例如，如果第三行已移至第一行，manualRowPositions 将具有以下数据 [2,0,1]。请注意，原始数据源将保持原样。当需要使用行位置时，使用 manualRowPositions 数组从数据源读取数据。

在上面的示例中，我有一个名为 "addOrder" 的函数，它将使用 manualRowPositions 数组从数据源读取数据并将该数据发送到服务器。

vm.addOrder = function () {

    var finalData = [];
    var hotTable = hotRegisterer.getInstance('my-handsontable');

    for (var loop = 0; loop < vm.db.items.length; loop++) {
        var data = vm.db.items[hotTable.manualRowPositions[loop]];
        finalData.push(data);
    }  

//// send finalData to the server using $http
    };

不需要 AfterRowMove 事件处理程序，因此删除 vm.onAfterRowMove 函数并更改 html 标记以删除事件的挂钩：-

<hot-table hot-id="my-handsontable" manual-row-move scroll-v="auto" col-widths="100" row-headers="ctrl.rowHeaders" col-headers="ctrl.colHeaders" datarows="ctrl.db.items" >

使用 nghandsontable 移动行

row move with nghandsontable

angularjs

handsontable