请选择 进入手机版 | 继续访问电脑版
 找回密码
 免费注册
搜索

layUI Form表单重置问题

0
回复
133
查看
[复制链接]

44

主题

45

帖子

328

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
328
2020-6-9 09:20:46 显示全部楼层 |阅读模式
layUI Form表单重置问题
layUI表单有两种方法,第一种是直接使用FORM标签,另一种是利用div作为容器,将其class设置成layui-form,这两种方法都可以使用layUI Form,但是在重置时会出现不同。

但是当在:
使用LayUI的后台模板时,其原始使用的是div作为form的容器,因此无法使用reset,
将其改为FORM之后虽然能够使用reset,但是在reset之后会自动刷新整个页面,特别对于页面查询出来的数据表格,reset之后会重新请求数据,因此数据表格的内容也会随之改变。

直接使用form标签的表单支持reset方法,而使用其他标签作为容器的则不支持。

对于直接使用Form的表单,想要reset,直接使用LayUI提供的方法就行,具体代码如下:
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>reset说明</title>
  6. <link rel="stylesheet" href="layui.css" media="all">
  7. </head>
  8. <body>
  9. <form class="layui-form" lay-filter="test"> <!-- 提示:如果你不想用form,你可以换成div等任何一个普通元素 -->
  10.   <div class="layui-form-item">
  11.     <label class="layui-form-label">输入框</label>
  12.     <div class="layui-input-block">
  13.       <input type="text" name="" placeholder="请输入" autocomplete="off" class="layui-input">
  14.     </div>
  15.   </div>
  16.   <div class="layui-form-item">
  17.     <label class="layui-form-label">下拉选择框</label>
  18.     <div class="layui-input-block">
  19.       <select name="interest" lay-filter="aihao">
  20.         <option value="0">写作</option>
  21.         <option value="1">阅读</option>
  22.       </select>
  23.     </div>
  24.   </div>
  25.   <div class="layui-form-item">
  26.     <div class="layui-input-block">
  27.       <button class="layui-btn" lay-submit lay-filter="submit-form">立即提交</button>
  28.       <button type="reset" class="layui-btn layui-btn-primary">重置</button>
  29.     </div>
  30.   </div>
  31. </form>
  32. <script src="layui.js"></script>
  33. <script>
  34. layui.use('form', function(){
  35.   var form = layui.form;
  36.   //监听搜索
  37.   form.on('submit(submit-form)', function(data){
  38.        var field = data.field;
  39.        //执行操作
  40.         return false;
  41.         });
  42. });
  43. </script>
  44. </body>
  45. </html>
复制代码

  1. <button type="reset" class="layui-btn layui-btn-primary">重置</button>
复制代码


这一句便是调用LayUI的reset方法。一般的LayUI Form使用就可以。

为了实现点击reset按钮只重置表单内容而不刷新整个界面,则需要在

  form.on('submit(submit-form)', function(data){
       var field = data.field;
       //执行操作
        return false;
        });

时返回false,表示不刷新整个页面,即在点击reset之后不刷新页面,而是只刷新Form表单。

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 免费注册