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 相关文章推荐
jQueryUI Sortable 应用Demo(分享)
Sep 07 jQuery
jQuery 开发之EasyUI 添加数据的实例
Sep 26 jQuery
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
Dec 24 jQuery
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 jQuery
jQuery发请求传输中文参数乱码问题的解决方案
May 22 jQuery
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 jQuery
jQuery-ui插件sortable实现自由拖动排序
Dec 01 jQuery
JQuery的加载和选择器用法简单示例
May 13 jQuery
jQuery创建折叠式菜单
Jun 15 jQuery
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
Oct 10 jQuery
jQuery实现弹出层效果
Dec 10 jQuery
jQuery使用ajax传递json对象到服务端及contentType的用法示例
Mar 12 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 购物车实例(申精)
2009/05/11 PHP
初学PHP的朋友 经常问的一些问题。不断更新
2011/08/11 PHP
解析php中两种缩放图片的函数,为图片添加水印
2013/06/14 PHP
PHP获取指定时间段之间的 年,月,天,时,分,秒
2016/06/05 PHP
php 的反射详解及示例代码
2016/08/25 PHP
PHP判断一个变量是否为整数、正整数的方法示例
2019/09/11 PHP
Laravel 数据库加密及数据库表前缀配置方法
2019/10/10 PHP
Jquery 表格合并的问题分享
2011/09/17 Javascript
jQuery动画效果-fadeIn fadeOut淡入浅出示例代码
2013/08/28 Javascript
JS数组(Array)处理函数整理
2014/12/07 Javascript
JS实现的页面自定义滚动条效果
2015/10/26 Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
2016/05/13 Javascript
Angularjs中数据绑定的实例详解
2017/08/25 Javascript
vue使用iframe嵌入网页的示例代码
2020/06/09 Javascript
基于vue2.0的活动倒计时组件countdown(附源码下载)
2018/10/09 Javascript
利用hasOwnProperty给数组去重的面试题分享
2018/11/05 Javascript
JavaScript惰性求值的一种实现方法示例
2019/01/11 Javascript
vue路由插件之vue-route
2019/06/13 Javascript
layui的表单验证支持ajax判断用户名是否重复的实例
2019/09/06 Javascript
微信小程序实现下滑到底部自动翻页功能
2020/03/07 Javascript
深入了解Vue.js 混入(mixins)
2020/07/23 Javascript
vue实现给div绑定keyup的enter事件
2020/07/31 Javascript
Vue绑定用户接口实现代码示例
2020/11/04 Javascript
[03:18]DOTA2亚洲邀请赛小组赛第一日 RECAP赛事回顾
2015/01/30 DOTA
[00:58]2016年国际邀请赛勇士令状宣传片
2016/06/01 DOTA
python保存字符串到文件的方法
2015/07/01 Python
python检查URL是否正常访问的小技巧
2017/02/25 Python
Python数据分析库pandas基本操作方法
2018/04/08 Python
利用Python将数值型特征进行离散化操作的方法
2018/11/06 Python
使用jupyter notebook直接打开.md格式的文件
2020/04/10 Python
英国口碑最好的的维他命胶囊品牌:Myvitamins(有中文站)
2016/12/03 全球购物
为什么需要版本控制
2016/10/28 面试题
英语专业个人求职自荐信
2013/09/21 职场文书
计算机应用专业学生的自我评价分享
2013/11/03 职场文书
我爱家乡演讲稿
2014/09/12 职场文书
Spring Cloud Gateway去掉url前缀
2021/07/15 Java/Android