Layui如何實(shí)現(xiàn)多條件查詢

這篇文章主要介紹了Layui如何實(shí)現(xiàn)多條件查詢，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

最近做一個(gè)檔案系統(tǒng)，發(fā)現(xiàn)字段超多

帶分頁的多條件查詢（分頁需要后端分頁，傳page給后端才可實(shí)現(xiàn)，前端無法直接實(shí)現(xiàn)）

當(dāng)我們點(diǎn)擊搜索按鈕時(shí)會(huì)篩選出輸入值的相關(guān)數(shù)據(jù)，多條件查詢是建立在數(shù)據(jù)之上，數(shù)據(jù)查詢出來后開辟條件在用戶輸入的值不為空的情況下讓查詢出來的數(shù)據(jù)下面的某值等于用戶輸入的值，然后查詢的數(shù)據(jù)返回到視圖再重新加載渲染的表格，查詢出來的數(shù)據(jù)是所篩選的出來的數(shù)據(jù)與用戶輸入的值相關(guān)。

多條件查詢表單

<form class="layui-form" action="">
		<div class="layui-inline">
			<label class="layui-form-label">年級(jí)</label>
			<div class="layui-input-inline">
				<input type="text" id="grade" name="grade" placeholder="請(qǐng)選擇年級(jí)"
					autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-inline">
			<label class="layui-form-label">專業(yè)</label>
			<div class="layui-input-inline">
				<select name="majorid" id="majorid">
					<option value="">請(qǐng)選擇</option>
				</select>
			</div>
		</div>
		<div class="layui-inline">
			<div class="layui-input-inline">
				<button class="layui-btn" id="searchBtn" lay-submit
					lay-filter="formDemo" data-type="reload" >
					<i class="layui-icon layui-icon-search"></i> 查詢
				</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
	</form>

使用年日歷選擇年級(jí)，動(dòng)態(tài)獲取專業(yè)選項(xiàng)

//年級(jí)用日歷顯示
var laydate = layui.laydate;
	laydate.render({
		elem : '#grade', //指定元素
		type : 'year'
	});

	//獲取下拉框?qū)I(yè)
	$.ajax({
		url : '../../MajorFindAllServlet?deptid=5',
		dataType : 'json',
		data : {
			'state' : 0
		}, //查詢狀態(tài)為正常的所有機(jī)構(gòu)類型
		type : 'post',
		success : function(data) {
			$.each(data, function(index, item) {
				$('#majorid').append(
						new Option(item.majorname, item.majorid));// 下拉菜單里添加元素
			});
			layui.form.render("select");
		}
	});

所有的js都包含在 … 中，table為數(shù)據(jù)表格，laydata為日歷，form為表單，用到哪一部分就寫上哪一部分，詳情見 Layui官網(wǎng)

layui.use(['table', 'laydate', 'form' ], function() {...}

生成表格

//生成表格
var table = layui.table;
	table.render({
		elem : '#table',
		url : '../../ClassesFindByPageServlet',
		toolbar : '#toolbarDemo',
		title : '班級(jí)表',//導(dǎo)出文件名
		page : {
			layout:['count','prev','page','next', 'skip']
		},//開啟分頁
		id : 'tableAll',
		where : {
			majorid : '',
			grade : ''
		},
		request : {
			'limitName' : 'pageSize' //分頁每頁條數(shù)默認(rèn)字段改為pageSize
		},
		cellMinWidth : 80, //全局定義常規(guī)單元格的最小寬度，layui 2.2.1 新增
		cols : [ [ {
			type : 'checkbox',
			fixed : 'left'
		}, {
			field : 'classid',
			title : '班級(jí)編號(hào)'
		}, {
			field : 'classname',
			title : '班級(jí)名稱'
		}, {
			field : 'deptname',
			title : '院系名稱'
		}, {
			field : 'majorname',
			title : '專業(yè)名稱'
		}, {
			field : 'grade',
			title : '年級(jí)',
			sort : true
		}, {
			fixed : 'right',
			title : '操作',
			toolbar : '#barDemo'
		} ] ]
	});

多條件查詢 點(diǎn)擊提交重載表格

//點(diǎn)擊查詢按鈕，重載表格
	$('#searchBtn').on('click', function() {
		table.reload('tableAll', {
			method : 'post',
			where : {
				grade : $('#grade').val(),
				majorid : $('#majorid').val()
			},
			page : {
				curr : 1
			}
		});
		return false;
	});

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“Layui如何實(shí)現(xiàn)多條件查詢”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!