文档章节

easyUI使用dailog实现弹出框带表单功能

o
 osc_n6euf5h6
发布于 2019/03/19 20:55
字数 383
阅读 13
收藏 0

本文为博主原创,未经允许不得转载:

示例如下:

需要注意的地方在id为win的div中需要有:closed="true"这个属性,这个属性为控制dailogn对话框显示与隐藏的属性。

 1 <html>
 2 <head>
 3     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 4     <title>jQuery EasyUI</title>
 5     <link rel="stylesheet" type="text/css" href="easyui.css">
 6     <link rel="stylesheet" type="text/css" href="icon.css">
 7     <script type="text/javascript" src="jquery.min.js"></script>
 8     <script type="text/javascript" src="jquery.easyui.min.js"></script>
 9     <script type="text/javascript" src="datagrid-detailview.js"></script>
10 </head>
11 <body>
12 
13     <a id="name_add_but" href="#" data-options="iconCls:'icon-add'" class="my_but"
14                    style="vertical-align: middle;">新增</a>
15 
16     <div id="win" class="easyui-dialog" title="提示"  style="width: 400px; padding: 10px 20px; height: 410px;"
17         closed="true" buttons="#dlg-buttons">                             
18         <form id="fm" name="frm" method="post" style="margin-top: 20px; margin-left: 20px;">
19             <div class="fitem">
20                 <label>文件名称:</label>
21                 <textarea id="input1"  name="fileName" data-options="multiline:true" style="width: 260px;height:90px;"></textarea>
22             </div>
23             <div id="dlg-buttons" style="display: block">
24                 <a id="confirm" href="javascript:void(0)" class="easyui-linkbutton c6" iconcls="icon-ok" onclick="submitForm()" style="width: 90px">提交</a>
25                 <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-cancel" onclick="javascript:$('#win').dialog('close')" style="width: 90px">取消</a>
26             </div>
27         </form>
28     </div>
29 <script>
30     $('#name_add_but').linkbutton({
31         onClick: function () {
32             addFile();
33         }
34     });
35      $('#input1').textbox({
36         prompt: "请输入文件名称,多个文件请换行输入",
37     });
38     function addFile(){
39         $('#win').dialog({
40                 title: '新增',
41                 width: 450,
42                 height: 240,
43                 top:150,
44                 closed: false,//显示对话框
45                 cache: false,
46                 modal: true
47             });    
48     }
49     function submitForm(){
50         $('#win').dialog({
51             closed: true, // 隱藏列表 
52         });
53         alert("添加成功");
54     }
55 </script>
56 </body>

实现效果:

点击提交按钮出现:

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

树莓派4b + Ubuntu20.04 Server 安装Java8

安装环境: 树莓派4b + Ubuntu20.04 Server 32位 1. 下载jdk https://www.oracle.com/java/technologies/javase/javase-jdk8-downloads.html 2. 解压 tar -zxvf jdk-8u251-linux-arm32-vf......

SummerGao
11分钟前
9
0
项目实战:Qt+OpenCV图像处理与识别算法平台

若该文为原创文章,未经允许不得转载 原博主博客地址:https://blog.csdn.net/qq21497936 原博主博客导航:https://blog.csdn.net/qq21497936/article/details/102478062 本文章博客地址:h...

红模仿_红胖子
14分钟前
7
0
北京智源大会 | AI + 医疗的下一个十年:从公共卫生预警到人类基因密码破解 道翰天琼认知智能api机器人接口。

医疗事关人身安全,要求极高,容错率极低,因此,知识壁垒和技术壁垒都很高。过去,AI系统更多的是服务于终端,辅助医生诊断、决策。但是,医疗很复杂,直接切入终端问题很多。未来十年,AI+...

jackli2020
18分钟前
11
0
源于HystrixCommandStartStream和RollingCommandMaxConcurrencyStream 的 RxJava demo

其实,最近在工作之余看Hystrix源代码已经有一个多月了, 除了对 HystrixCommandProperties ,HystrixCommand 和AbstractCommand 几个类比较了解以外,其余看山不是山,比较懵, 主要是因为H...

专业写BUG的程序员
21分钟前
16
0
聊聊Java中的异常及处理

前言 在编程中异常报错是不可避免的。特别是在学习某个语言初期,看到异常报错就抓耳挠腮,常常开玩笑说编程1分钟,改bug1小时。今天就让我们来看看什么是异常和怎么合理的处理异常吧! 异常...

良许Linux
24分钟前
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部