重置按钮必须用type="button",否则在form内默认触发submit导致刷新;需先form.val()清数据再form.render()刷ui,级联下拉、laydate、checkbox等须单独处理,表格重载必须table.reload({where:{}})同步清条件。

重置按钮必须用 type="button",否则会触发提交或刷新
直接写 <button>重置</button> 在 <form></form> 里,默认是 type="submit",点一下就提交表单甚至刷新页面。Layui 的 select、date 等组件 UI 完全靠 JS 渲染,原生重置对它们无效,还可能把 DOM 结构搞乱。
正确写法只有一条:<button type="button" id="resetBtn">重置</button>。后续所有逻辑都基于这个按钮绑定 click 事件,不走 form submit 流程。
form.val() 清值 + form.render() 刷 UI,两步不能少也不能颠倒
form.val('searchForm', {}) 能批量清空所有已注册字段(即 name 属性匹配的 input/select/checkbox),但它只改数据层;form.render() 或 form.render('select', 'searchForm') 只负责重绘 UI,不碰数据。两者缺一不可,且顺序必须是先 val 后 render。
- 如果只调
form.val():下拉框标题文字、开关状态、复选框勾选都还是旧的 - 如果只调
form.render():UI 重绘但值没变,下次提交仍发旧数据 - 多个 select 且 filter 不同,要分别调
form.render('select', 'filter1')和form.render('select', 'filter2'),不能只靠一次全局form.render()
含 laydate、checkbox、级联 select 时要额外处理
日期控件不会响应 form.val(),复选框数组清空方式和普通字段不同,级联下拉之间还有依赖关系——这些都不能靠 form.val({}) 一键覆盖。
-
laydate:先$('#dateInput').val(''),再执行laydateIns.setValue('')(前提是实例已保存,比如初始化时存为window.laydateIns) -
checkbox:必须传空数组form.val('searchForm', { 'tags': [] }),传''或null无效 - 级联 select(如省→市→区):清空“省”后,必须显式
form.val('searchForm', { 'city': '', 'district': '' }),再form.render('select', 'searchForm'),否则“市”下拉选项残留、联动中断
表格搜索区域重置时,table.reload({ where: {} }) 必须同步执行
表单 UI 清空了,但表格数据没变——大概率是漏掉了 table.reload()。Layui 表格的 where 参数是独立维护的,不随表单自动更新。
-
where: {}是清空条件的唯一可靠写法;where: null或删掉where字段,都会被忽略,旧条件继续生效 - 如果搜索字段名和表格列字段名不一致(比如表单用
userName,表格查的是user_name),重置时应统一从form.val('searchForm')取值构造where,而不是硬编码空字符串 - 动态加载的表格(如分页后重新渲染),
table.reload()前要确保table模块已加载,且实例 ID(如'dataTable')与初始化时一致
layui.use(['form', 'table', 'laydate'], function(){...}) 包裹,模块未加载就调用 form.val() 或 table.reload(),会静默失败——控制台连报错都没有。











