layui搜索重置功能

大家好，欢迎来到IT知识分享网。

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"><i
               class="fa fa-search"></i>&nbsp;搜索</a>
   <a class="btn btn-warning btn-rounded btn-sm" onclick="reset()"><i
               class="fa fa-refresh"></i>&nbsp;重置</a>
</li>

js

/*重置*/
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() {
	数据和上面是一样的写法，就不重复了。。。。。。。
}

如有更好的方法请斧正