Angular ngGrid选择页面加载行

萨纳特

我的问题是对该问题的扩展

从ng-grid获取选择行?

plunker - http://plnkr.co/edit/DiDitL?p=preview

我需要在页面加载时选择一行,并且需要避免听'ngGridEventData'

调用$ scope.gridOptions.selectRow(2,true); 由于尚未加载网格,因此控制器主体中的“故障”失败。

避免监听ngGridEventData的原因是,我需要控制器监听之前和基于此触发的事件,因此我需要选择nggrid行。

有任何想法吗?

错误的

对我而言,没有任何答案有效(我使用ng-grid v2.0.14)。

所选答案之所以可行,可能是因为数据不是很大或者不是通过ajax调用加载的,否则您不能在ngGridEventData之前选择行,因为在呈现行时会触发该事件,并且如果尚未渲染。
如果这些条件中的任何一个失败,或者网格花费了比平时更多的时间来渲染,则所选答案将不起作用。

我有一个约有2000行的可滚动网格,但是我对监听ngGridEventData没有任何限制,所以我就这样做了,尽管它对我来说有一种怪异的行为:ngGridEventData对我正好触发了4次,在数据到达之前触发了两次从ajax调用开始,然后两次。
我使用了这个jquery插件http://benalman.com/projects/jquery-throttle-debounce-plugin/(即使没有jQuery也可以使用)来制作它,因此该函数仅被调用一次。

并且由于这还不够,因此“ selectRow / selectItem”函数会两次触发“ afterSelectionChange”事件(由于某种原因第一次出现错误的行)。这是我必须执行的操作,以确保仅针对正确的行触发该事件一次。

这就是我的情况:

  • ngGridEventData(没有afterSelectionChange触发器,可能是因为没有呈现的行)
  • ngGridEventData(没有afterSelectionChange触发器,可能是因为没有呈现的行)
  • Ajax调用以检索数据
  • 延迟(可能是渲染)
  • ngGridEventData
  • afterSelectionChange x2
  • ngGridEventData
  • afterSelectionChange x2

所以我不得不用这个:

  • 进行反跳操作以确保在延迟期间仅调用一次函数(超时很低,因为调用是成对的,并且呈现的行检查确保未使用第一个调用)
  • 检查渲染的行> 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)});
    }
}));

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

使用angular-ui-grid预先选择加载行

来自分类Dev

Angular Js ngGrid

来自分类Dev

Angular-页面加载动画

来自分类Dev

页面加载时html表中按值进行的Angular 11下拉选择失败

来自分类Dev

在 angular 2 中选择的默认单选按钮的初始页面加载时显示输入表单控件

来自分类Dev

Angular ngbootstrap 在页面加载时以编程方式选择选项卡

来自分类Dev

ngGrid:如何检查是否选择了行

来自分类Dev

ngGrid:如何检查是否选择了行

来自分类Dev

Angular JS页面加载触发无限页面加载循环

来自分类Dev

Angular JS-重新加载整个页面

来自分类Dev

如何在Angular JS中加载页面?

来自分类Dev

ngif导致页面重新加载-Angular 2

来自分类Dev

Angular-延迟从CMS加载整个页面

来自分类Dev

在Angular JS中设置页面加载的值

来自分类Dev

如何在Angular JS中加载页面?

来自分类Dev

Angular JS-重新加载整个页面

来自分类Dev

如何使用 angular 或 javascript 重新加载页面

来自分类Dev

Angular 7中的页面路由后未加载angular slickgrid

来自分类Dev

在Firebase上重新加载Angular页面时找不到页面

来自分类Dev

在Firebase上重新加载Angular页面时找不到页面

来自分类Dev

页面加载时未加载angular-ui-router状态

来自分类Dev

Angular 6:无法在页面加载时加载子路由

来自分类Dev

Angular.js页面初始加载非常慢

来自分类Dev

Angular确保列表更新而无需重新加载页面

来自分类Dev

Angular在jQuery Ajax加载页面中不起作用

来自分类Dev

使用Angular在页面加载时访问Google Maps API

来自分类Dev

网站以angular js打开时如何加载特定页面

来自分类Dev

使用Angular在页面加载延迟后调用函数

来自分类Dev

等待$ rootScope值在页面加载之前在Angular中解析

Related 相关文章

热门标签

归档