easyui里弹窗的两种表现形式
1、主JSP页面中描绘弹窗
- <div id="centerDiv" data-options="region:'center',border:false">
- <table id="networkQueryGrid"
- data-options="queryForm:'#queryForm',title:'查询结果',iconCls:'pag-list'"></table>
- </div>
- <div id="restartDialog" class="easyui-dialog" title="重新启动网络" style="width: 400px; height: 180px;"
- data-options="iconCls:'pag-list',modal:true,collapsible:false,minimizable:false,maximizable:false,resizable:false,closed:true">
- <div style="margin-left: 5px;margin-right: 5px;margin-top: 5px;">
- <div class="data-tips-info">
- <div class="data-tips-tip icon-tip"></div>
- 此网络提供的所有服务都将中断。请确认您确实要重新启动此网络。
- </div>
- <table style="margin-top: 20px;margin-left:20px;margin-right:20px;vertical-align:middle;" width="80%" border="0" cellpadding="0" cellspacing="1">
- <tr>
- <td style="width:20%;text-align:right;">
- 清理:
- </td>
- <td style="text-align:left;">
- <input type="hidden" id="networkId" name="networkId"/>
- <input type="checkbox" id="cleanUp" name="cleanUp"/>
- </td>
- </tr>
- </table>
- <div style="text-align:right;margin-right:30px;">
- <a href="#" class="easyui-linkbutton" data-options="iconCls:'ope-finish'" onclick="restartNetwork()">确定</a>
- <a href="#" class="easyui-linkbutton" data-options="iconCls:'ope-cancel'" onclick="cancel()">取消</a>
- </div>
- </div>
- </div>
JS:
- function showRestartDialog(id){
- $("#networkId").val(id);
- $("#restartDialog").dialog('open');
- }
- function restartNetwork(){
- cancel();
- var checked = $("#cleanUp").prop("checked");
- invokeAjax('/network/restartNetwork','networkId=' + $("#networkId").val() + '&cleanUp='+checked,'重新启动');
- }
- function cancel(){
- $('#restartDialog').window('close');
- }
2、直接在JS里绘制弹窗(弹窗为单独页面文件)
Toobar可放置到主JSP页面:
- <div id="toolbar" style="text-align:right;">
- <a href="#" class="easyui-linkbutton" data-options="iconCls:'ope-finish'" onclick="associateIP()">获取新IP</a>
- </div>
JS:
- function showPublicIpDialog(row){
- var networkId ;
- var zoneId = row.zoneId;
- var virtualMachineId = row.id;
- if(row.nics && row.nics.length > 0){
- networkId = row.nics[0].networkId;
- }
- var ipHref = _root +'/vm/viewAllocateIP?networkId='+networkId+'&zoneId='+zoneId;
- $dialog = $('<div/>').dialog({
- title: '分配公网IP',
- width: 400,
- height: 250,
- iconCls : 'pag-search',
- closed: true,
- cache: false,
- href: ipHref,
- modal: true,
- toolbar:'#toolbar',
- onLoad:function(){
- //设置其他数据
- $("#zoneId").val(row.zoneId);
- if(row.nics && row.nics.length > 0){
- $("#networkId").val(row.nics[0].networkId);
- }
- },
- buttons : [ {
- text : '确定',
- iconCls : 'ope-save',
- handler : function() {
- var $radio = $("input[type='radio']:checked");
- var iPAddressId = $radio.val();
- if($radio.length == 0 || iPAddressId == ""){
- $.messager.alert('提示', '请选择IP','info'); return;
- }
- $.ajax({
- url: _root + "/vm/enableStaticNat",
- type: "post",
- data: {virtualMachineId:virtualMachineId,iPAddressId:iPAddressId},
- dataType: "json",
- success: function (response, textStatus, XMLHttpRequest) {
- if(response!=null && response.success){
- $.messager.alert('提示','分配公网IP成功','info',function(){
- $dialog.dialog('close');
- $obj.SuperDataGrid('reload');
- });
- }else if(response!=null&&!response.success){
- $.messager.alert('提示','分配公网IP失败','error');
- }
- }
- })
- }
- }, {
- text : '取消',
- iconCls : 'ope-close',
- handler : function() {
- $dialog.dialog('close');
- }
- } ]
- });
- $dialog.dialog('open');
- }
- function associateIP(){
- ...
- }
Controller:
- /**
- * 跳转到弹窗页面
- */
- @RequestMapping(value = "/viewAllocateIP", method = {RequestMethod.GET,RequestMethod.POST})
- public ModelAndView viewAllocateIP(@RequestParam String networkId,@RequestParam String zoneId) {
- ModelAndView model = new ModelAndView();
- model.setViewName("vm/allocateIP");
- try {
- Set<PublicIPAddress> ips = virtualMachineService.listPublicIpAddresses(networkId,zoneId);
- model.addObject("ips", ips);
- } catch(BusinessException e) {
- throw new ControllerException(HttpStatus.OK, e.getCode(), e.getMessage());
- } catch(Exception e) {
- final String msg = messageSource.getMessage(TipsConstants.QUERY_FAILURE);
- throw throwControllerException(LOGGER, HttpStatus.OK, null, msg, msg, e);
- }
- return model;
- }
allocateIP.jsp:
- <body>
- <input type="hidden" name="zoneId" id="zoneId" />
- <input type="hidden" name="networkId" id="networkId" />
- <div class="easyui-layout" data-options="fit:true" style="padding: 0px;">
- <div data-options="region:'center',border:false">
- <c:if test="${!empty ips}">
- <table class="ipTable" width="95%" border="1" borderColor="#DEDEDE" cellpadding="0" cellspacing="0">
- <c:forEach items="${ips }" var="item">
- <tr>
- <td style="width: 35px; text-align: center;"><input type="radio" value="${item.id }" name="ids" /></td>
- <td style="padding-left: 35px; font-size: 13px;">${item.IPAddress }</td>
- </tr>
- </c:forEach>
- </table>
- </c:if>
- </div>
- </div>
- </body>
easyui里弹窗的两种表现形式的更多相关文章
- [转载]EasyUI Pagination 分页的两种做法
EasyUI 的 datagrid 支持服务器端分页,但是官方的资料比较少,以下总结了两种 datagrid 的服务器端分页机制,可根据情况具体使用. 一:使用 datagrid 默认机制 后台: p ...
- EasyUI Pagination 分页的两种做法
EasyUI 的 datagrid 支持服务器端分页,但是官方的资料比较少,以下总结了两种 datagrid 的服务器端分页机制,可根据情况具体使用. 一:使用 datagrid 默认机制 后台: p ...
- Easyui 创建dialog的两种方式,以及他们带来的问题
$('#yy').dialog('open');//打开dialog 这地方要注意,加入你关闭窗口的地方使用$('#yy').dialog('destroy');那么你这个dialog就只能使用一次, ...
- EasyUI 之 DataGrid的两种赋值方法
方法一:使用ViewData赋值 首先,我们创建一个User的实体类 public class User { public string UserID; public string UserName; ...
- Flask 中蓝图的两种表现形式
最近在学Flask,特有的@X.route 很适合RESTfuld API, 一般小型应用,在一个py文件中就可以完成,但是维护起来比较麻烦. 想体验Django那样的MVT模式, 看到 Flask提 ...
- 1. easyui tree 初始化的两种方式
/** * 查询角色分类 */function queryRoleCategoryTree(selectId) { var url = basePath + 'rest/roleCategoryCon ...
- dataTable 从服务器获取数据源的两种表现形式
var table = $('#example1').DataTable({ "processing": true,//加载效果 "autoWidth": fa ...
- 图文详解两种算法:深度优先遍历(DFS)和广度优先遍历(BFS)
参考网址:图文详解两种算法:深度优先遍历(DFS)和广度优先遍历(BFS) - 51CTO.COM 深度优先遍历(Depth First Search, 简称 DFS) 与广度优先遍历(Breath ...
- Redis中持久化的两种方法详解
Redis提供了两种不同的持久化方法来将数据存储到硬盘里面.一种方法叫快照(snapshotting),它可以将存在于某一时刻的所有数据都写入硬盘里;另一种方法教只追加文件(append-only f ...
随机推荐
- python thread 多线程
thread 模块在python3中改为_thread,网上的各种帖子都说不建议新手使用thread,好吃不好吃总得尝尝看. import _thread def print_num(): for i ...
- Python 面向对象(初级篇) (转)
概述 面向过程:根据业务逻辑从上到下写垒代码 函数式:将某功能代码封装到函数中,日后便无需重复编写,仅调用函数即可 面向对象:对函数进行分类和封装,让开发"更快更好更强..." 面 ...
- Fortran学习心得
编译调试: 服务器上所用的编译器可以编译.F90的文件,同时,经过测试已经知道有两款编译器:gfortran和ifort. 另外,查看编译器的bash命令是:gfortran -v. 编程算法思想与C ...
- Visual Studio技巧之打造拥有自己标识的代码模板
可能经过很多博客的介绍,大家都知道代码段的使用,使用代码段可以很方便地生成一些常用的代码格式,确实对我们开发很方便.在团队开发中或者在某些情况下我们经常可能还会希望使用Visual Studio生成的 ...
- node版本管理器nvm(服务器项目相关)
git项目 https://github.com/creationix/nvm 1.下载并安装NVM脚本 curl https://raw.githubusercontent.com/creation ...
- linux keepalived+LVS 实现mysql 从库负载均衡
前情提要: 参考链接: http://www.osyunwei.com/archives/7464.html ps:以上为本次操作的主要参考资料,非常感谢此文作者的贡献,我的随笔的主要目的是 说明在使 ...
- c语言字符串操作大全
C语言字符串操作函数 函数名: strcpy 功 能: 拷贝一个字符串到另一个 用 法: char *stpcpy(char *destin, char *source); 程序例: #incl ...
- VS2013添加解决方案内项目的引用,编译时提示找不到文件
1.添加解决方案内项目引用 2.编译时报错 原因: 要引用的程序集的Framework版本与当前项目的版本不一致. 解决: 统一引用与被引用程序集的版本.
- php_sapi_name详解
php_sapi_name : — 返回 web 服务器和 PHP 之间的接口类型. 返回描述 PHP 所使用的接口类型(the Server API, SAPI)的小写字符串. 例如,CLI 的 P ...
- Spring AOP 完成日志记录
Spring AOP 完成日志记录 http://hotstrong.iteye.com/blog/1330046