©2020-2024 ioDraw All rights reserved
design sketch ：
Element analysis ：
Each row represents one <form>, according to id To identify , adopt layui Of form.val() Method to get the value
be careful
layui Of table use where There will be a cache , So you need to set the where The cache content of is set to empty
Namely done: function (res, curr, count) { this.where = {}; }
code
html part
<button class="layui-btn layui-btn-normal" id="add"> Add condition </button> <button
class="layui-btn layui-btn-danger" id="del"> Delete selected condition </button> <button
style="margin-left: 10px;" class="layui-btn" type="button" id="search"><i
class="layui-icon layui-icon-search"></i> query </button> <div id="searchForm"></div>
js part （ My first select The content is pulled from the back end , So we need to splice ）
form The splicing content of can be defined by itself , It is recommended to write a static one first form Look at the effect , Then copy the code to nodepade++ Press inside ctrl+j It becomes a line
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=""> Please select query method </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=" Enter matching value "
class="layui-input"> </div> </form>'; $("#searchForm").append(htmls); var htmls
= '<option value=""> Please select field name </option>'; for (var x in columnData) { htmls +=
'<option value = "' + columnData[x].columnName + '">' +
columnData[x].columnName + '</option>' } $("#fnum" + num + "
#columns").html(htmls); // Render it again form.render(); }) var delList = []; var index
= 0; // Delete query condition $("#del").click(function () {
$('input[type="checkbox"]:checkbox:checked').each(function (index, value) { var
id = $(this).val(); $("#" + id).remove(); delList[index++] = id; }); })
// Listen to search button $("#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 = {}; } }) }) });
Technology