在弹出的模态框中使用表格。
在某些情况下,特别是引导模式,可能会出现表格渲染宽度过小或有时显示不完全。会误认为是由于引导模态的动画渲染导致表格渲染时的可用空间不如预期。可以通过调用handleWindowResize来纠正。动画渲染的时间不好确定,所以一般推荐使用美元区间,在模态框打开后的5秒内每隔500毫秒循环调用。
从某种意义上说,这类似于自动调整大小的功能,但它只在模态框开启后的短时间内完成。
代码:
index . html
& lt; !doctype html>
& lt; html ng-app=在“应用程序”;
& lt; head>
& lt;脚本src=" http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js "祝辞& lt;/script>
& lt;脚本src=" http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js "祝辞& lt;/script>
& lt;脚本src=" http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js "祝辞& lt;/script>
& lt;脚本src=" http://ui-grid.info/docs/grunt-scripts/csv.js "祝辞& lt;/script>
& lt;脚本src=" http://ui-grid.info/docs/grunt-scripts/pdfmake.js "祝辞& lt;/script>
& lt;脚本src=" http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js "祝辞& lt;/script>
& lt;脚本src=" https://www.yisu.com/release/ui-grid.js "祝辞& lt;/script>
& lt;脚本src=" https://www.yisu.com/release/ui-grid.css "祝辞& lt;/script>
& lt;脚本src=" https://www.yisu.com/zixun/app.js "祝辞& lt;/script>
& lt;/head>
& lt; body>
& lt; div ng-controller=癕ainCtrl”比;
& lt;按钮id=皊howButton”类=癰tn btn-success ng-click”=皊howModal()在显示Modal
& lt;/div>
& lt;/body>
& lt;/html>
mian.css
.grid {
宽度:300 px;
身高:250 px;
}
app.js
应用var=角。模块(“应用程序”,[' ngTouch ', ' ui.grid ']);
app.controller (“MainCtrl”, [rootScope美元,美元的范围,“http美元”,“模态”,“美元区间”,函数(rootScope美元,美元范围、http、模态,间隔美元){
var myModal=新模态();
美元的范围。hideGrid=true;
rootScope美元。gridOptions={
ng→{{modalStyle}} & lt; div类=澳Ｌ曰翱颉弊４? lt; div class=蹦Ｊ侥谌荨白４? lt; div类=癿odal-header祝辞& lt;/div> & lt; div类=癿odal-body祝辞& lt; div id=癵rid1 ui-grid=癵ridOptions”类=巴瘛弊４? lt;/div> & lt;/div> & lt; div类=癿odal-footer祝辞& lt;按钮id=癰uttonClose”类=癰tn btn-primary ng-click”=?)”祝辞Close & lt;/div> & lt;/div> & lt;/div> & lt;/div>;
榆树=angular.element (html);
angular.element (document.body) .prepend (elm);
rootScope美元。近=function () {
modal.close ();
};
rootScope美元。modalStyle={“显示”:“块”};
(编译(elm)美元rootScope);
}，
关闭:函数(){
如果(elm) {
elm.remove ();
}
}
};
返回模态;
};
}));
演示
以上所述是小编给大家介绍的jQuery UI网格模态框中的表格,希望对大家有所帮助,如果大家有任何疑问请给我留的言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
