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

效果图：

元素解析：

每一行代表一个

，根据 id 来辨别，通过 layui 的 form.val() 方法获取值

注意

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

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

代码

html 部分

添加条件
删除选中条件
查询 

js 部分（我的第一个select里的内容是从后端拉取的，所以需要拼接）

form的拼接内容可以自己定义，建议先写一个静态的form看看效果，然后将代码复制到nodepade++里面按 ctrl+j 即可变为一行

layui.use('form', function () {
                var form = layui.form;
                var num = 0;
                $("#add").click(function () {
                    num++;
                    var htmls = '
 
                             
                                                              
                             
                                                                      请选择查询方式                                     term                                     match                                                              
                             
                                                              
                         ';
                    $("#searchForm").append(htmls);
                    var htmls = '请选择字段名';
                    for (var x in columnData) {
                        htmls += '' + columnData[x].columnName + ''
                    }
                    $("#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 = {}; }
                    })
                })
            });