如何使用 ui-grid Select 单行?
How to Select a Single Row with ui-grid?
我正在处理大学项目。我有 REST API 和 spring 引导和 angularJs 前端。这是我在 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 文件中的工作原语 table。
<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>
以上代码运行良好。但我的要求 ui 是我需要 select 一行,当时我需要为特定设备调用 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>
但这并不像我预期的那样有效。它允许 select 多行,我不想这样做,我不明白如何使用 ui-grid 调用 getPeripheralList(d.devHardwareId)
函数。 (每当我 select 单行我想调用上面的方法)所以我希望从这里的人那里得到帮助。
如果您不想在您的网格中选择多行,您只需在您的 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;
});
});
}};
我正在处理大学项目。我有 REST API 和 spring 引导和 angularJs 前端。这是我在 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 文件中的工作原语 table。
<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>
以上代码运行良好。但我的要求 ui 是我需要 select 一行,当时我需要为特定设备调用 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>
但这并不像我预期的那样有效。它允许 select 多行,我不想这样做,我不明白如何使用 ui-grid 调用 getPeripheralList(d.devHardwareId)
函数。 (每当我 select 单行我想调用上面的方法)所以我希望从这里的人那里得到帮助。
如果您不想在您的网格中选择多行,您只需在您的 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;
});
});
}};