©2020-2024 ioDraw All rights reserved,
Privacy Policy
效果图：
元素解析：
每一行代表一个 <form>，根据 id 来辨别，通过 layui 的 form.val() 方法获取值
注意
layui 的 table 使用 where 会有缓存，所以需要在每次执行完查询之后将 where 的缓存内容置为空
即 done: function (res, curr, count) { this.where = {}; }
代码
html 部分
<button class="layui-btn layui-btn-normal" id="add">添加条件</button> <button
class="layui-btn layui-btn-danger" id="del">删除选中条件</button> <button
style="margin-left: 10px;" class="layui-btn" type="button" id="search"><i
class="layui-icon layui-icon-search"></i>查询</button> <div id="searchForm"></div>
js 部分（我的第一个select里的内容是从后端拉取的，所以需要拼接）
form的拼接内容可以自己定义，建议先写一个静态的form看看效果，然后将代码复制到nodepade++里面按 ctrl+j 即可变为一行
layui.use('form', function () { var form = layui.form; var num = 0;
$("#add").click(function () { num++; var htmls = '<form id="fnum' + num + '"
class="layui-form" lay-filter="fnum' + num + '"><br /> <div
class="layui-input-inline"><input type="checkbox" name="ifDel' + num + '"
value="fnum' + num + '" lay-skin="primary"></div> <div
class="layui-input-inline"> <select id="columns" name="field"></select> </div>
<div class="layui-input-inline" style="margin-left: 20px;"> <select id="type"
name="type"> <option value="">请选择查询方式</option> <option
value="term">term</option> <option value="match">match</option> </select>
</div> <div class="layui-input-inline" style="margin-left: 20px;"> <input
type="text" name="value" id="value" lay-verify="title" placeholder="输入匹配值"
class="layui-input"> </div> </form>'; $("#searchForm").append(htmls); var htmls
= '<option value="">请选择字段名</option>'; for (var x in columnData) { htmls +=
'<option value = "' + columnData[x].columnName + '">' +
columnData[x].columnName + '</option>' } $("#fnum" + num + "
#columns").html(htmls); // 重新渲染一下 form.render(); }) var delList = []; var index
= 0; // 删除查询条件 $("#del").click(function () {
$('input[type="checkbox"]:checkbox:checked').each(function (index, value) { var
id = $(this).val(); $("#" + id).remove(); delList[index++] = id; }); })
//监听搜索按钮 $("#search").click(function () { var list = []; console.log(delList);
for (var i = 1, j = 0; i <= num; i++) { if ($.inArray('fnum' + i, delList) ==
-1) { var data = form.val('fnum' + i); list[j++] = data; } } console.log(list);
table.reload('table4', { url: '/cluster/data/conditions', method: 'post',
where: { "clusterId": $("#clusterId").val(), "indexName":
$("#indexName").val(), "list": list, "status": 0 }, contentType:
'application/json;charset=UTF-8', done: function (res, curr, count) {
this.where = {}; } }) }) });