Javascript 在页面加载时选择行

我的问题是这个问题的延伸

普朗克-

我需要在页面加载时选择一行，并且我需要避免侦听“ngGridEventData”

调用$scope.gridOptions.selectRow（2，true）；由于未加载网格，因此控制器主体中出现故障

避免侦听ngGridEventData是因为我需要控制器侦听之前触发的事件，并基于此，我需要选择nggrid行

---

有什么想法吗？

向控制器添加

$timeout

，然后执行以下操作：

$timeout(function() { 
    $scope.gridOptions.selectRow(2, true); 
});

---

示例：

好的，答案很久以前就被授予了，但我仍然认为它有一种代码气味（对海报没有冒犯，但它是次优的）

我所做的是使用网格的

ngGridEventData

事件

您必须小心，因为它会多次触发（每添加一行触发一次），但是，因为我们知道将填充网格的数据的大小，并且由于事件允许我们检查渲染了多少行，我们可以知道最后一行何时渲染，这意味着网格没有完全显示（注意：我没有使用滚动网格进行测试，其中一些行可能不可见，请有人确认它在礼盒中是否有效？我个人从不使用滚动网格（它是浏览器页面，而不是桌面）

大概是这样的：

    $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);                               
                       }
                   }

---

对我来说，所有答案都不起作用（我使用的是ng grid v2.0.14）

所选答案之所以有效，可能是因为数据不是很大，或者不是通过ajax调用加载的，否则您不能在ngGridEventData“之前”选择一行，因为该事件是在呈现行时触发的，如果尚未呈现行，则无法选择该行。
如果这些条件中的任何一个出现故障，或者网格需要比通常更多的时间来渲染，则选定的答案将不起作用

我有一个大约2000行的可滚动网格，但我对监听ngGridEventData没有任何限制，所以我做了这项工作，尽管它对我来说有一个奇怪的行为：ngGridEventData为我精确触发4次，在ajax调用到达数据之前触发两次，之后触发两次。
我使用这个jquery插件（即使没有jquery也可以使用）使函数只被调用一次

由于这还不够，“selectRow/selectItem”函数会触发“afterSelectionChange”事件两次（出于某种原因，第一次是错误的行）。这就是我必须做的，以确保事件只触发一次，并且只针对正确的行

这就是发生在我身上的事情：

• ngGridEventData（没有afterSelectionChange触发器，可能是因为没有渲染行）
• ngGridEventData（没有afterSelectionChange触发器，可能是因为没有渲染行）
• 检索数据的Ajax调用
• 延迟（可能是渲染）
• ngGridEventData
• 选后改变x2
• ngGridEventData
• 选后改变x2

所以我不得不用这个：

• 取消Bounce以确保在延迟期间只调用函数一次（超时时间较低，因为调用成对地彼此接近，渲染行检查以确保第一个调用不是正在使用的调用）
• 检查渲染行是否>0，以确保前2个事件不会在延迟和数据加载可能需要一些时间的慢速系统（或慢速连接）上触发
• （可选）使用rowItem.selected以避免另一个“错误”，因为即使在选择行时，afterSelectionChange事件也会触发两次（一次用于未选择的行，一次用于所选行）
• 使用fireOnlyOnce变量避免调用两次afterSelectionChange函数

下面是一个示例代码：

$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)});
    }
}));

---

可以在此处找到没有超时的解决方案： 在这里：

---

显然，modifyRows需要v3.0.0-rc.22+

为什么必须有超时？angular docs中有关于它的信息吗？我需要把它放在一个$timeout中，因为在创建控制器时网格没有初始化。另一种方法是使一个指令.Ick.Code发出气味。如果计时器太短，它不会发出声音rk作为网格将是未定义的。如果时间太长，用户将等待选择的发生。我一直在谷歌搜索，没有找到一个好的解决方案，但我肯定不会使用这个。任何专业人士提出的代码审查将不会得到非常神的年度评估。解决方案应该是事件驱动的，带有事件标志假设网格已经被完全填充。也许在ng grid v3中？@Mawg看起来是错误的，但事实并非如此。这是适合你的框架，它们都有自己的怪癖。（我知道已经两年了，对此很抱歉，但你太固执己见了！我希望代码审查人员了解他们使用的框架……）我可以确认它在滚动网格上不起作用。事件将只针对所示的行触发（实际上我不确定它是否为每一行触发。对我来说，它触发了4次：两次渲染0行，两次渲染6行，然后停止触发）

$scope.gridOptions = {
...
                onRegisterApi : function (gridApi) {
                    $scope.gridApi = gridApi;
                    $scope.gridApi.grid.modifyRows($scope.gridOptions.data);
                    $scope.gridApi.selection.selectRow($scope.gridOptions.data[0]);
                }
            };