Question

我创建了我的第一个ng-grid表，并从服务器异步加载数据。除了一个主要问题外，我的所有代码似乎都被创建并在幕后按需运行。

ng-grid的分页按钮在HTML中呈现为“按钮”标签，如下所示：

<button class="ngPagerButton" ng-click="pageForward()" ng-disabled="cantPageForward()" title="Next Page">
    <div class="ngPagerLastTriangle ngPagerNextTriangle"></div>
</button>

但按钮上没有设置类型属性，因此默认为type ='submit'。

每当我点击下一页按钮时，幕后工作一切正常，但由于按钮类型，它也会执行无关的POST。这完全是不受欢迎的。

其他人遇到这个？你是如何解决它的？我做错了吗？

基本设置如下：

HTML：

<div id='deposits' class='gridStyle' ng-grid='gridOptions'></div>

JS控制器代码（这里没什么特别的，从ng-grid文档中得到了很多......但是没有工作！）：</ p>

$scope.reportingForm = {
  startDate: new Date(2014, 1, 1),  // just for testing
  endDate: new Date(2014, 1, 7),
};

$scope.filterOptions = {
  filterText: '',
  useExternalFilter: true
};

$scope.totalServerItems = 0;
$scope.pagingOptions = {
  pageSizes: [7, 14],
  pageSize: 7,
  currentPage: 1
};

$scope.setPagingData = function(data, page, pageSize) {  
  var pagedData = data.slice((page - 1) * pageSize, page * pageSize);
  $scope.data = pagedData;
  $scope.totalServerItems = data.length;
  if (!$scope.$$phase) {
    $scope.$apply();
  }
};

$scope.getPagedDataAsync = function(pageSize, page, searchText) {
  setTimeout(function () {
      var data;
      if (searchText) {
        var filter = searchText.toLowerCase();

        myService.getDataAsync(
          $scope.reportingForm.startDate, $scope.reportingForm.endDate
          function(result) {
            data = result.result.data.filter(function(item) {
              return JSON.stringify(item).toLowerCase().indexOf(filter) != -1;
            });

            $scope.setPagingData(data, page, pageSize);
          }
        );          
      } else {
        myService.getDataAsync(
          $scope.reportingForm.startDate, $scope.reportingForm.endDate,
          function(result) {
            $scope.setPagingData(result.result.data, page, pageSize);
          }
        );
      }
  }, 100);
};

$scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage);

$scope.$watch('pagingOptions', function (newVal, oldVal) {
  if (newVal !== oldVal && newVal.currentPage !== oldVal.currentPage) {
    $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
  }
}, true);

$scope.$watch('filterOptions', function (newVal, oldVal) {
  if (newVal !== oldVal) {
    $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
  }
}, true);

$scope.gridOptions = { 
  data: 'data',
  pagingOptions: $scope.pagingOptions,
  filterOptions: $scope.filterOptions,
  enablePaging: true,
  showFooter: true,
  columnDefs: [
    { field: 'date', displayName: 'Date' },
    { field: 'id', displayName: 'Id' },
    { field: 'location', displayName: 'Location' },
    { field: 'amount', displayName: 'Amount' },
  ]
};

Answer 1

ng-grid将上一页和下一页按钮呈现为＆lt; button＆gt;并且没有指定按钮类型，因此它默认为type ='submit'。

在我们的页面中，ng-grid表存在于表单中。我不知道这一点，但经过一些测试后，表单中的提交＆lt; button＆gt; s会执行POST，但是在表单外提交＆lt; button＆gt;不要进行POST。

通过将ng-grid表移到表单之外，我们不再有这个问题。

但实际上，这似乎是对ng-grid代码的疏忽。它应该真的是将按钮渲染为type ='button'以防止将来出现这种问题。我无法想象您希望上一页/下一页按钮进行POST的任何情况。

Answer 2

这似乎已经在ng-grid 2.0.8中得到修复。 https://github.com/angular-ui/ng-grid/pull/693

ng-grid上的下一页按钮发布了一个帖子

2 个答案: