角UI网格重复上虚拟滚动

  • Z时代
  • 2024-01-10
  • 分类：问答

cellTemplates我已经在某些列的测试角UI栅cellTemplate和已经注意到，上滚动数据被正确地通过显示自定义cellTemplates细胞的异常更新。 http://plnkr.co/edit/yXE3AuZEPwjlmlqpFTNq?p=preview角UI网格重复上虚拟滚动

JS：

var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.pinning', 'ui.grid.autoFitColumns','ui.grid.resizeColumns']); 
app.controller('MainCtrl', ['$scope', '$http', '$log', '$timeout', function ($scope, $http, $log, $timeout) { 
     var customTemp = '<img ng-init="url=COL_FIELD" src="https://dummyimage.com/100x100/000/fff&text={{url}}" alt="Smiley face" height="100" width="100">' 
     $scope.gridOptions = {}; 
    $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json') 
    .success(function(data) { 
     $scope.gridOptions.data = data; 
    }); 
    $scope.gridOptions.rowHeight = 50; 
    $scope.gridOptions.columnDefs = [ 
    { name:'eee' }, 
    { name:'age' }, 
    { name:'address.street'} 
    ]; 
    $scope.gridOptions2 = {}; 
    $scope.gridOptions2.data =[]; 
    $scope.gridOptions2.rowHeight =100; 
    $scope.gridOptions2.columnDefs =[]; 
    var timer = function() { 
    for (i = 1; i < 100; i++) { 
     $scope.gridOptions2.data.push({ 
      value:i, 
      name:'Name'+i, 
      url:'https://dummyimage.com/30x30/000/fff&text='+i, 
      image:i 
     }); 
    } 
    $scope.gridOptions2.columnDefs =[{ 
     name:'image', 
     cellTemplate:customTemp, 
     width:100 
    }, 
    { 
     name:'name', 
     cellTemplate:customTemp, 
     width:100 
    }, 
    { 
     name:'url', 
     width:50 
    }, 
    { 
     name:'value' 
    } 
    ]; 
    }; 
$timeout(timer,0); 
console.log($scope.gridOptions); 
console.log($scope.gridOptions2); 
}]);

HTML：

<!doctype html> 
<html ng-app="app"> 
    <head> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script> 
    <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script> 
    <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script> 
    <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script> 
    <script src="http://ui-grid.info/release/ui-grid.js"></script> 
    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css"> 
    <link rel="stylesheet" href="main.css" type="text/css"> 
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet"> 
    <link rel="stylesheet" href="https://npmcdn.com/[email protected]/ui-grid.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.js"></script> 
    <script src="https://npmcdn.com/[email protected]/ui-grid.min.js"></script> 
    <script src="https://npmcdn.com/[email protected]/dist/autoFitColumns.min.js"></script> 
    </head> 
    <body> 
<div ng-controller="MainCtrl"> 
    <div> 
    <div ui-grid="gridOptions2" 
     ui-grid-auto-fit-columns 
     ui-grid-pagination 
     ui-grid-resize-columns 
     class="full-height"></div> 
    <div ui-grid="gridOptions" 
     ui-grid-auto-fit-columns 
     ui-grid-pagination 
     ui-grid-resize-columns 
     class="full-height"></div>  
    </div> 
</div> 
    <script src="app.js"></script> 
    </body> 
</html>

回答：

解决方案：一个观察者对COL_FIELD添加指令：

这里是不受欢迎的行为通过plnkr转载

工作：plnkr：http://plnkr.co/edit/yXE3AuZEPwjlmlqpFTNq?p=preview

个

JS：

var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.pinning', 'ui.grid.autoFitColumns','ui.grid.resizeColumns']); 
app.directive('myDirective', function ($log) { 
    return { 
     restrict: 'E', 
     replace: true, 
     scope: { 
      url: '=' 
     }, 
     template: '<img src="https://dummyimage.com/100x100/000/fff&text={{url}}" alt="Smiley face" height="100" width="100">', 
     link: function (scope, element, attrs) { 
      scope.$watch('url', function(newValue) { 
      var url = newValue; 
      }); 
     } 
    }; 
}); 
app.controller('MainCtrl', ['$scope', '$http', '$log', '$timeout', function ($scope, $http, $log, $timeout) { 
    var customTemp = '<div><my-directive url="MODEL_COL_FIELD" /></div>'; 
    $scope.gridOptions = {}; 
    $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json') 
    .success(function(data) { 
     $scope.gridOptions.data = data; 
    }); 
    $scope.gridOptions.rowHeight = 50; 
    $scope.gridOptions.columnDefs = [ 
    { name:'eee' }, 
    { name:'age' }, 
    { name:'address.street'} 
    ]; 
    $scope.gridOptions2 = {}; 
    $scope.gridOptions2.data =[]; 
    $scope.gridOptions2.rowHeight =100; 
    $scope.gridOptions2.columnDefs =[]; 
    var timer = function() { 
    for (i = 1; i < 100; i++) { 
     $scope.gridOptions2.data.push({ 
      value:i, 
      name:'Name'+i, 
      url:'https://dummyimage.com/30x30/000/fff&text='+i, 
      image:i 
     }); 
    } 
    $scope.gridOptions2.columnDefs =[{ 
     name:'image', 
     cellTemplate:customTemp, 
     width:100 
    }, 
    { 
     name:'name', 
     cellTemplate:customTemp, 
     width:100 
    }, 
    { 
     name:'url', 
     width:50 
    }, 
    { 
     name:'value' 
    } 
    ]; 
    }; 
$timeout(timer,0); 
console.log($scope.gridOptions); 
console.log($scope.gridOptions2); 
}]);

以上是 角UI网格重复上虚拟滚动 的全部内容， 来源链接： utcz.com/qa/260609.html

回到顶部