菜单

模态框中的表格实例代码_jquery_脚本之家

2020年3月19日 - www.2138.com

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

在一些情形下,特别是 bootstrap
modal,大概会冒出表格渲染宽渡过小或不时展现不完全。会误感觉是由于
bootstrap modal
的动漫片渲染招致表格渲染时的可用空间不比预期。能够经过调用handleWindowResize来改过。动漫渲染的年华倒霉分明,所以日常推荐应用$interval,在模态框展开后的5秒内每间距500ms循环调用。

从某种意义上说,那好像于机关调节大小的功力,但它只在模态框开启后的长时间内到位。

              Show Modal  

.grid { width: 300px; height: 250px;}

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  { $scope.gridApi = gridApi; // call resize every 500 ms for 5 s after modal finishes opening - usually only necessary on a bootstrap modal $interval { $scope.gridApi.core.handleWindowResize; } }; $http.get .success { $rootScope.gridOptions.data = data; }); $scope.showModal = function; };}]);app.factory('modal', ['$compile', '$rootScope', function  { return function() { var elm; var modal = { open: function() { var html = '{{modalStyle}}Close'; elm = angular.element; angular.element.prepend; $rootScope.close = function; }; $rootScope.modalStyle = {"display": "block"}; $compile; }, close: function { elm.remove(); } } }; return modal; };}]);

上述所述是小编给我们介绍的jQuery UI Grid
模态框中的表格,希望对大家全体助于,假如大家有任何疑问请给自个儿留言,作者会及时复苏大家的。在那也特别谢谢大家对台本之家网站的支撑!

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图