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 相关文章推荐
js不能获取隐藏的div的宽度只能先显示后获取
Sep 04 Javascript
js基于面向对象实现网页TAB选项卡菜单效果代码
Sep 09 Javascript
jquery Deferred 快速解决异步回调的问题
Apr 05 Javascript
JS实现获取剪贴板内容的方法
Jun 21 Javascript
Js得到radiobuttonlist选中值的两种方法(推荐)
Aug 25 Javascript
D3.js实现饼状图的方法详解
Sep 21 Javascript
axios基本入门用法教程
Mar 25 Javascript
详解AngularJs路由之Ui-router-resolve(预加载)
Jun 13 Javascript
Three.js实现简单3D房间布局
Dec 30 Javascript
JavaScript canvas实现流星特效
May 20 Javascript
解析原生JS getComputedStyle
May 25 Javascript
JS开发前端团队展示控制器来为成员引流
Aug 14 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
uploadify在Firefox下丢失session问题的解决方法
2013/08/07 Javascript
javascript实现控制div颜色
2015/07/07 Javascript
利用Angularjs和原生JS分别实现动态效果的输入框
2016/09/01 Javascript
jsp 网站引入外部css或者js失效问题解决
2016/10/31 Javascript
js操作浏览器的参数方法
2017/01/21 Javascript
JS获取本周周一,周末及获取任意时间的周一周末功能示例
2017/02/09 Javascript
详解JS异步加载的三种方式
2017/03/07 Javascript
通过源码分析Vue的双向数据绑定详解
2017/09/24 Javascript
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
2017/11/09 jQuery
webpack学习教程之前端性能优化总结
2017/12/05 Javascript
Node中使用ES6语法的基础教程
2018/01/05 Javascript
VUE + UEditor 单图片跨域上传功能的实现方法
2018/02/08 Javascript
webpack项目调试以及独立打包配置文件的方法
2018/02/28 Javascript
node.js 模块和其下载资源的镜像设置的方法
2018/09/06 Javascript
搭建一个Koa后端项目脚手架的方法步骤
2019/05/30 Javascript
vue2.0项目集成Cesium的实现方法
2019/07/30 Javascript
vue-cli history模式实现tomcat部署报404的解决方式
2019/09/06 Javascript
p5.js临摹旋转爱心
2019/10/23 Javascript
js页面加载后执行的几种方式小结
2020/01/30 Javascript
js重写alert事件(避免alert弹框标题出现网址)
2020/12/04 Javascript
Python实现获取某天是某个月中的第几周
2015/02/11 Python
pyqt5让图片自适应QLabel大小上以及移除已显示的图片方法
2019/06/21 Python
解决Python3 控制台输出InsecureRequestWarning问题
2019/07/15 Python
pycharm修改file type方式
2019/11/19 Python
PyQt5中多线程模块QThread使用方法的实现
2020/01/31 Python
使用Python matplotlib作图时,设置横纵坐标轴数值以百分比(%)显示
2020/05/16 Python
matplotlib绘制正余弦曲线图的实现
2021/02/22 Python
Pyside2中嵌入Matplotlib的绘图的实现
2021/02/22 Python
Tarte Cosmetics官网:美国最受欢迎的化妆品公司之一
2017/08/24 全球购物
公司节能减排方案
2014/05/16 职场文书
我爱我校演讲稿
2014/05/21 职场文书
公司催款律师函
2015/05/27 职场文书
HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单易上手
2021/05/10 HTML / CSS
低版本Druid连接池+MySQL驱动8.0导致线程阻塞、性能受限
2021/07/01 MySQL
MySQL之select、distinct、limit的使用
2021/11/11 MySQL
Python实现位图分割的效果
2021/11/20 Python