新增修改共用一个From表单的提交方法

使用这个方法首先要调用jquery的一个from表单的提交插件这个插件可以去jquery的官网上下载,名字如下截图。
在这里插入图片描述
首先找到要提交的Form表单,然后使用action这个方法,然后用post来提交这个方法。
action=“路径”,method=“提交方法”,这里我用的是post这个方法,但除了这个方法还有很多其他如get方法。看自己需要什么方法就去调用就可以了。

在这里插入图片描述
接下来这个路径就要去处理了,之需要在掉用的function里面加上from表单的路径即可。
这里有两种弹出模态框一个新增一个修改,但提交的form表单都是一个form表单只是设置的路径不一样而已,这里可以看到新增模态框里面的#formEmployee这个form表单的调用路径设置,porp这个方法然后prop(a,b)里面a为设置路径的方法,b为设置的路径。
之后可以看到修改模态框里面的路径与新增的路径是不一样的。这样就可以达成一个form表单提交新增与修改了。
在这里插入图片描述
写完了提交的路径接下来就开始保存了,接下来用ajaxSubmit这个方法来提交表单,这个方法可以把表单的内容给提交到控制器里面去。用ajkx这个方法提交表单就不需要再去声明变量来接收表单数据,我这里声明变量接收数据主要是给他加判断,判断这些数据是否为空。
在这里插入图片描述
这里我断点看一下提交表单是否新增与修改一起提交,我这里再控制里面修改与新增的方法里面都断一个点来看看。这里我先的点开修改模态框然后点击保存。然后去控制器里面看一下调用了哪个方法。
在这里插入图片描述
这里可以看到修改模态框这里调用的是修改的方法没有跳进新增的方法里面去
这样子一个form表单的两种保存方法就可以看的出来保存新增与修改并不会冲突。
在这里插入图片描述

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
layUI表格的新增修改功能可以通过弹出层来实现。具体步骤如下: 1. 在layUI表格中添加操作列,包含“编辑”和“删除”按钮等; 2. 给“编辑”按钮绑定事件,点击后弹出一个弹出层,用于填写数据; 3. 在弹出层中添加表单,包含需要填写的数据项; 4. 给表单中的“确定”按钮绑定事件,点击后将数据提交到后台并更新表格数据; 5. 给“删除”按钮绑定事件,点击后弹出确认框,确认后将数据删除并更新表格数据。 示例代码如下: HTML代码: ```html <table class="layui-table" lay-data="{url:'/api/data', page:true, limit:10}" lay-filter="demo"> <thead> <tr> <th lay-data="{field:'id', width:80}">ID</th> <th lay-data="{field:'name', width:120}">名称</th> <th lay-data="{field:'type', width:80}">类型</th> <th lay-data="{field:'remark', width:200}">备注</th> <th lay-data="{field:'operate', toolbar:'#operateTpl', width:150}">操作</th> </tr> </thead> </table> <!--操作列模板--> <script type="text/html" id="operateTpl"> <button class="layui-btn layui-btn-xs" lay-event="edit">编辑</button> <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</button> </script> <!--弹窗模板--> <div id="formTpl" style="display:none;"> <form class="layui-form" action=""> <div class="layui-form-item"> <label class="layui-form-label">名称</label> <div class="layui-input-block"> <input type="text" name="name" lay-verify="required" placeholder="请输入名称" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">类型</label> <div class="layui-input-block"> <input type="text" name="type" lay-verify="required" placeholder="请输入类型" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item layui-form-text"> <label class="layui-form-label">备注</label> <div class="layui-input-block"> <textarea name="remark" placeholder="请输入备注" class="layui-textarea"></textarea> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit lay-filter="submitForm">确定</button> </div> </div> </form> </div> ``` JavaScript代码: ```javascript //执行渲染 layui.use(['table', 'layer', 'form'], function(){ var table = layui.table, layer = layui.layer, form = layui.form; //监听表格操作列按钮点击事件 table.on('tool(demo)', function(obj){ var data = obj.data; if(obj.event === 'edit'){ //编辑 //弹出编辑弹窗 var index = layer.open({ type: 1, title: '编辑', area: ['500px', '400px'], content: $('#formTpl').html(), success: function(layero, index){ //填充弹窗表单数据 form.val('form', data); } }); //监听弹窗表单提交事件 form.on('submit(submitForm)', function(formData){ //提交表单数据到后台 $.ajax({ url: '/api/update', type: 'POST', data: formData.field, success: function(){ layer.close(index); table.reload('demo'); } }); return false; }); } else if(obj.event === 'delete'){ //删除 layer.confirm('确认删除该数据吗?', function(index){ //提交删除请求到后台 $.ajax({ url: '/api/delete', type: 'POST', data: {id: data.id}, success: function(){ layer.close(index); table.reload('demo'); } }); }); } }); }); ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值