layui form表单提交之后重新加载数据表格的方法
网络编程 2021-07-04 15:01www.168986.cn编程入门
今天长沙网络推广就为大家分享一篇layui form表单提交之后重新加载数据表格的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随长沙网络推广过来看看吧
如下图,在我们做高级查询的时候需要重新加载数据表格 table.reload();
HTML form表单
<p style="text-align: center"><img src="//img.jbzj./file_images/article/201909/20190911173925.jpg" alt="" /></p> <div class="layui-row"> <form class="layui-form layui-col-md12 x-so" id="zq_search"> 菜单:<input id="name" type="text" name="name" placeholder="请输入菜单" aulete="off" class="layui-input"> <button id="search" class="layui-btn" lay-submit="" lay-filter="search"><i class="layui-icon"></i></button> </form> </div>
JS
$(function () { //注意:这里是数据表格的加载数据,必须写 layui.use(['table', 'layer', 'form', 'laypage', 'laydate'], function () { var table = layui.table //表格 ,layer = layui.layer //弹层 ,form = layui.form //form表单 // .................. //监听提交 lay-filter="search" form.on('submit(search)', function(data){ var formData = data.field; var name = formData.name, url=formData.url, icon=formData.icon, parent_id=formData.parent_id; //执行重载 table.reload('tableReload', { page: { curr: 1 //重新从第 1 页开始 } , where: {//这里传参 向后台 name: name //可传多个参数到后台... ,分隔 } , url: '/menu/page'//后台做模糊搜索接口路径 , method: 'post' }); return false;//false:阻止表单跳转 true:表单跳转 }); }); });
最后如果还有不懂的可以参考layui官方文档:
以及 layui模板在线演示:
以上这篇layui form表单提交之后重新加载数据表格的方法就是长沙网络推广分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持狼蚁SEO。
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程