【效果】按钮采用弹出对话框形式,如:
【处理逻辑】html显式按钮提交→ajax功能处理→通过函数获取输入框→ajax接受数据→打开html隐式对话框。(注:列表页面传送了默认的输入框格式,如果不需要新的输入框则省去3、4步)
7.1增加数据
1.按钮:
2.隐式对话框:
3.ajax弹出隐式对话框:
4.效果图:
5.保存数据,方法类似上节的ajax增加数据功能。
7.2删除数据
【逻辑】相当于没有输入框的增加对话框,但要给每条数据的删除按钮传输id。函数根据id删除数据。
1.设置全局变量,获取当前行的id:
2.在确认时,将id通过data传给函数处理(也可通过URL,将字符串拼接即可):
3.ajax获取函数传来的数据
4.效果图
7.3编辑数据
【逻辑】编辑数据与增加数据类似,都是弹出输入框,然后保存。但有两点不同:①弹出的输入框默认写好了原值;②保存时是修改,而不增加。
【注】:两者的弹出框可采用同一个隐式对话框,也可分开两个。
1.解决输入框显示原值:ajax向函数传递当前行id,函数查询后返还给ajax,ajax显示出来。
2.修改问题:创造一个全局变量edit_id,只在编辑框弹出时写入当前行id,增加框无。在保存按钮的ajax功能中加一个if语句,判断是实行增加功能还是编辑功能:
【注】错误信息、全局变量、输入框数据等注意要在开头进行清空,否则可能会滞留在系统中,影响下次操作。