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

 

效果图：

元素解析：

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

注意

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

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

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

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

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

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

语法	说明	适用场景
table.reload(ID, options)	参数 ID 即为基础参数id对应的值，见：设定容器唯一ID 参数 options 即为各项基础参数	所有渲染方式
tableIns.reload(options)	参数同上 tableIns 可通过 var tableIns = table.render() 得到	仅限方法级渲染

 

代码

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查询不允许深度跳页，请添加查询条件后重试！");
                            }
                        }
                    })