layui重置按钮

一、html中添加重置按钮

<div class="layui-inline"><input id="brandName" class="layui-input" type="text" autocomplete="off" placeholder="品牌名称/备注/简要描述"/></div><div class="layui-inline"><button id="btnSearch" class="layui-btn icon-btn"><i class="layui-icon">&#xe615;</i>搜索</button><button id="btnReset" class="layui-btn icon-btn"><i class="layui-icon">&#xe669;</i>重置</button><button id="btnAdd" class="layui-btn icon-btn"><i class="layui-icon">&#xe654;</i>添加</button></div>

我这里直接添加的一个输入框然后后面搜索重置添加按钮
二、js文件

layui.use([ 'form'], function () {   var form = layui.form;

首先最上面要定义一下form表单
然后下面要写点击查看按钮和点击重置按钮

/*** 点击查询按钮*/GoodsBrand.search = function () {var queryData = {brandName:       $('#brandName').val(),memo:       $('#memo').val(),brief:       $('#brief').val(),firstChar:       $('#firstChar').val(),};table.reload(GoodsBrand.tableId, {where: queryData, page: {curr: 1}});};/*** 点击重置按钮*/GoodsBrand.reset = function () {$('#brandName').val("");$('#memo').val("");$('#brief').val("");$('#firstChar').val("");form.render();GoodsBrand.search();}

下面还要再写上点击事件

 // 搜索按钮点击事件$('#btnSearch').click(function () {GoodsBrand.search();});// 重置按钮点击事件$('#btnReset').click(function () {GoodsBrand.reset();});// 添加按钮点击事件$('#btnAdd').click(function () {GoodsBrand.jumpAddPage();});

关于搜索的话需要根据方法在mapper 写搜索条件达到搜索目的
比如这个的摸查找也可以具体查找但是模糊查找比较好用

select<include refid="Base_Column_List"/>from mt_goods_brand where 1 = 1<if test="paramCondition.brandName != null and paramCondition.brandName != ''">and brand_name like CONCAT('%',#{paramCondition.brandName},'%')</if>

外面是一个 < select> 标签
这样就可以了。

layui搜索重置按钮相关推荐

layui搜索重置功能
layui搜索重置功能之前BiKABi发布过layui的自定义验证,今天分享一下layui的搜索和重置,直接上代码,奥利给! 注:使用下面的功能前记得先去下载layui官网的样式 body页面 /* ...
layui 搜索重置自动刷新
搜索重置自动刷新
图片实现提交/重置按钮
图片实现提交/重置按钮提交: 第一种方式(无图片的): <input type="submit" value="提交" /> 第二种方式(有 ...
html计算器重置按钮,在Windows 10中重置和重新安装计算器 | MOS86
Windows 10中的新计算器应用程序运行了一个干净的用户界面,并且在触摸设备上也很出色. 除了默认启动计算器应用程序默认设置的标准模式之外,还可以在Calculator应用程序中使用程序员和科学模 ...
BeagleBone硬件概览Ethernet端口板载LEDc重置按钮等介绍
BeagleBone硬件概览Ethernet端口板载LEDc重置按钮等介绍两种型号的BeagleBone BeagleBone有两种型号,较早的的型号为Beaglebone,最新的型号为Beagle ...
js进阶 9-5 js如何确认form的提交和重置按钮
js进阶 9-5 js如何确认form的提交和重置按钮一.总结一句话总结: 1.这个并不好做:onsubmit 里面的代码必须返回false才能取消onsubmit方法的执行,所以,有return ...
禁用删除键退回历史记录_如何在Windows 8中删除或禁用搜索超级按钮历史记录
禁用删除键退回历史记录 When you use the Search Charm in Windows 8 it remembers everything you search for, which ...
html:(21):重置按钮和label标签
使用重置按钮,重置表单信息当用户需要重置表单信息到初始时的状态时,比如用户输入"用户名"后,发现书写有误,可以使用重置按钮使输入框恢复到初始状态.只需要把type设置为" ...
php重置网页按钮,html中递交按钮和重置按钮代码,要怎么输入?
1.加一个html标签就可以了 ,这个就是了,复制可以了,value设置为空就可以了. 2.合理的运用图片,能够使站点更加丰富多彩,相信有许多喜欢用图片的设计师都遇到过一个问题:用图片实现表单(for ...

layui搜索重置按钮

layui重置按钮

layui搜索重置按钮相关推荐

最新文章

热门文章

layui搜索 重置按钮

layui重置按钮

layui搜索 重置按钮相关推荐

最新文章

热门文章

layui搜索重置按钮

layui搜索重置按钮相关推荐