erp/Web/EArc/ProductForm.aspx

<%@ Page Title="" Language="C#" AutoEventWireup="true" MasterPageFile="~/MasterPage/View.master" CodeFile="ProductForm.aspx.cs" Inherits="EArc_ProductForm" %>


<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <script type="text/javascript">
        let exc = "/\d+x\d+(cm|mm)/g";
        let list_index = 0;
        var json;
        $(function () {
            if (json) {
                json.map(item => {
                    let html = `<div class="items">
                                     <div class="conent">
                                         <label class="title" for="json[${list_index}].title">名字</label>
                                         <input name="json[${list_index}].title" value="${item.title}"/>
                                         <label class="title" for="json[${list_index}].type">类型</label>
                                         <select name="json[${list_index}].type">
                                             <option value="input"${item.type == 'input' ? "selected" : ""}>输入项</option>
                                             <option value="upload" ${item.type == 'upload' ? "selected" : ""}>上传项</option>
                                         </select>
                                     </div>
                                      <div class="btn" onclick="remove(this)">删除</div>
                                 </div>`;
                    list_index++;
                    $("#container").append(html);

                })
            }
        })

        function addLine() {
            let html = `<div class="items">
                            <div class="conent">
                                <label class="title" for="json[${list_index}].title">名字</label>
                                <input name="json[${list_index}].title" />
                                <label class="title" for="json[${list_index}].type">类型</label>
                                <select name="json[${list_index}].type">
                                    <option value="input" selected>输入项</option>
                                    <option value="upload">上传项</option>
                                </select>
                            </div>
                             <div class="btn" onclick="remove(this)">删除</div>
                        </div>`;

            $("#container").append(html);
            list_index++;
        }

        function submitForm() {
            const formData = $("#formContainer").serializeArray();
            // 创建一个空对象来保存结果
            var resultObject = {};

            // 遍历表单数据数组
            $.each(formData, function (index, field) {
                var name = field.name;
                var value = field.value;

                // 正则表达式匹配索引和键名
                var regex = /json\[(\d+)\]\.(.+)/g;
                var match = regex.exec(name);

                if (match) {
                    var index = match[1];
                    var key = match[2];

                    // 创建嵌套对象的键名
                    var nestedKey = 'json_' + index;

                    // 检查结果对象中是否已存在嵌套对象
                    if (!resultObject.hasOwnProperty(nestedKey)) {
                        resultObject[nestedKey] = {};
                    }

                    // 将值设置为嵌套对象的属性值
                    resultObject[nestedKey][key] = value;
                }
            });

            // 将结果对象转换为数组形式
            var resultArray = Object.keys(resultObject).map(function (key) {
                var index = key.split('_')[1];
                var data = resultObject[key];

                return { ...data };
            });

            // 打印结果数组
            console.log(resultArray);
            let parms = {};
            parms.eid = eid;
            parms.json = JSON.stringify(resultArray);
            postAjax("save_product_form_data", parms, function (data) {
                resultShow(data);
            });
        }

        $(document).on('click', '.btn', function () {
            $(this).parent().remove()
        });

    </script>
    <style>
        .items {
            padding: 10px 0;
            display: flex;
            align-items: center;
            justify-content: space-between
        }

        .title {
            margin-left: 10px;
        }

        .btn {
            padding: 10px 20px;
            border: 1px solid #e3e3e3;
            border-radius: 10px
        }

            .btn:hover {
                background-color: #0094ff;
                cursor: pointer;
            }
    </style>

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="btn" runat="Server">
    <form id="formContainer" style="width: 100%;">
        <a class="mini-button" iconcls="icon-add" onclick="addLine()">添加信息</a>
        <div id="container"></div>
        <div class="win_btn" style="text-align: center;">
            <a class="mini-button" iconcls="icon-ok" onclick="submitForm">保存</a>&nbsp;
            <a class="mini-button" iconcls="icon-cancel" onclick="closeFn">关闭</a>
        </div>
    </form>
</asp:Content>