javascript - ui-grid-draggable-rows 认为我的数据只是一个字符串

Question

我只是按照指示获取 ui-grid-draggable-rows在职的。他们展示了一个工作示例 here .

我的问题是我收到此错误:

TypeError: this.splice is not a function

在这行代码中:

this.splice(to, 0, this.splice(from, 1)[0]);

就在拼接线之前，我记录this:

console.log(this);

这是输出:

app.Tasks

所以它是一个字符串文字。这可以解释为什么 splice 不起作用。但是，该字符串文字在我的用户界面网格中可以显示任务。这是在我的 Angular Controller 中:

$scope.gridOptions = {
    data: 'app.Tasks',

那么我该怎么做才能让它发挥作用呢？如果可拖动插件将数据视为文字字符串，但网格使用该文字字符串来指向数据数组，则似乎存在冲突。

注意:在上面引用的工作示例中，他们使用硬编码的数据数组作为网格的数据。这对于示例来说显然没问题，但不适合实际使用。

编辑 - 这是 app.Tasks 在控制台中的样子:

编辑 2 - 这是 appController 中的完整代码:

function appController($scope, $http, $routeParams, uiGridConstants) {
    $scope.loading = 1;
    $scope.app = null;
    $scope.appId = $routeParams.appId;

    $scope.gridOptions = {
        data: 'app.Tasks',
        multiSelect: false,
        enableRowHeaderSelection: false, // We don't want to have to click a row header to select a row. We want to just click the row itself.
        // Got the row template from https://github.com/cdwv/ui-grid-draggable-rows:
        rowTemplate: '<div grid="grid" class="ui-grid-draggable-row" draggable="true"><div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name" class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader, \'custom\': true }" ui-grid-cell></div></div>',
        columnDefs: [{ field: 'Sequence', displayName: 'Order', width: "8%", resizable: true, sort: { direction: uiGridConstants.ASC, priority: 1 } },
                     { field: 'Description', displayName: 'Description', width: "62%" },
                     { field: 'PrestoTaskType', displayName: 'Type', width: "16%" },
                     { field: 'FailureCausesAllStop', displayName: 'Stop', width: "12%" }]
    };

    $scope.gridOptions.onRegisterApi = function (gridApi) {
        gridApi.draggableRows.on.rowDropped($scope, function (info, dropTarget) {
            console.log("Dropped", info);
        });
    };

    $scope.gridOptions2 = {
        data: 'app.CustomVariableGroups',
        multiSelect: false,
        enableRowHeaderSelection: false, // We don't want to have to click a row header to select a row. We want to just click the row itself.
        columnDefs: [{ field: 'Name', displayName: 'Name', width: "98%", resizable: true }]
    };

    $http.get('/PrestoWeb/api/app/' + $scope.appId)
              .then(function (result) {
                  $scope.app = result.data;
                  $scope.loading = 0;
              },
              function () {
                  $scope.loading = 0;
                  alert("An error occurred and the app could not be loaded.");
              });
}

Answer 1

我可以通过做两件事来让它工作:

1. 从 $scope.gridOptions 中删除数据属性设置。

   $scope.gridOptions = {
   //data: 'app.Tasks',//删除了这一行
   多选:假
   //此处分配更多属性
   };

2. 获取数据后将该属性分配在其自己的行上。

   $scope.gridOptions.data = result.data.Tasks;