jQuery UI Grid 模态框中的表格实例代码


Posted in jQuery onApril 01, 2017

在弹出的模态框中使用表格。

在某些情况下,特别是 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="/release/ui-grid.js"></script>
 <script src="/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>

mian.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('/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;
 };
}]);

Demo

jQuery UI Grid 模态框中的表格实例代码

以上所述是小编给大家介绍的jQuery UI Grid 模态框中的表格,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jQuery自定义元素右键点击事件(实现案例)
Apr 28 jQuery
jQuery实现简单的抽奖游戏
May 05 jQuery
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 jQuery
jQuery实现的简单无刷新评论功能示例
Nov 08 jQuery
jQuery图片查看插件Magnify开发详解
Dec 25 jQuery
详解jQuery中的getAll()和cleanData()
Apr 15 jQuery
jquery+php后台实现省市区联动功能示例
May 23 jQuery
javascript异步处理与Jquery deferred对象用法总结
Jun 04 jQuery
jquery实现点击弹出对话框
Feb 08 jQuery
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
May 19 jQuery
JQuery实现折叠式菜单的详细代码
Jun 03 jQuery
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 jQuery
jQuery源码解读之extend()与工具方法、实例方法详解
Mar 30 #jQuery
jQuery实现Select下拉列表进行状态选择功能
Mar 30 #jQuery
基于jquery实现二级联动效果
Mar 30 #jQuery
jquery中关于bind()方法的使用技巧分享
Mar 30 #jQuery
如何编写jquery插件
Mar 29 #jQuery
jQuery日程管理控件glDatePicker用法详解
Mar 29 #jQuery
jQuery实现简单漂亮的Nav导航菜单效果
Mar 29 #jQuery
You might like
定制404错误页面,并发信给管理员的程序
2006/10/09 PHP
linux下为php添加curl扩展的方法
2011/07/29 PHP
深入HTTP响应状态码速查表的详解
2013/06/07 PHP
php生成固定长度纯数字编码的方法
2015/07/09 PHP
php的闭包(Closure)匿名函数初探
2016/02/14 PHP
PHP Filter过滤器全面解析
2016/08/09 PHP
PHP框架laravel的.env文件配置教程
2017/06/07 PHP
一步一步教你写一个jQuery的插件教程(Plugin)
2009/09/03 Javascript
js escape,unescape解决中文乱码问题的方法
2010/05/26 Javascript
P3P Header解决Cookie跨域的问题
2013/03/12 Javascript
JS实现多物体缓冲运动实例代码
2013/11/29 Javascript
NodeJs中的VM模块详解
2015/05/06 NodeJs
谈谈js中的prototype及prototype属性解释和常用方法
2015/11/25 Javascript
详解JS中的立即执行函数
2017/02/24 Javascript
纯JS实现弹性导航条效果
2017/03/06 Javascript
react在安卓中输入框被手机键盘遮挡问题的解决方法
2018/09/03 Javascript
JavaScript中的惰性载入函数及优势
2020/02/18 Javascript
Python的设计模式编程入门指南
2015/04/02 Python
使用Keras训练好的.h5模型来测试一个实例
2020/07/06 Python
Django中Aggregation聚合的基本使用方法
2020/07/09 Python
基于Python爬取51cto博客页面信息过程解析
2020/08/25 Python
CSS3实现彩色进度条动画的示例
2020/10/29 HTML / CSS
重新定义牛仔布,100美元以下:Warp + Weft
2018/07/25 全球购物
性能服装:HYLETE
2018/08/14 全球购物
意大利一家专营包包和配饰的网上商店:Borse Last Minute
2019/08/26 全球购物
实习生单位鉴定意见
2013/12/04 职场文书
宿舍卫生检讨书
2014/01/16 职场文书
适用于所有创业者的创业计划书
2014/02/05 职场文书
《乡愁》教学反思
2014/02/18 职场文书
教育基金募捐倡议书
2014/05/14 职场文书
先进集体事迹材料范文
2014/12/25 职场文书
十八大观后感
2015/06/12 职场文书
导游词之绍兴柯岩古镇
2020/01/09 职场文书
Django中session进行权限管理的使用
2021/07/09 Python
SQL Server中锁的用法
2022/05/20 SQL Server
MySQL数据库之内置函数和自定义函数 function
2022/06/16 MySQL