阿里云新用户优惠

九、UI-Grid Grid in a Modal 模态框中的表格

原文:110 Grid in a Modal 在弹出的模态框中使用表格。

在某些情况下,特别是 bootstrap modal,可能会出现表格渲染宽度过小或显示不完全。会误认为是由于 bootstrap modal 的动画渲染导致表格渲染时的可用空间不如预期。可以通过调用handleWindowResize来纠正。动画渲染的时间不好确定,所以一般推荐使用$interval,在模态框打开后的5秒内每隔500ms循环调用。

从某种意义上说,这类似于自动调整大小的功能,但它只在模态框开启后的短时间内完成。

  • index.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>
    <script src="http://ui-grid.info/release/ui-grid.css"></script>
    <script src="app.js"></script>
  </head>
  <body>
    <div ng-controller="MainCtrl">
      <button id="showButton" class="btn btn-success" ng-click="showModal()">Show Modal</button>
    </div>
  </body>
</html>
  • main.css
.grid {
  width: 300px;
  height: 250px;
}
  • app.js
var app = angular.module('app', ['ngTouch', 'ui.grid']);

app.controller('MainCtrl', ['$rootScope', '$scope', '$http', 'modal', '$interval', function ($rootScope, $scope, $http, modal, $interval) {
  var myModal = new modal();

  $scope.hideGrid = true;

  $rootScope.gridOptions = {
    onRegisterApi: function (gridApi) {
      $scope.gridApi = gridApi;

      // call resize every 500 ms for 5 s after modal finishes opening - usually only necessary on a bootstrap modal
      $interval( function() {
        $scope.gridApi.core.handleWindowResize();
      }, 500, 10);
      }
  };

  $http.get('http://ui-grid.info/data/100.json')
    .success(function(data) {
      $rootScope.gridOptions.data = data;
    });

  $scope.showModal = function() {
    myModal.open();
  };
}]);

app.factory('modal', ['$compile', '$rootScope', function ($compile, $rootScope) {
  return function() {
    var elm;
    var modal = {
      open: function() {

        var html = '<div class="modal" ng-style="modalStyle">{{modalStyle}}<div class="modal-dialog"><div class="modal-content"><div class="modal-header"></div><div class="modal-body"><div id="grid1" ui-grid="gridOptions" class="grid"></div></div><div class="modal-footer"><button id="buttonClose" class="btn btn-primary" ng-click="close()">Close</button></div></div></div></div>';
        elm = angular.element(html);
        angular.element(document.body).prepend(elm);

        $rootScope.close = function() {
          modal.close();
        };

        $rootScope.modalStyle = {"display": "block"};

        $compile(elm)($rootScope);
      },
      close: function() {
        if (elm) {
          elm.remove();
        }
      }
    };

    return modal;
  };
}]);

关注微信公众号,与我交流吧~

分享