Angularjs 使用nghandsontable移动行

我正在尝试使用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.
    }
};
}

var-app=angular.module（'appHandson'，['ngHandsontable']）；
应用程序控制器（'HandsOnCtrl'，['hotRegisterer'，函数（hotRegisterer）{
var vm=这个；
vm.rowHeaders=true；
vm.colHeaders=true；
vm.db={
项目：[
{
公司：“XXX”，
顾客：5464，
命令：“一”，
优先事项：1
},
{
公司：“XXX”，
顾客：5464，
命令:"两",，
优先事项：2
},
{
公司：“XXX”，
客户：546433，
命令:'三',，
优先事项：3
}
]
};
////移动行时将调用以下方法。在此方法中，我根据UI中的更改重新排列数据源中的数据。
vm.onAfterRowMove=函数（startRow，endRow）{
如果（开始>结束行）{
var data=angular.copy（vm.db.items）；
var rowChange=数据[startRow]；
对于（var loop=startRow；loop>endRow；loop--）
{
数据[循环]=数据[循环-1]；
}
数据[endRow]=行更改；
vm.db.items=数据；
}
else if（开始时<结束时）
{
////相应地重新安排数据。
}
};
}

在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”数据的顺序正确，但只是在视觉上出现错误。

因此，不需要在数据源中重新排列数据。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
    };

vm.addOrder=函数（）{
var finalData=[]；
var hotTable=hotRegisterer.getInstance（'my-handsontable'）；
for（var loop=0；loop

不需要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" >