角ngGrid选择行页面加载 [英] Angular ngGrid select row on page load

查看:280
本文介绍了角ngGrid选择行页面加载的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我的问题是一个扩展thisquestion

My question is an extension to thisquestion

从NG-电网获取选择行?

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

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

我需要一个行会在页面加载选中,我需要避免听'ngGridEventData

I need a row to be selected on page load and I need to avoid listening to 'ngGridEventData'

调用$ scope.gridOptions.selectRow(2,真正的);在本体控制器自网格尚未加载失败。

calling $scope.gridOptions.selectRow(2, true); in the controller body fails since the grid has not been loaded.

避免听ngGridEventData是由于这样的事实,我需要的控制器来听一个事件触发之前基于我需要选择nggrid一行。

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.

什么想法?

推荐答案

对于我来说,没有一个答案工作(我用的NG-电网v2.0.14)。

For me, none of the answers worked (i use ng-grid v2.0.14).

所选答案的作品可能是因为数据是不是没有大的或通过Ajax调用没有装载,否则,因为当行被渲染的事件被触发,你不能选择ngGridEventData之前行,你不能选择如果它尚未呈现的行。结果
如果任何这些条件失败或电网采取比平时太多时间来渲染则所选答案将无法工作。

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.

我有大约2000行的滚动网格,但我不听ngGridEventData,所以我曾上任何限制,虽然它有一个怪异的行为对我来说:该ngGridEventData发射正好是4次对我来说,两次之前从Ajax调用数据到达后两次。结果
我用这个jQuery插件
http://benalman.com/projects/jquery-throttle-debounce -plugin / (它可以即使使用而不jQuery的),以让这个函数被调用一次。

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.

和,因为这是不够的,selectRow /选择信息功能将触发afterSelectionChange事件两次(第一次用错了行,出于某种原因)。这是我不得不做,以确保该事件,并且只能用于正确的行只发射一次。

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.

这是对我来说会发生什么:

This is what happens for me:


  • ngGridEventData(无afterSelectionChange触发,可能是因为没有呈现行)

  • ngGridEventData(无afterSelectionChange触发,可能是因为没有呈现行)

  • Ajax调用来检索数据

  • 延迟(大概渲染)

  • ngGridEventData
  • afterSelectionChange X2

  • ngGridEventData
  • afterSelectionChange X2

所以我只好用这样的:


  • 去抖,以确保该功能在延迟期间只调用一次(超时是很低的,因为呼叫接近对彼此,呈现的行检查确保第一次调用是不是正在使用的)

  • 检查渲染行是> 0,以确保第2事件不会被触发在哪里延迟和数据加载可能需要一些时间慢SISTEMS(或慢速连接)

  • 可以选择使用rowItem.selected避免再次错误,因为afterSelectionChange事件触发即使两次(该行一次选定的行被选定并且一次)选择当行

  • 使用fireOnlyOnce变量来避免调用两次afterSelectionChange功能。

下面是一个示例code:

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

这篇关于角ngGrid选择行页面加载的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆