如何做一个页面弹窗,然后输入明细数据,保存后数据更新到主页面?

如题所述

弹出窗口可分为打开一个新的浏览器窗口和在本页面上打开一个弹出层,打开新的浏览器窗口现在一般用的比较少,交互性和用户体验相对较差。这里我重点说一下弹出层方式:
弹出层设置一般有两种方式:
1、是自己写隐藏div,在需要打开弹出层的时候可以显示div;完成后可以隐藏div ;
2、使用现有的一些控件,比如easyui的dialog组建、artDialog组件等,现在类似的组建比较多也使用起来也相对比较方便;

在弹出窗口中做明细数据的录入、保存和更新到主页面实现思路大概如下:
1、在主页面点击按钮打开弹出层,弹出层中有录入明细信息的表单
2、在明细表单中录入信息后,点击表单中的按钮,将信息发送到服务器端,由服务器端进行入库(表单的提交可以是form提交和ajax方式提交 )
3、form表单提交可以设置target="_self",提交成功后刷新本页面,主页面会查询出新增的明细数据
4、ajax方式提交,当数据提交成功(即获得服务返回成功标识 )后,可以将新增的明细数据通过js动态添加到主页面上,然后关闭弹出层,这种方式的用户体验要好很多。
温馨提示:内容为网友见解,仅供参考
第1个回答  2016-01-19
可以使用js 的弹出模式窗口。
window.showModalDialog(URL, null,
"dialogWidth:330px;dialogHeight:auto;status:no;help:no;resizable:yes;");

这个方法,弹出,
你可以百度一下 ,js弹出模式窗口
如果你不喜欢这样的窗口
你也可以在这个页面写一个浮动的div框,这个框默认隐藏,然后点击的时候执行js,js方法里面控制这个浮动的div框显示,
这样就实现了。

如何做一个页面弹窗,然后输入明细数据,保存后数据更新到主页面?
1、在主页面点击按钮打开弹出层,弹出层中有录入明细信息的表单 2、在明细表单中录入信息后,点击表单中的按钮,将信息发送到服务器端,由服务器端进行入库(表单的提交可以是form提交和ajax方式提交 )3、form表单提交可以设置target="_self",提交成功后刷新本页面,主页面会查询出新增的明细数据 4、a...

将信息显示在原页面进行修改
说说第一种情况,可以在页面1上做pop弹窗,提交的时候弹出页面2在一个POP中,点击弹窗上的数据然后修改提交,将要传回的值,保存在post参数中,传给页面1,并刷新页面1,刷新的时候POP就被关闭了。这样页面1的结果就显示出来了。这样实现的话用户体验比较好。不用跳转页面,只有一个刷新操作。

如何在html网页上点击按钮弹出登陆页面!(登陆窗口里面的代码如何与数...
1、确认无误后,打开python编辑器pycharm,然后新建一个文件,叫做tkinter_t.py。2、内容编辑完毕,确认无误后,点击pycharm编辑器最上方的run选项卡。然后再点击下方的run选项。3、然后会弹出一个窗口,让你选择需要运行的python文件,选择刚才创建的tkinter_t.py,然后就会开始执行。弹出我们的测试窗口。

erp怎么回到保存数据那
1. 在ERP系统中,首先找到当前正在编辑或输入的数据页面。2. 在页面上,查找保存或提交按钮,通常会以“保存”、“确认”或类似的词语表示。3. 单击保存按钮,系统会验证输入的数据是否符合规定的格式和要求。如果数据有错误或不完整,系统会提醒用户进行修正。4. 如果数据输入正确并完整,系统会将数据...

页面数据输入输出自查
第二种是可以进行拆分输入,例如输入内容比较长时,可以多段进行输入,常见银行卡号4位4位进行输入。第三种是输入限制,一般直接文案提示,输入提示可以在框中直接提示,或者弹出toast提示,或者重要的可以直接弹窗提示,还有可以在输入框下面进行提示,按照重要性进行区分。二、输入时 :1、光标跟随,告知...

如何撤回excel保存后又自动恢复的数据呢?
1、进入Excel,然后点击左上角的文件选项 2、在左边的弹窗中找到最下面的选项按钮,点击“选项”。3、点击后出现excel选项页面,此时点击保存按钮,将保存自动复信息时间间隔设置为1分钟。4、然后在界面内修改源文件中的内容,修改完成后等待一分多钟可以恢复以前的文档。5、找到excel选项页面保存按钮中的...

在JSP中,当添加信息成功后跳转回主页面并弹出操作成功提示框_百度知 ...
这样:< if((String)request.getAttribute("info")=="success"){%> alert("添加活动成功!"); <%}%>

...Excel中输入条码后可以弹出相对应的产品,如何输入公式?
你需要弹窗么? 需要弹窗提示的那种的话就要用VBA 来做的

如何在关闭弹出窗体时更新第一窗体的数据
我是设计思路是这样的,选中datagridview中要修改的行,点击按钮“修改”,弹出第二个窗体,修改后点击修改,关闭第二个窗体,在窗体关闭时刷新第一个窗体datagridview中的数据,这样刚才修改的那条数据就不再出现在错误列表中了。我在第一窗体中写了刷新datagridview中的数据的方法,代码如下:public void...

在线编辑表格功能:在线就能修改数据,增减行列
操作流程简便:登录后,点击查询管理-数据,进入在线编辑页面。修改信息时,只需双击单元格,输入新内容,点击保存按钮即可。右侧搜索框支持快速定位,用户可选择具体列进行搜索。数据修复是关键功能,尤其针对上传的电子表格可能存在隐藏空格、特殊字符等问题。使用修复数据功能后,能有效解决查询条件不正确的...

相似回答