js封裝，實作調用接口生成HTML表單頁面

/**
 * 一鍵生成“搜尋”
 * @param json
 */
function buildSearch(json,extra = null) {
    var content = `<form action="" class="layui-form search-form" style="float:left;">`;
    $.each(json, function (index, item) {
        content += `<div class="layui-inline">`;
        //第一條資料得加上label, 作為開始的标簽
        if (index == 0 && item.label) {
            content += `<span class="data-screening-title">` + item.label + `&nbsp;&nbsp;&nbsp;&nbsp;</span>`;
        }
        //下拉框
        if (item.type == 'select') {
            content += `<div class="layui-input-inline"><select name="` + item.name + `" lay-filter="" class="layui-input layui-input-inline">`;
            $.each(item.data, function (key, value) {
                if (item.selected == key) {
                    content += `<option value="` + key + `" selected="selected">` + value + `</option>`;
                } else {
                    content += `<option value="` + key + `">` + value + `</option>`;
                }
            });
            content += `</select></div>`;
        } //text 框
        else if (item.type == "text") {
            //開始日期前加上label:
            if (item.id == "start-date") {
                content += `<span class="data-screening-title">開始日期：</span>`;
            }
            //結束日期前加上 -
            if (item.id == "end-date") {
                content += `<span class="data-screening-title">結束日期：</span>`;
            }
            if (item.name == "kw") {
                content += `<span class="data-screening-title">關鍵字  ： </span>`;
            }
            if (item.name == "kw" && item.length) {
                content += `<input style="width:` + item.length + `"`;
            } else {
                content += `<input`;
            }
            for (var key in item) {
                content += ` ` + key + `="` + item[key] + `"`;
            }
            //開始日期
            if (item.id == "start-date") {
                content += ` class="layui-input layui-input-inline">`;
                content += `
                <!--初始化 開始日期-->
                <script>
                    layui.use(['form','laydate'],function () {
                        var form = layui.form,laydate = layui.laydate;
                        form.render();
                        laydate.render({
                            elem: '#start-date'   //綁定元素
                            ,showBottom:false
                        });
                    })
                </script>
                `;
            } //結束日期
            else if (item.id == "end-date") {
                content += ` class="layui-input layui-input-inline">`;
                content += `
                <!--初始化 結束日期-->
                <script>
                    layui.use(['form','laydate'],function () {
                        var form = layui.form,laydate = layui.laydate;
                        form.render();
                        laydate.render({
                            elem: '#end-date'   //綁定元素
                            ,showBottom:false
                        });
                    })
                </script>
                `;
            }//普通text框
            else {
                content += ` class="layui-input layui-input-inline">`;
            }
        }
        content += `</div>`;
    });

    content += `<div class="layui-inline"><button class="layui-btn layui-btn-normal">搜尋</button></div></form>`;

    //右浮動按鈕組（一般用于：導出、導入等功能）
    if (extra !== null) {
        content += `<div class="layui-inline" style="float: right;">`;
        $.each(extra,function (index,item) {
            if (item.type=="button") {
                content += `<input class="layui-btn layui-btn-normal"`;
                $.each(item,function (key,value) {
                   content += key + `="` + value + `" `;
                });
                content += `>`;
            }
        });

        content += `</div>`;
    }

    return content;
}
           

HTML頁面

{extend name='base'/}
{block name='content'}
<style>
    .box {
        width: 100%;
        /*border: 1px solid red;*/
        display: inline-flex; /*設定為伸縮的父元素*/
        margin: 10px auto;
        justify-content: center;
        flex-wrap: wrap;
    }

    .div {
        width: 27%;
        min-width: 300px;
        max-width: 45%;
        /*height: 380px;*/
        background-color: white;
        padding: 15px 20px 1px 20px;
        margin: 20px;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        border-radius: 8px;
        border: 1px solid #ddd;
        /*box-shadow: 0 0 10px rgba(159, 159, 159, 0.25);*/
        flex: 1;
        text-align: center;

    }
    h3{
        text-align: center;
    }
    .div .layui-form not:nth-child(1){
        display: block;
    }
    .div .layui-form :nth-child(4){
        display: block;
    }
    .layui-inline{
        padding: 12px 0;
    }
    /*.search-form button{
        background: yellow;
    }*/
</style>

<div class="box">
    <div id="product" class="div common-search"><h3>産品銷售明細表</h3></div>
    <div id="store" class="div common-search"><h3>賣場銷售明細表</h3></div>
    <div id="brokerage" class="div common-search"><h3>導購傭金排行表</h3></div>
    <div id="sales" class="div common-search"><h3>導購銷售明細表</h3></div>
    <div id="" class="div common-search"><h3>賣場費用明細表</h3></div>
</div>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

<script>
    $(document).ready(function () {
        var json = [
            {"type": "select", "label": "地  區       ：   ", "name": "region", "data": {"cn": "國内", "hk": "香港"}, "selected": "cn"},
            {"type": "text", "name": "start", "readonly": "readonly", "value": "2018-02-01","id": "start-date"},
            {"type": "text", "name": "end", "readonly": "readonly", "value": "2018-02-28",'id': "end-date"},
            {"type": "text", "label": "關鍵字：","name": "kw", "placeholder": "請輸入關鍵字", "value": ""},
        ];



        var extra= [
            /*  {"type":"Button","id":"id","name":"name","value":"導出"},
            {"type":"Button","id":"id","name":"name","value":"搜尋"},
             {"type":"Button","id":"id","name":"name","value":"搜尋"},*/
        ];

        var search_html = buildSearch(json,extra);
        $('.common-search').append(search_html);

        //把搜尋改名，，為導出
        $('.search-form button').empty();
        $(".search-form button").html('導出');
        $('button:eq(0)').click(function () {
           alert('123');
        });
        $('button:eq(1)').click(function () {
            alert('123123');
        });
        $('button:eq(2)').click(function () {
            alert('123123123');
        });
        $('button:eq(3)').click(function () {
            alert('123123123123');
        });
        $('button:eq(4)').click(function () {
            alert('123123123123123');
        });
        $('button:eq(5)').click(function () {
            alert('123123123123123123');
        });
    });
</script>
{/block}