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中关于bind()方法的使用技巧分享
Mar 30 jQuery
jQuery.ajax向后台传递数组问题的解决方法
May 12 jQuery
jQuery常见面试题之DOM操作详析
Jul 05 jQuery
jquery.validate.js 多个相同name的处理方式
Jul 10 jQuery
jQuery列表检索功能实现代码
Jul 17 jQuery
jQuery实现简单日期格式化功能示例
Sep 19 jQuery
jquery实现倒计时小应用
Sep 19 jQuery
基于jQuery的$.getScript方法去加载javaScript文档解析
Nov 08 jQuery
jquery-file-upload 文件上传带进度条效果
Nov 21 jQuery
jQuery实现的淡入淡出图片轮播效果示例
Aug 29 jQuery
详解jQuery中的easyui
Sep 02 jQuery
jQuery三组基本动画与自定义动画操作实例总结
May 09 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
php的POSIX 函数以及进程测试的深入分析
2013/06/03 PHP
php读取文件内容的几种方法详解
2013/06/26 PHP
laravel 操作数据库常用函数的返回值方法
2019/10/11 PHP
PHP实现简易用户登录系统
2020/07/10 PHP
js中的前绑定和后绑定详解
2013/08/01 Javascript
通过length属性判断jquery对象是否存在
2013/10/18 Javascript
js中的json对象详细介绍
2014/10/29 Javascript
JavaScript函数的一些注意要点小结及js匿名函数
2015/11/10 Javascript
Jquery使用小技巧汇总
2015/12/29 Javascript
js格式化输入框内金额、银行卡号
2016/02/01 Javascript
JS实现图片的不间断连续滚动的简单实例
2016/06/03 Javascript
详解Node.js如何开发命令行工具
2016/08/14 Javascript
JavaScript实现横线提示输入验证码随输入验证码输入消失的方法
2016/09/24 Javascript
JS实现点击表头表格自动排序(含数字、字符串、日期)
2017/01/22 Javascript
微信小程序  TLS 版本必须大于等于1.2问题解决
2017/02/22 Javascript
vue自定义指令之面板拖拽的实现
2019/04/14 Javascript
js对象简介与基本用法示例
2020/03/13 Javascript
在vue中使用防抖函数组件操作
2020/07/26 Javascript
Bootstrap告警框(alert)实现弹出效果和短暂显示后上浮消失的示例代码
2020/08/27 Javascript
跟老齐学Python之通过Python连接数据库
2014/10/28 Python
简化Python的Django框架代码的一些示例
2015/04/20 Python
Windows下python2.7.8安装图文教程
2016/05/26 Python
python 第三方库的安装及pip的使用详解
2017/05/11 Python
Python按钮的响应事件详解
2019/03/04 Python
使用Django搭建web服务器的例子(最最正确的方式)
2019/08/29 Python
python中with用法讲解
2020/02/07 Python
python 字符串的驻留机制及优缺点
2020/06/19 Python
详解python logging日志传输
2020/07/01 Python
canvas之万花筒效果的简单实现(推荐)
2016/08/16 HTML / CSS
英国领先的珍珠首饰品牌:Orchira
2016/09/11 全球购物
美国乡村商店:Plow & Hearth
2016/09/12 全球购物
P D PAOLA意大利官网:西班牙著名的珠宝首饰品牌
2019/09/24 全球购物
技校生自我鉴定范文
2013/09/26 职场文书
公务员试用期满考核材料
2014/05/22 职场文书
Python+Selenium实现读取网易邮箱验证码
2022/03/13 Python
5人制售《绝地求生》游戏外挂获利500多万元 被判刑
2022/03/31 其他游戏