layui form表单提交之后重新加载数据表格的方法


Posted in Javascript onSeptember 11, 2019

如下图,在我们做高级查询的时候需要重新加载数据表格    table.reload();

layui form表单提交之后重新加载数据表格的方法

HTML form表单

<p style="text-align: center"><img src="//f.3water.com/f/6amI1aMS5ueZXQu/02484c535fea530bcaa94b75a1561122.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="请输入菜单" autocomplete="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官方文档:https://www.layui.com/doc/modules/table.html#reload

以及 layui模板在线演示: https://www.layui.com/doc/modules/table.html#reload

以上这篇layui form表单提交之后重新加载数据表格的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 类定义的4种方法
Sep 12 Javascript
jquery URL参数判断,确定菜单样式
May 31 Javascript
JavaScript在for循环中绑定事件解决事件参数不同的情况
Jan 20 Javascript
js+html5实现canvas绘制简单矩形的方法
Jun 05 Javascript
JavaScript实现使用Canvas绘制图形的基本教程
Oct 27 Javascript
详解vue.js组件化开发实践
Dec 14 Javascript
Bootstrap3下拉菜单的实现
Feb 22 Javascript
Vue实现textarea固定输入行数与添加下划线样式的思路详解
Jun 28 Javascript
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 jQuery
解决Layui 表单提交数据为空的问题
Aug 15 Javascript
Angular 多级路由实现登录页面跳转(小白教程)
Nov 19 Javascript
React冒泡和阻止冒泡的应用详解
Aug 18 Javascript
layer弹出层显示在top顶层的方法
Sep 11 #Javascript
layer.js之回调销毁对话框的例子
Sep 11 #Javascript
layer.alert回调函数执行关闭弹窗的实例
Sep 11 #Javascript
JavaScript 斐波那契数列 倒序输出 输出100以内的质数代码实例
Sep 11 #Javascript
浅谈layui框架自带分页和表格重载的接口解析问题
Sep 11 #Javascript
Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法
Sep 11 #Javascript
js中offset,client , scroll 三大元素知识点总结
Sep 11 #Javascript
You might like
德劲1104的电路分析与改良
2021/03/01 无线电
一个图形显示IP的PHP程序代码
2007/10/19 PHP
PHP中的Streams详细介绍
2014/11/12 PHP
JQuery判断HTML元素是否存在的两种解决方法
2013/12/26 Javascript
js判断横竖屏及禁止浏览器滑动条示例
2014/04/29 Javascript
JavaScript中使用Math.PI圆周率属性的方法
2015/06/14 Javascript
JS实现单击输入框弹出选择框效果完整实例
2015/12/14 Javascript
javascript实现去除HTML标签的方法
2016/12/26 Javascript
微信小程序 JS动态修改样式的实现代码
2017/02/10 Javascript
JS中解决谷歌浏览器记住密码输入框颜色改变功能
2017/02/13 Javascript
解决JS外部文件中文注释出现乱码问题
2017/07/09 Javascript
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
2018/12/11 Javascript
深入理解react 组件类型及使用场景
2019/03/07 Javascript
JS实现百度搜索框关键字推荐
2020/02/17 Javascript
解决vue cli4升级sass-loader(v8)后报错问题
2020/07/30 Javascript
jQuery实现滑动开关效果
2020/08/02 jQuery
[02:11]2016国际邀请赛中国区预选赛最美TA采访现场玩家
2016/06/28 DOTA
[00:59]DOTA2英雄背景故事——上古巨神
2020/06/28 DOTA
从Python程序中访问Java类的简单示例
2015/04/20 Python
基于wxpython实现的windows GUI程序实例
2015/05/30 Python
Python多线程原理与用法实例剖析
2019/01/22 Python
Django REST framework 单元测试实例解析
2019/11/07 Python
利用python在excel中画图的实现方法
2020/03/17 Python
HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题
2021/01/19 HTML / CSS
苹果台湾官网:Apple台湾
2019/01/05 全球购物
毕业生教师求职信
2013/10/20 职场文书
人力资源主管岗位职责
2014/01/29 职场文书
电子商务专业求职信
2014/03/08 职场文书
公休请假条
2014/04/11 职场文书
中层干部竞聘演讲稿
2014/05/15 职场文书
2014个人年终工作总结范文
2014/12/15 职场文书
2015年环境整治工作总结
2015/05/22 职场文书
关于golang高并发的实现与注意事项说明
2021/05/08 Golang
python for循环赋值问题
2021/06/03 Python
如何使用Tkinter进行窗口的管理与设置
2021/06/30 Python
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
2021/11/27 Vue.js