[2024-07-21](UPDATE): 通用表单封装

static/js/modal.js

@@ -0,0 +1,40 @@
+function Modal(modalTitle, fields, onSubmit) {
+    this.modalTitle = modalTitle
+    this.fields = fields
+    this.onSubmit = onSubmit
+}
+
+Modal.prototype.GenericModalForm = function () {
+    let self = this
+    // 设置表单标题
+    $('#genericFormModalLabel').text(self.modalTitle)
+    // 生成表单内容
+    let $form = $('#genericForm')
+    $form.empty()
+    self.fields.forEach(function(field) {
+        let $formGroup = $('<div class="form-group"></div>')
+        $formGroup.append('<label>' + field.label + '</label>')
+
+        let $input
+        if (field.type === 'textarea') {
+            $input = $('<textarea class="form-control" name="' + field.name + '"></textarea>')
+        } else {
+            $input = $('<input type="' + field.type + '" class="form-control" name="' + field.name + '">')
+        }
+
+        $formGroup.append($input)
+        $form.append($formGroup)
+    })
+    // 显示模态框
+    $('#genericFormModal').modal('show');
+
+    // 处理表单提交
+    $('#genericFormSubmit').off('click').on('click', function() {
+        let formData = {}
+        $form.serializeArray().forEach(function(item) {
+            formData[item.name] = item.value
+        })
+        self.onSubmit(formData)
+        $('#genericFormModal').modal('hide')
+    })
+}

view/layout.html

@@ -49,15 +49,28 @@
     {{ .csrfField }}
     {{template "content" .}}
 </div>
-<script>
+<!-- 弹出表单模态框 -->
-    $(function () {
+<div class="modal fade" id="genericFormModal" tabindex="-1" aria-labelledby="genericFormModalLabel" aria-hidden="true">
-        let pathname = window.location.pathname
+    <div class="modal-dialog">
-        let links = $("nav-link");
+        <div class="modal-content">
-        for (let i = 0; i < links.length; i++) {
+            <div class="modal-header">
-
+                <h5 class="modal-title" id="genericFormModalLabel">表单标题</h5>
-        }
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-    })
+                    <span aria-hidden="true">&times;</span>
-</script>
+                </button>
+            </div>
+            <div class="modal-body">
+                <form id="genericForm">
+                    <!-- 动态表单内容 -->
+                </form>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
+                <button type="button" class="btn btn-primary" id="genericFormSubmit">提交</button>
+            </div>
+        </div>
+    </div>
+</div>
 {{template "script" .}}
 </body>
 </html>

view/picture.html

@@ -2,9 +2,31 @@
 {{end}}
 
 {{define "content"}}
-<h1 class="h2">Picture</h1>
+<h2>通用弹出表单示例</h2>
-<p>Picture page content goes here.</p>
+<!-- 触发按钮 -->
+<button id="openFormButton" class="btn btn-primary">打开表单</button>
 {{end}}
 
 {{define "script"}}
+<script src="/static/js/modal.js"></script>
+<script>
+    $(document).ready(function() {
+        // 示例字段配置
+        let fields = [
+            { label: '用户名', name: 'username', type: 'text' },
+            { label: '邮箱', name: 'email', type: 'email' },
+            { label: '密码', name: 'password', type: 'password' }
+        ]
+
+        // 初始化表单并显示
+        $('#openFormButton').on('click', function() {
+            let title = '用户注册'
+            let modal = new Modal(title, fields,function(data) {
+                console.log('表单提交数据：', data)
+                // 在此处处理表单提交，例如通过 AJAX 发送到服务器
+            })
+            modal.GenericModalForm()
+        })
+    })
+</script>
 {{end}}