Angularjs ui-网格行休息调用

Question

我尝试通过 die ui-grid(v3.0.0-rc.20-8199eb5) 字段函数方法使用 $http 进行休息调用。请参阅下面的示例。

$scope.gridOptions = {
        enableSorting: true,
        columnDefs: [
          { name:'name', field: 'name' },
          { name:'getDepartment', field: 'getDepartment()', enableCellEdit:false}
        ],
        data : [      {
                           "name": "Rex",
                           "getDepartment" : function() {return deparmentService.findByName(this.name);}
                       }
                   ]
      };

}]);

浏览器进入无限循环。 departmentService $http 调用依赖于传递给它的名称参数 begin。

如何在加载行时从 ui- 网格中调用 $http ajax？

Answer 1

尝试在单独的文件中使用服务。这将帮助您组织代码。

app.factory('yService', ['$http', 'sessionService', function ($http, sessionService) {
    return {
        GetNames: function () {
            return $http({
                method: "get",
                url: "/api/Common/GetNames"
             });
        }
    }
}]);

从您的控制器，像下面这样调用，

    yService.GetNames().success(function (data) {
                // copy your data to one object
//$scope.departments
            }).
                error(function (data) {

                });

在 ng-init 上调用上面的 yservice.GetNames 并像下面这样，

$scope.departments={};
    $scope.gridOptions = {
            enableSorting: true,
            columnDefs: [
              { name:'name', field: 'name' },
              { name:'getDepartment', field: 'getDepartment()', enableCellEdit:false}
            ],
            data : [      {
                               "name": "Rex",
                               "getDepartment" : $scope.departments;}
                           }
                       ]
          };

    }]);

Answer 2

为什么不获取数据，然后填充所有部门，然后给网格？

或者，获取数据，将其提供给网格，然后在后台，运行一个获取所有部门并将其填充到数据中的迭代器。

您真的不希望网格在每次呈现行时都调用 http 服务 - 它会在每次有人滚动时重新呈现行。（不完全是，但在很多事件和一些卷轴上）

所以你最终会得到：

$scope.getDepartment = function(name) {
  return departmentService.findByName(name);
};

$scope.data = [
  name: 'Rex'
];

$scope.gridOptions = {
  enableSorting: true,
  columnDefs: [
    { name:'name', field: 'name' },
    { name:'getDepartment', field: 'getDepartment()', enableCellEdit:false}
  ],
  data: 'data'
};

// I'm imagining here that getDepartment is expensive
// so you may want to do this in batches or something
// but this illustrates that it's out of band - after the grid renders
$timeout( function() {
  $scope.data.forEach(function(row) {
    row.getDepartment = $scope.getDepartment(row.name);
  });
}, 100);

Angularjs ui-网格行休息调用

Angularjs ui-grid row rest call

angularjs

angular-ui

angular-ui-grid