Javascript angular ui-grid 事件：行被选中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29247032/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
angular ui-grid event: row selected
提问by Pablo
I am trying to enable/disable a button based on the selection of a row on a ui-grid. If there are no rows selected, the button is disabled.
我正在尝试根据 ui-grid 上的行选择启用/禁用按钮。如果没有选择任何行，该按钮将被禁用。
I found this plunkrwith the old ng-grid way of firing an event after a row is selected.
我发现这个plunkr使用旧的 ng-grid 方式在选择一行后触发事件。
$scope.gridOptions = {
data: 'myData',
selectedItems: $scope.selections,
enableRowSelection: true,
afterSelectionChange:function() {
if ($scope.selections != "" ) {
$scope.disabled = false;
} else {
$scope.disabled = true;
}
}
};
Unfortunately it does not work, and I have found no sign of such event in the ui-grid documentation.
不幸的是它不起作用，我在 ui-grid文档中没有发现此类事件的迹象。
How can I achieve that with ui-grid?
我怎样才能用 ui-grid 实现这一点？
回答by Huy Hoang Pham
In ui-grid, you register a callback function on the event "rowSelectionChanged"
在 ui-grid 中，您在“rowSelectionChanged”事件上注册了一个回调函数
$scope.gridOptions.onRegisterApi = function (gridApi) {
$scope.gridApi = gridApi;
gridApi.selection.on.rowSelectionChanged($scope, callbackFunction);
gridApi.selection.on.rowSelectionChangedBatch($scope, callbackFunction);
}
}
function callbackFunction(row) {
var msg = 'row selected ' + row.isSelected; $log.log(msg);
})
I think you should take a look at the tutorial page in ui-grid: http://ui-grid.info/docs/#/tutorial/210_selection. The API page sucks, in my opinion :(.
我认为您应该查看 ui-grid 中的教程页面：http: //ui-grid.info/docs/#/tutorial/210_selection。在我看来，API 页面很糟糕:(。
回答by Vishal Gulati
you can first get all the records selected in the gridcurrently by doing :
您可以首先grid通过执行以下操作获取当前选择的所有记录：
$scope.rowsSelected = $scope.gridApi.selection.getSelectedRows();
now we can get the length of this array using :
现在我们可以使用以下方法获取此数组的长度：
$scope.countRows = $scope.rowsSelected.length;
based on $scope.countRows>0or 0you can enable or disable a button using
基于$scope.countRows>0或者0您可以使用启用或禁用按钮
ng-disabled = "countRows"
回答by Nikhil Kumar K
$scope.countRows=0;
$scope.gridOptions.onRegisterApi = function(gridApi){
$scope.gridApi = gridApi;
gridApi.selection.on.rowSelectionChanged($scope, function(row){
$scope.countRows = $scope.gridApi.selection.getSelectedRows().length;
});
gridApi.selection.on.rowSelectionChangedBatch($scope, function(row){
$scope.countRows = $scope.gridApi.selection.getSelectedRows().length;
});
};
In the HTML side you can use some thing like this
在 HTML 方面，你可以使用这样的东西
<button class="custom-button" ng-disabled="countRows<=0" ng-click="submit()">Details</button>
