过滤ui-grid后选择第一个可见行

时间:2016-06-22 22:07:01

标签: javascript angularjs angular-ui-grid

在应用过滤器后,我无法强制选择第一行。因此,当我加载我的页面以选择第一行时,我使用:

      gridApi.selection.selectRow($scope.gridOptions.data[0]);

这是来自API文档,很明显。 现在,我试图在过滤后选择第一行。 我有singleFilter功能,它来自官方文档

 $scope.singleFilter = function( renderableRows ){
           var matcher = new RegExp($scope.filterValue);
           renderableRows.forEach( function( row ) {
               var match = false;
               [
              'name', 'company', 'email'
               ].forEach(function( field ){
                   if (field.indexOf('.') !== '-1' ) {
                       field = field.split('.');
                   }
                   if ( row.entity.hasOwnProperty(field) && row.entity[field].match(matcher) || field.length === 2 && row.entity[field[0]][field[1]].match(matcher)){
                       match = true;
                   }

               });
               if ( !match ){
                   row.visible = false;
               }
           });
           var rows = $scope.gridApi.core.getVisibleRows();

           var first =  function(array, n) {  
                  if (array == null){   
                  return void 0;
                  }
                  if (n == null) {  
                  return array[0]; 
                  }
                  if (n < 0) {
                  return [];
                  }
                  return array.slice(0, n); 
           }; 

           console.log(first(rows))
           $scope.gridApi.selection.selectRow(first(rows));

           return renderableRows;
       };

我得到可见行的长度

           var rows = $scope.gridApi.core.getVisibleRows();

通过简单的脚本我得到第一行

       var first =  function(array, n) {  
              if (array == null){   
              return void 0;
              }
              if (n == null) {  
              return array[0]; 
              }
              if (n < 0) {
              return [];
              }
              return array.slice(0, n); 
       }; 
       console.log(first(rows))

然后我尝试应用选择

 $scope.gridApi.selection.selectRow(first(rows));
但不幸的是没有成功。我的错误在哪里?我感谢任何帮助。 My plunker

1 个答案:

答案 0 :(得分:3)

我在下面创建了一个工作的plunker。

这不起作用的原因是因为您获得的可见行是所有行,而不仅仅是已过滤的行。所有行的原因是因为您在返回过滤器之前调用它们。我已经使用我们现在所了解的知识创建了逻辑,这是函数完成后返回的内容。

http://plnkr.co/edit/LIcpOs7dXda5Qa6DTxFU

 var filtered = [];
 for (var i = 0; i < renderableRows.length; i++) {
   if (renderableRows[i].visible) {
     filtered.push(renderableRows[i].entity)
   }
 }

 if (filtered.length) {
   $scope.gridApi.selection.selectRow(filtered[0]);
 }