Как выбрать одну строку с помощью UI-сетки?

Я работаю с университетским проектом. У меня работает REST API с пружинной загрузкой и угловым интерфейсом. это моя рабочая часть angularJs.

HomeService.js

this.getDeviceList = function getDeviceList(){
    return $http.get(REST_SERVICE_URI + '/get_device_list')

}

 this.getPeripheralList = function getPeripheralList(dev_hard_id){
    return $http.get(REST_SERVICE_URI + '/get_peripherals/?dev_hard_id=' + dev_hard_id)
}

Рабочие функции в HomeController.js

$scope.getDeviceList = function () {
    HomeService.getDeviceList()
      .then (function success(response){ 
          $scope.details = response.data;
          $scope.errorMessage = '';
      },

      function error(response){
          $scope.errorMessage = 'Error occured!!!';
          $scope.message = response.data.message;
    });
}

$scope.getPeripheralList = function (devHardwareId){
    HomeService.getPeripheralList(devHardwareId)
    .then (function success(response){
        $scope.peripheralDetails = response.data;
        $scope.errorMessage = '';
    },
    function error(response) {
        $scope.errorMessage = 'Error occured!!!';
        $scope.message = response.data.message;

    });
}

рабочая примитивная таблица в html файле.

<div class="panel-heading">
                Logged in user: <b th:inline="text"> [[${#httpServletRequest.remoteUser}]] </b>
                <br>
                <span class="lead">Devices</span></div>
                <div class="panel-body">

                    <div class="table-responsive">
                        <table class="table table-hover">
                                <thead>
                                        <tr>
                                            <th>Device Name</th>

                                        </tr>
                                </thead>
                                <tbody>
                                        <tr ng-repeat="d in details track by d.devHardwareId">
                                            <td>{{d.deviceName}}</td>

                                            <td align="right"><button type="button" ng-click="getPeripheralList(d.devHardwareId)" class="btn btn-success custom-width">Attached Devices</button></td>
                                        </tr>
                                </tbody>
                        </table>      
                    </div>
                </div>

вышеуказанные коды работают хорошо. но мое требование - мне нужно выбрать одну строку и в то время, когда мне нужно позвонить getPeripheralList(d.devHardwareId) функция для конкретного устройства. для этого я использую UI-Grid.

поэтому я добавил функции в мой HomeController.js

$scope.gridOptions = { enableRowSelection: true, enableRowHeaderSelection: false };

$scope.gridOptions.columnDefs = [
    { name: 'Device HardwareId' },
    { name: 'Device Name'},
    { name: 'Device Ip Address'},
    { name: 'Attached Cameras' }
  ];

$scope.gridOptions.multiSelect = false;
$scope.gridOptions.modifierKeysToMultiSelect = false;
$scope.gridOptions.noUnselect = true;
$scope.gridOptions.onRegisterApi = function( gridApi ) {
$scope.gridApi = gridApi;
  };


$scope.toggleRowSelection = function() {
    $scope.gridApi.selection.clearSelectedRows();
    $scope.gridOptions.enableRowSelection = !$scope.gridOptions.enableRowSelection;
    $scope.gridApi.core.notifyDataChange( uiGridConstants.dataChange.OPTIONS);
  };

$scope.deviceGrid = {
    data: 'details',
};

и изменили HTML-страницу тоже..

<button type="button" class="btn btn-success" ng-click="toggleRowSelection()">Toggle rowSelection</button>
<strong>rowSelection:</strong> 
<span ng-bind="gridApi.grid.options.enableRowSelection"></span>
<div ui-grid="deviceGrid" ui-grid-selection class="grid"></div>

но это не работает, как я ожидаю. это позволяет выбрать несколько строк, которые я не хочу делать, и я не понимаю, как вызвать getPeripheralList(d.devHardwareId) функция с UI-сеткой. (всякий раз, когда я выбираю одну строку, я хочу вызвать метод выше), поэтому я хотел бы получить помощь от кого-то здесь.

Источник

2 ответа

Решение

Если вы не хотите разрешать выделение нескольких строк в вашей сетке, вам нужно только настроить ее в ваших gridOptions, например так:

$scope.gridOptions = { enableRowSelection: true, enableRowHeaderSelection: false, multiSelect:false };

Если вы хотите вызвать функцию при выборе строки, вы должны зарегистрировать gridApi и использовать ее, вы можете сделать что-то вроде следующего:

$scope.gridOptions = { enableRowSelection: true, enableRowHeaderSelection: false, multiSelect:false, 
onRegisterApi: function (gridApi) { 
 gridApi.selection.on.rowSelectionChanged($scope, function (row) {
     // Your call to your function goes here
    });
}};
Источник

Это был ответ

$scope.deviceGrid = { 
data:'details',
enableRowSelection: true, 
enableRowHeaderSelection: false, 
enableSelectAll: false,
multiSelect: false,
noUnselect: true,
onRegisterApi: function (gridApi) { 
 gridApi.selection.on.rowSelectionChanged($scope, function (row) {
    var msg = 'row selected ' + row.isSelected;
   console.log(row.entity.devHardwareId);
   HomeService.getPeripheralList(row.entity.devHardwareId).then (function success(response){
    $scope.peripheralDetails = response.data;
    $scope.errorMessage = '';
},
function error(response) {
    $scope.errorMessage = 'Error occured!!!';
    $scope.message = response.data.message;

});
    });
}};
Источник
Другие вопросы по тегам