使用外部过滤器过滤数据时 UI Grid 变为空白答案

【问题标题】：UI Grid getting blank when filtering data using external filter使用外部过滤器过滤数据时 UI Grid 变为空白
【发布时间】：2016-11-22 12:33:10
【问题描述】：

我在我的项目中使用 UI 网格 v3.0.0。最近，我将代码更改为使用下拉列表值过滤网格。进行此更改后，当我多次过滤网格时，UI 网格变为空白。这是间歇性问题，我没有收到任何 javascript 错误。当应用过滤器后 UI 网格变为空白时，UI 网格将保持空白，直到用户移动 UI 网格的滚动条。

我正在使用以下网格选项。

	    $scope.options = {
	    		enableColumnMenus: false,
				enableSelectAll: true,
	    		enableFiltering: true,
	    		enableHorizontalScrollbar:0, 
				enableRowHeaderSelection: false,
	    		enableRowSelection: true,
	    		data :  [], 
				showSelectionCheckbox: true,
				selectionRowHeaderWidth: 25,
				rowHeight: 25,
				columnDefs : $scope.columnDefs
	   };
	    
	    $scope.options.onRegisterApi = function (gridApi) {
	    	$scope.options = gridApi;
	    	gridApi.selection.on.rowSelectionChanged($rootScope , function(gridApi) {
	    		$scope.options.selected = gridApi;
			});

在归档 ui 网格数组后，我也在下面调用网格 api 进行刷新。

	   $scope.options.core.refresh();

但它仍然无法正常工作。如果有人能给我关于如何解决这个问题的提示，我将不胜感激。谢谢。

【问题讨论】：

标签： angularjs angular-ui-grid

【解决方案1】：

我一直无法让 core.refresh 为我工作。我实际上使用了一种解决方法。你可以试试看是否能解决这个问题。

创建函数：

 $scope.refresh = false;

  function refresh () {
    $scope.refresh = true;
    $timeout(function () {
        $scope.refresh = false;
    }, 0);
};

在您的网格 div 上放置 ng-if：

                <div ng-if="!refresh" ui-grid="gridOptions" class="grid"></div>

然后在您的控制器中调用refresh()，在您想要刷新网格的位置/时间。

我希望这会有所帮助！

【讨论】：

感谢您的回答。我有一个疑问。在刷新功能中，您只是将刷新设置为 false。你想刷新代码是什么？它是如何工作的？

【解决方案2】：

您需要在刷新后设置滚动位置，如下所示：

$scope.options.core.refresh();    
$scope.options.core.scrollTo($scope.data[0], $scope.columnDefs[0]);

【讨论】：

【解决方案3】：

您可以使用 $filter of angular 来过滤您的剑道网格数据源。

您可以从以下代码中获取参考，如果您需要任何其他信息，请告诉我。

 var ds = $filter('filter')($scope.grdDataSource.dataSource.data, $scope.searchText);
 $scope.kendoGridOptions.dataSource.data = ds;

【讨论】：

他没有使用剑道网格。他正在使用 ui-grid。