layui搜索重置功能

之前BiKABi发布过layui的自定义验证，今天分享一下layui的搜索和重置，直接上代码，奥利给！
注：使用下面的功能前记得先去下载layui官网的样式

body页面

/*搜索,重置按钮*/
//这句的作用就是在有选项卡的时候，把每个选项卡下面的值记录，就好做判断去重置哪个了
<input id="taskCode"  value="1" hidden>
<li><a class="btn btn-primary btn-rounded btn-sm search" data-type="reload"><iclass="fa fa-search"></i>&nbsp;搜索</a><a class="btn btn-warning btn-rounded btn-sm" onclick="reset()"><iclass="fa fa-refresh"></i>&nbsp;重置</a>
</li>

/*重置*/
function reset() {var taskCode = $("#taskCode").val();$("#orderNum").val("");/*根据你写的输入框的class或id或name，清空输入框*/if (taskCode == "1") {mainPage();/*这个是第一个封装的选项卡*/}else if(taskCode == "2"){detailPage();/*这个是第二个封装的选项卡*/};
};
注：这个查询中的table可能会取不到值，可以直接下在table.render下面
/*查询*/
var active = {reload:function(){table.reload('testReload',{/*查询的id，这个id读的是哪个表定义的id*/where : {dispatchedNum : $("#dispatchedNum").val()}});}
};
$('.select-list .search').on('click', function(){var type = $(this).data('type');active[type] ? active[type].call(this) : '';
});

如果还不懂可以看下下面的例子

/*
*选项卡切换功能
*/
/*地址*/
const prefix = ctx + "地址";layui.use(['form', 'layedit', 'laydate', 'element' ],function() {var form = layui.form, layer = layui.layer, layedit = layui.layedit, laydate = layui.laydate;element = layui.element;var table = layui.table;/*日期*/laydate.render({elem : '#date'});mainPage(); /*初始化显示第一个选项卡*//*点击切换*/element.on('tab(test1)', function(data) {$("#taskCode").val(this.getAttribute('lay-id'));if (this.getAttribute('lay-id') == "2") {detailPage();reset(); /*重置*/} else {mainPage();reset();}});
});
/*
*第一个选项卡数据
*/
function mainPage() {$("#taskCode").val(1);/*给重置按钮判断做条件*/layui.use([ 'table' ], function() {var table = layui.table;table.render({elem : '#test',url : prefix + "/assignedParticularList",method : "POST",where : {/*传参给后台*/selectCode : 1},cols : [ [ /*表显示数据*/{type : 'radio',width : 30},{field : 'dispatchedNum',title : '派工单号',align : 'center'},{title : '操作',align : 'center',templet : '#zq_operateButton'/*需定义一个script并加id*/} ] ],id:'testReload',/*查询定义id*/page : true,even : true});/*查询*/var active = {reload:function(){table.reload('testReload',{/*查询的id*/where : {dispatchedNum : $("#dispatchedNum").val()}});}};$('.select-list .search').on('click', function(){var type = $(this).data('type');active[type] ? active[type].call(this) : '';});/*数据明细*/table.render({elem : '#test1',url : "地址",method : "POST",where : {orderNum : '1'/*传参到后台*/},cols : [ [/*表格样式数据*/{field : 'dispatchedNum',title : '派工单号',align : 'center'}, {field : 'startTime',title : '操作',align : 'center',templet : '#details'}] ],page : false,even : true});table.on('radio(demo)', function(obj) {$(".detailedss").show();table.reload('test1', {method : 'post',where : {orderNum : obj.data.orderNum}});});});
};
function detailPage() {数据和上面是一样的写法，就不重复了。。。。。。。
}

如有更好的方法请斧正

layui搜索重置功能相关推荐

element ui表格data搜索重置功能
element ui表格搜索重置功能本地 1.html <el-input v-model.trim="inputname"></el-input> &l ...
layui搜索重置按钮
layui重置按钮一.html中添加重置按钮 <div class="layui-inline"><input id="brandName" ...
layui 搜索重置自动刷新
搜索重置自动刷新
微信小程序的搜索和重置功能
微信小程序的搜索和重置功能 wxml <template><div><div class="input-wrap"><el-inputse ...
layui 数据表格的搜索分页功能的实现
最近在使用layui+larave做项目,需要使用到table的分页+搜索的功能,一开始没有什么思路,从网上找了几个,用在自己这里并不正确,不知是自己有哪里写错了,还是这几个是不正确,下面是自己亲自试 ...
Python仓库管理系统源代码，库存管理系统源码，基于flask，内含数据库文件，已实现出入库、库存预警，库存搜索等功能
Python仓库管理系统源代码,库存管理系统源码,基于flask,内含数据库文件,已实现出入库.库存预警,库存搜索等功能已实现三大功能:库存管理(出库.入库.低库存预警.物品搜索),预算统计,出入库 ...
如何使用html实现在线秒表,使用JavaScript实现网页秒表功能（含开始、暂停、继续、重置功能）...
效果图展示,感觉不错可以参考实例代码. 具体代码如下所示: Document 00:00:00:00 开始暂停继续重置 //定义一个变量,根据定时器每秒执行一次,每次执行++自增操作,变量存储的 ...
html计时器重置,使用JavaScript实现网页秒表功能（含开始、暂停、继续、重置功能）...
效果图展示,感觉不错可以参考实例代码. 具体代码如下所示: Document 00:00:00:00 开始暂停继续重置 //定义一个变量,根据定时器每秒执行一次,每次执行++自增操作,变量存储的 ...
html按时间搜索数据功能
html按时间搜索数据功能 html <input type="text" class="form-control layui-input" id=&qu ...

layui搜索重置功能

layui搜索重置功能

layui搜索重置功能相关推荐

最新文章

热门文章