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 （））它在视觉上以handontable / 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

1 个答案: