Question

这是我的代码

＆＃13;

var app = angular.module('app', ['ngAnimate', 'ui.grid']);

app.controller('MainCtrl', ['$scope', '$http', '$timeout', function ($scope, $http, $timeout) {
  $scope.gridOptions = {
    enableSorting: true,
    columnDefs: [
      { field: 'name' },
      { field: 'gender' },
      { field: 'company', enableSorting: false }
    ]
  };
  
  $timeout(function () {
    $http.get('https://rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
      .success(function(data) {
        $scope.gridOptions.data = data;
      });
  }, 2000);
}])

.directive('gridLoading', function () {
  return {
    restrict: 'C',
    require: '^uiGrid',
    link: function ($scope, $elm, $attrs, uiGridCtrl) {
      $scope.grid = uiGridCtrl.grid;
    }
  }
});

＆＃13;

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link data-require="bootstrap-css@*" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
    <link data-require="font-awesome@*" data-semver="4.1.0" rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.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-unstable.js"></script>
    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css" />
    <link rel="stylesheet" href="main.css" type="text/css" />
  </head>

  <body>
    <div ng-controller="MainCtrl">
  Click on a column header to sort by that column. (The third column has sorting disabled.)
                    <br />
      <br />
      <div ui-grid="gridOptions" class="grid">
        <div class="well grid-loading" ng-show="grid.rows.length == 0">
          <i class="fa fa-spin fa-spinner"></i>
          <strong>Data Loading...</strong>
        </div>
      </div>
    </div>
    <script src="app.js"></script>
  </body>

</html>

＆＃13;

在上面的代码中，我在网格上的数据渲染之前在ui-grid上加载了符号，但加载符号出现在ui-grid.so的下方我希望在网格上的数据渲染之前在ui-grid上显示加载符号。这是我的傻瓜http://plnkr.co/edit/6ED6fPdGGwLNb1Zqubls?p=preview

Answer 1

可以做你需要的一个快速解决方案纯粹是CSS改变。我将top: 0px; left: 0px;添加到加载进度容器的样式中，它似乎可以覆盖网格。 Here's my plunker

如何在数据渲染之前在ui-grid内显示加载符号？

1 个答案: