javascript Angular ngGrid 在页面加载时选择行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18504761/
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 ngGrid select row on page load
提问by Sanath
My question is an extension to thisquestion
我的问题是thisquestion的扩展
Getting select rows from ng-grid?
plunker - http://plnkr.co/edit/DiDitL?p=preview
plunker - http://plnkr.co/edit/DiDitL?p=preview
I need a row to be selected on page load and I need to avoid listening to 'ngGridEventData'
我需要在页面加载时选择一行，我需要避免收听“ngGridEventData”
calling $scope.gridOptions.selectRow(2, true); in the controller body fails since the grid has not been loaded.
调用 $scope.gridOptions.selectRow(2, true); 由于尚未加载网格，因此在控制器主体中失败。
avoiding listening to ngGridEventData is due to the fact that I need the controller to listen to an event triggered before and based on that I need to select the nggrid row.
避免侦听 ngGridEventData 是因为我需要控制器侦听之前触发的事件，并且基于我需要选择 nggrid 行。
any ideas?
有任何想法吗？
采纳答案by valepu
For me, none of the answers worked (i use ng-grid v2.0.14).
对我来说，没有一个答案有效（我使用 ng-grid v2.0.14）。
The selected answer works probably because data is either not big or is not loaded through an ajax call otherwise you can't select a row "before" ngGridEventData since the event is fired when the rows are rendered and you can't select a row if it hasn't been rendered yet.
Should any of these conditions fail or the grid take too much time than usual to render then the selected answer will not work.
选定的答案可能有效，因为数据要么不大，要么未通过 ajax 调用加载，否则您无法在 ngGridEventData 之前选择行，因为在呈现行时会触发该事件，并且如果出现以下情况，则无法选择行它尚未呈现。
如果这些条件中的任何一个失败，或者网格比平时花费太多时间来呈现，则所选答案将不起作用。
I have a scrollable grid with about 2000 rows, but I haven't any restriction on listening to the ngGridEventData so i worked on that, although it has a weird behavior for me: The ngGridEventData fires exactly 4 times for me, twice before data arrives from the ajax call and twice after.
I used this jquery plugin http://benalman.com/projects/jquery-throttle-debounce-plugin/(it can be used even without jQuery though) to make it so that the function was called only once.
我有一个大约有 2000 行的可滚动网格，但我对收听 ngGridEventData 没有任何限制，所以我进行了研究，尽管它对我来说有一个奇怪的行为：ngGridEventData 对我来说正好触发了 4 次，在数据到达之前触发了两次从 ajax 调用和两次之后。
我使用了这个 jquery 插件http://benalman.com/projects/jquery-throttle-debounce-plugin/（尽管它可以在没有 jQuery 的情况下使用）来使它只调用一次该函数。
And since this is not enough, the "selectRow/selectItem" function triggers the "afterSelectionChange" event twice (the first time with the wrong row, for some reason). This is what i had to do to make sure that the event is fired only once and only for the correct row.
并且由于这还不够，“selectRow/selectItem”函数会触发“afterSelectionChange”事件两次（第一次由于某种原因使用了错误的行）。这是我必须做的，以确保事件只触发一次，并且只针对正确的行。
This is what happens for me:
这就是我的情况：
- ngGridEventData (no afterSelectionChange triggers, probably because there are no rendered rows)
- ngGridEventData (no afterSelectionChange triggers, probably because there are no rendered rows)
- Ajax call to retrieve data
- delay (probably rendering)
- ngGridEventData
- afterSelectionChange x2
- ngGridEventData
- afterSelectionChange x2
- ngGridEventData（没有 afterSelectionChange 触发器，可能是因为没有呈现的行）
- ngGridEventData（没有 afterSelectionChange 触发器，可能是因为没有呈现的行）
- Ajax 调用以检索数据
- 延迟（可能是渲染）
- ngGridEventData
- 选择后更改 x2
- ngGridEventData
- 选择后更改 x2
So i had to use this:
所以我不得不使用这个：
- debounce to make sure the function is called only once during the delay (the timeout is low since the calls are close to one another in pair, and the rendered rows checks makes sure the first call is not the one being used)
- check that the rendered rows are > 0 to make sure the first 2 events are not triggered on slow sistems (or slow connection) where the delay and data load might take some time
- Optionally use rowItem.selected to avoid another "bug" since the afterSelectionChange event fires twice even when selecting a row (once for the row being unselected and once for the selected row)
- use the fireOnlyOnce variable to avoid calling twice the afterSelectionChange function.
- 去抖动以确保该函数在延迟期间仅被调用一次（超时很低，因为调用是成对的，并且呈现的行检查确保第一个调用不是正在使用的调用）
- 检查呈现的行是否 > 0 以确保前 2 个事件不会在延迟和数据加载可能需要一些时间的慢速系统（或慢速连接）上触发
- 可选地使用 rowItem.selected 来避免另一个“错误”，因为即使在选择行时 afterSelectionChange 事件也会触发两次（一次是针对未选择的行，一次是针对所选行）
- 使用 fireOnlyOnce 变量避免两次调用 afterSelectionChange 函数。
Here's a sample code:
这是一个示例代码：
$scope.fireOnlyOnce=true;
$scope.gridOptions = {
//Stuff
afterSelectionChange: function (rowItem) {
if($scope.fireOnlyOnce){
if(rowItem.selected){
//Do stuff
}
} else {
$scope.fireOnlyOnce=true;
}
}
};
$scope.$on('ngGridEventData', jQuery.debounce(100, function (row, event){
var renderedRows = row['targetScope'].renderedRows.length;
if(renderedRows>0){
$scope.fireOnlyOnce=false;
$timeout(function(){$scope.gridOptions.selectRow(2, true)});
}
}));
回答by user508994
Add $timeoutto your Controller and do this:
添加$timeout到您的控制器并执行以下操作：
$timeout(function() {
$scope.gridOptions.selectRow(2, true);
});
回答by rob2universe
A solution without timeout can be found here: https://github.com/angular-ui/ui-grid/issues/2267and here: Pre-Select rows on load with angular-ui-grid
可以在此处找到没有超时的解决方案：https: //github.com/angular-ui/ui-grid/issues/2267和此处： 使用 angular-ui-grid 在加载时预选择行
$scope.gridOptions = {
...
onRegisterApi : function (gridApi) {
$scope.gridApi = gridApi;
$scope.gridApi.grid.modifyRows($scope.gridOptions.data);
$scope.gridApi.selection.selectRow($scope.gridOptions.data[0]);
}
};
Apparently modifyRows requires v3.0.0-rc.22+
显然 modifyRows 需要 v3.0.0-rc.22+
回答by Mawg says reinstate Monica
Ok, the answer was awarded long ago, but I still think that it has a code smell (no offence to the poster, but it issub-optimal.
好吧，这个答案很久以前就给了，但我仍然认为它有代码气味（对海报没有冒犯，但它是次优的。
What I did was use the grid's ngGridEventDataevent.
我所做的是使用网格的ngGridEventData事件。
You have to be careful, since it fires multiple times (once for each row added), but, since we know the size of the data which will populate the gird and, since the event, allows us to examine how many rows have been rendered, we can tell when the last row is rendered, meaning that the grid is not fully displayed (NOTE:I did not test this with scrolling grids, where some rows may not be visible, could someone please confirm if it works in hat case? I personally never use scrolling grids (it's a browser page, not a Desktop).
您必须小心，因为它会触发多次（每添加一行一次），但是，因为我们知道将填充网格的数据的大小，并且由于该事件，我们可以检查已呈现多少行，我们可以知道最后一行何时呈现，这意味着网格未完全显示（注意：我没有使用滚动网格对此进行测试，其中某些行可能不可见，有人可以确认它是否适用于帽子情况？我个人从不使用滚动网格（它是浏览器页面，而不是桌面）。
Something like this:
像这样的东西：
$scope.$on('ngGridEventData', function (row, event)
{
if (event == $scope.vehicleTypeGridOptions.gridId)
{
console.info('@+@ vehicleTypeGridOptions grid updated');
var renderedRows = row['targetScope'].renderedRows.length;
console.info('renderedRows = ' + renderedRows + '; num data rows = ' + $scope.vehicleTypesGridData.length);
if (renderedRows == 0)
{
return;
}
// if grid rowcount = dat length then it's fully displayed
if (renderedRows == $scope.vehicleTypesGridData.length)
{
console.log('vehicleTypeGrid fully rendered. Select row zer0, then populate vehicleDescriptionGrid');
console.info('Select row zer0');
$scope.vehicleTypeGridOptions.selectItem(0, true); // Grid rendered, select first row
// console.table($scope.vehicleTypeGridOptions.selectedItems);
var vehicle_type = $scope.vehicleTypeGridOptions.selectedItems[0].vehicle_type;
console.info(vehicle_type);
}
}
