根据从另一个 ui 网格中选择的行加载一个 ui 网格

Question

我有一个 UI 网格组件，当您单击一行时，我希望它加载页面上另一个 ui 网格组件的内容。您将如何编写一个函数来告诉网格根据从第一个网格行中选择的参数调用 rest api 来更新第二个网格？例如，第一个网格是州列表，第二个网格将显示所选州内的所有城市。

Answer 1

以下是实现您想要的目标的步骤。

注册网格API
调用修改行
使用 .get selectedRows() 将您的辅助函数调用放在 onRowSelection 调用中以获取所有选定的行。

这是一个简单的例子：

$scope.yourGridName.onRegisterApi = function (gridApi) {
    // Set gridApi on scope, if you have more then one grid, 
    // Your grid api name (gApi in this case)must be unique
    $scope.gApi = gridApi;

    // Allow row modification 
    $scope.gApi.grid.modifyRows($scope.requestsGrid.data);

    // On a change of selection
    gridApi.selection.on.rowSelectionChanged($scope, function (row) {

        // Get current selected row, current row is an array
        var currentRow = $scope.gApi.selection.getSelectedRows();

        //put your secondary call for your second grid here ex:
        var config = {
            params : {param : currentRow[0].prop}
        }

        $scope.get("/your/URL", config)
               .then (function (data) { //success callback })
               .then (function (data, status...etc) { //error callback})
               .finally( function(data,...etc) {//reset your grid})
    });
};

如果这能解决您的问题，请告诉我。

http://ui-grid.info/docs/#/tutorial

根据从另一个 ui 网格中选择的行加载一个 ui 网格

Load one ui grid based on row selected from another ui grid

angularjs

angular-ui-grid