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 打印页面代码
Mar 24 Javascript
js弹出层(jQuery插件形式附带reLoad功能)
Apr 12 Javascript
js实现无缝滚动特效
Dec 20 Javascript
JavaScript通过使用onerror设置默认图像显示代替alt
Mar 01 Javascript
jQuery学习心得总结(必看篇)
Jun 10 Javascript
基于JavaScript实现自动更新倒计时效果
Dec 19 Javascript
Angular使用 ng-img-max 调整浏览器中的图片的示例代码
Aug 17 Javascript
Angular4的输入属性与输出属性实例详解
Nov 29 Javascript
JS+HTML5 Canvas实现简单的写字板功能示例
Aug 30 Javascript
node实现分片下载的示例代码
Oct 17 Javascript
微信小程序如何实现精确的日期时间选择器
Jan 21 Javascript
JavaScript实现横版菜单栏
Mar 17 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
PHP学习之字符串比较和查找
2011/04/17 PHP
php旋转图片90度的方法
2013/11/07 PHP
实例简介PHP的一些高级面向对象编程的特性
2015/11/27 PHP
php基于数组函数实现关联表的编辑操作示例
2017/07/04 PHP
jquery 操作DOM的基本用法分享
2012/04/05 Javascript
jquery利用ajax调用后台方法实例
2013/08/23 Javascript
JavaScript类继承及实例化的方法
2015/07/25 Javascript
AngularJs中route的使用方法和配置
2016/02/04 Javascript
全面解析Bootstrap中nav、collapse的使用方法
2016/05/22 Javascript
JS获取随机数和时间转换的简单实例
2016/07/10 Javascript
关于javascript中限定时间内防止按钮重复点击的思路详解
2016/08/16 Javascript
浅谈jQuery添加的HTML,JS失效的问题
2016/10/05 Javascript
将 vue 生成的 js 上传到七牛的实例
2017/07/28 Javascript
前端常见跨域解决方案(全)
2017/09/19 Javascript
swiper 解决动态加载数据滑动失效的问题
2018/02/26 Javascript
微信小程序 函数防抖 解决重复点击消耗性能问题实现代码
2019/09/12 Javascript
跟老齐学Python之有容乃大的list(4)
2014/09/28 Python
Python实现截屏的函数
2015/07/26 Python
Python使用numpy产生正态分布随机数的向量或矩阵操作示例
2018/08/22 Python
Python3操作Excel文件(读写)的简单实例
2019/09/02 Python
Python 面向对象部分知识点小结
2020/03/09 Python
Python使用pdb调试代码的技巧
2020/05/03 Python
Python2.6版本pip安装步骤解析
2020/08/17 Python
详解python方法之绑定方法与非绑定方法
2020/08/17 Python
10个python爬虫入门基础代码实例 + 1个简单的python爬虫完整实例
2020/12/16 Python
澳大利亚最好的厨具店:Kitchen Warehouse
2018/03/13 全球购物
英国女性时尚精品店:THE DRESSING ROOM
2018/05/23 全球购物
马来西亚和新加坡巴士票在线预订:CatchThatBus
2018/11/17 全球购物
美国亚马逊旗下男装网站:East Dane(支持中文)
2019/09/25 全球购物
Scotch Porter官方网站:男士美容产品
2020/08/31 全球购物
职业生涯规划书的格式
2013/12/29 职场文书
学前教育学生自荐信范文
2013/12/31 职场文书
创业计划书的内容步骤和要领
2014/01/04 职场文书
工会工作先进事迹
2014/08/18 职场文书
寒假安全保证书
2015/02/28 职场文书
go语言使用Casbin实现角色的权限控制
2021/06/26 Golang