LayUI+JQuery实现动态表单（搜索条件的动态增减）

ゝ一世哀愁。 2023-03-03 13:23 19阅读 0赞

##  ##

## 效果图： ##

![image.png][]

## 元素解析： ##

每一行代表一个 <form>，根据 id 来辨别，通过 layui 的 form.val() 方法获取值

## 注意 ##

**layui 的 table 使用 where 会有缓存，所以需要在每次执行完查询之后将 where 的缓存内容置为空**

**即 done: function (res, curr, count) \{ this.where = \{\}; \}**

**8.11改正：但是这么做又会出现一个问题，那就是点击下一页或者别的页数的时候只会传递 page 和 limit 参数，查询参数全部清除。**

解决方法：使用第二种表格重载的方式

下面是官方提供的两种重载方式

很多时候，你需要对表格进行重载。比如数据全局搜索。以下方法可以帮你轻松实现这类需求（可任选一种）。

<table> 
 <thead> 
  <tr> 
   <td>语法</td> 
   <td>说明</td> 
   <td>适用场景</td> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>table.reload(ID, options)</td> 
   <td>参数&nbsp;<em>ID</em>&nbsp;即为基础参数id对应的值，见：<a href="https://www.layui.com/doc/modules/table.html#id" rel="nofollow">设定容器唯一ID</a><br> 参数&nbsp;<em>options</em>&nbsp;即为各项基础参数</td> 
   <td>所有渲染方式</td> 
  </tr> 
  <tr> 
   <td>tableIns.reload(options)</td> 
   <td>参数同上<br> tableIns 可通过 var tableIns = table.render() 得到</td> 
   <td>仅限方法级渲染</td> 
  </tr> 
 </tbody> 
</table>

##  ##

## 代码 ##

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 = {}; }
                        })
                    })
                });

这是修改后的

var tableIns = table.render()
                        tableIns.reload({
                            elem: '#table4',
                            url: '/cluster/data/conditions',
                            method: 'post',
                            contentType: 'application/json;charset=UTF-8',
                            where: {
                                "clusterId": $("#clusterId").val(),
                                "indexName": $("#indexName").val(),
                                "list": list,
                                "status": x++
                            },
                            cellMinWidth: 150
                            , cols: [col_arr]
                            , page: true
                            , done: function (result) {
                                if (result.message == "fail") {
                                    layer.alert("ES查询不允许深度跳页，请添加查询条件后重试！");
                                }
                            }
                        })

[image.png]: /images/20230208/183371bf6ff044e889aae23d13beeeb3.png