• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

角UI网格重复上虚拟滚动

JavaScript 来源:Al Ex Tsm 6次浏览

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

版权声明:本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。
喜欢 (0)