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 学习技巧
Feb 17 Javascript
JavaScript代码简单实现求杨辉三角给定行的最大值
Oct 29 Javascript
三种取消选中单选框radio的方法
Sep 09 Javascript
JSON格式化输出
Nov 10 Javascript
JavaScript中Function()函数的使用教程
Jun 04 Javascript
JS使用cookie实现DIV提示框只显示一次的方法
Nov 05 Javascript
jQuery打字效果实现方法(附demo源码下载)
Dec 18 Javascript
基于zepto的移动端轻量级日期插件--date_picker
Mar 04 Javascript
confirm确认对话框的实现方法总结
Jun 17 Javascript
js动态获取子复选项并设计全选及提交的实现方法
Jun 24 Javascript
详解ES6之用let声明变量以及let loop机制
Jul 15 Javascript
简单聊聊TypeScript只读修饰符
Apr 06 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 Memcached应用实现代码
2010/02/08 PHP
通用PHP动态生成静态HTML网页的代码
2010/03/04 PHP
php json_encode()函数返回json数据实例代码
2014/10/10 PHP
PHP使用OB缓存实现静态化功能示例
2019/03/23 PHP
PHP7新功能总结
2019/04/14 PHP
Laravel框架集合用法实例浅析
2020/05/14 PHP
零基础学JavaScript最新动画教程+iso光盘下载
2008/01/22 Javascript
兼容ie和firefox js关闭代码
2008/12/11 Javascript
JS 非图片动态loading效果实现代码
2010/04/09 Javascript
判断多个input type=file是否有已经选择好文件的代码
2012/05/23 Javascript
JavaScript将Table导出到Excel实现思路及代码
2013/03/13 Javascript
Jquery操作Ajax方法小结
2015/11/29 Javascript
JS字符串false转boolean的方法(推荐)
2017/03/08 Javascript
JavaScript取得gridview中获取checkbox选中的值
2017/07/24 Javascript
jQuery完成表单验证的实例代码(纯代码)
2017/09/30 jQuery
解决vue中使用proxy配置不同端口和ip接口问题
2019/08/14 Javascript
JavaScript编码小技巧分享
2020/09/17 Javascript
vue.js实现点击图标放大离开时缩小的代码
2021/01/27 Vue.js
python33 urllib2使用方法细节讲解
2013/12/03 Python
Python中用于检查英文字母大写的isupper()方法
2015/05/19 Python
python 去除txt文本中的空格、数字、特定字母等方法
2018/07/24 Python
Python使用分布式锁的代码演示示例
2018/07/30 Python
python实现nao机器人手臂动作控制
2019/04/29 Python
Python reshape的用法及多个二维数组合并为三维数组的实例
2020/02/07 Python
详解Windows下PyCharm安装Numpy包及无法安装问题解决方案
2020/06/18 Python
浅谈CSS3动画的回调处理
2016/07/21 HTML / CSS
HTML5 embed 标签使用方法介绍
2013/08/13 HTML / CSS
基于html5实现的图片墙效果
2014/10/16 HTML / CSS
重写子类方法时,抛出异常的书写注意事项
2015/10/17 面试题
装饰活动策划方案
2014/02/11 职场文书
刘胡兰的英雄事迹材料
2014/02/11 职场文书
区级文明单位申报材料
2014/05/15 职场文书
本科毕业生求职信
2014/06/15 职场文书
另类冲刺标语
2014/06/24 职场文书
西安大雁塔导游词
2015/02/10 职场文书
就业证明函
2015/06/17 职场文书