javascript - Angular ui-Grid Splice 不适用于数组

Question

我有一个 ui-grid，我试图用它来处理批量操作。操作完成后，应将项目从网格中删除。问题是拼接仅适用于所有其他记录。代码的其余部分按预期工作，但拼接部分不工作。所有其他记录都保留在网格上，直到我 F5 刷新页面(后端函数实际上从数据库中删除了行 - 我使用 splice 来更快地查看正确的数据，而无需在数据库过程后刷新网格数据完成)。

这是我的 Controller 代码:

  $scope.gridOptions = {
        columnDefs: [
            {
                field: 'dteDateReleaseRequestedByCompany', displayName: 'Requested Date'
            },

      {
          field: 'vchCompanyName', displayName: 'Company Name',
          cellTemplate: '<div style="text-decoration:underline;color:blue;text-align:left;cursor:pointer" ng-click="grid.appScope.rowClick(row)">{{COL_FIELD}}</div>'
      },
      {
          field: 'CompanyID', width: 110, displayName: 'Company ID', visible:false
      },
      { field: 'vchOprCity', displayName: 'City' },
      { field: 'vchOprStateVchID', displayName: 'State' },
      {
          field: 'dteExpiresWithGracePeriod', displayName: 'Subscription', headerCellClass: 'center',
          cellTemplate: '<div style="text-align:center"><span ng-bind-html="row.entity[col.field] | getSubscription | trustedhtml"></span></div>'
      },
      {
          field: 'Action', displayName: 'Release Action', 
          cellTemplate: '<div class="btn-group" ng-init="row.entity.Action=0"><input ng-model="row.entity.Action" type="radio" value="0" style="width:20px">&nbsp;None&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input ng-model="row.entity.Action" type="radio" value="1" style="width:20px">&nbsp;Accept&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input ng-model="row.entity.Action" type="radio" value="2" style="width:20px">&nbsp;Decline</div>'

      },

        ],
        showGridFooter: false,
        //enableFiltering: true,
        enableSorting: false,
        paginationPageSizes: [20, 40, 60],
        paginationPageSize: 20,
        enableHorizontalScrollbar: uiGridConstants.scrollbars.NEVER,
        enableGridMenu: true,
        exporterCsvFilename: 'PendingReleases.csv',
        exporterPdfDefaultStyle: { fontSize: 9 },
        exporterPdfTableStyle: { margin: [10, 10, 10, 10] },
        exporterPdfTableHeaderStyle: { fontSize: 10, bold: true, italics: true, color: 'red' },
        exporterPdfHeader: { text: "Pending Release Requests", style: 'headerStyle' },
        exporterPdfFooter: function (currentPage, pageCount) {
            return { text: currentPage.toString() + ' of ' + pageCount.toString(), style: 'footerStyle' };
        },
        exporterPdfCustomFormatter: function (docDefinition) {
            docDefinition.styles.headerStyle = { fontSize: 22, bold: true, alignment: 'center' };
            docDefinition.styles.footerStyle = { fontSize: 10, bold: true, alignment: 'center' };
            return docDefinition;
        },
        exporterPdfOrientation: 'landscape',
        exporterPdfPageSize: 'LETTER',
        exporterPdfMaxGridWidth: 500,
        exporterCsvLinkElement: angular.element(document.querySelectorAll(".custom-csv-link-location")),
        onRegisterApi: function (gridApi) {
            $scope.gridApi = gridApi;

        }
    };

  $scope.process = function () {
        for (i = 0; i < $scope.gridOptions.data.length; i++)
        {
            var id = $scope.gridApi.grid.renderContainers.body.visibleRowCache[i].entity.CompanyID;
            var action = $scope.gridApi.grid.renderContainers.body.visibleRowCache[i].entity.Action;
            var index = i;

            if(action ==1)
            {
                $scope.gridOptions.data.splice(index, 1);

                accept(id, index);
            }
            if(action == 2)
            {
                $scope.gridOptions.data.splice(index, 1);

                decline(id, index);

            }

        }


    };

    function accept(id, index) {
        contractorService.acceptRelease(id);

    };
    function decline(id, index) {
        contractorService.declineRelease(id);

    };

这是我的 HTML:

@{
    ViewBag.Title = "ManagePendingReleases";
    Layout = "~/Views/Shared/_Layout.cshtml";

}
<script src="~/Scripts/app/Contractor/ContractorCtrl.js"></script>
<script src="~/Scripts/app/Contractor/contractorService.js"></script>
<style>
    .ui-grid-header-cell {
  position: relative;
  box-sizing: border-box;
  color: black;
  background-color: #cfe7f1;
  border-right: 1px solid;
  border-color: #cfe7f1;
  display: table-cell;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 0;
}
</style>
<div ng-app="myModule" ng-controller="ContractorCtrl">
    <div class="panel panel-primary">
        <div class="panel-heading" >Manage Pending Releases</div>
        <div class="panel-body" style="padding:0px">
            <div ui-grid="gridOptions" class="grid" ng-style="{height: (gridOptions.data.length*30)+32+'px'}" ui-grid-exporter ui-grid-auto-resize></div>
        </div>

    </div>
<div class="pull-right">
    <button type="button" class="btn btn-primary" ng-click="process()">Process Actions</button>
</div>
</div>

这是我的网格的样子:

当单击“处理操作”按钮时，它应该遍历行并查找数据库中的每条记录应发生哪个操作。当我单步执行代码时，看起来拼接适用于每条记录，但其他所有记录仍保留在网格上。谁能告诉我为什么我会出现这种行为？

非常感谢任何帮助!

Answer 1

您正在 for 循环中使用数组的 length ，您正在执行 splice ，这反过来又减少了您使用的 index 删除项目，但 splice 正在减少数组，因此 index 也需要更改。

因此，最接近的合理答案是，使用 delete 而不是 splice，因为 delete 不会更改 index。

delete $scope.gridOptions.data[index]

而不是

$scope.gridOptions.data.splice(index, 1);