动态生成表单答案

【问题标题】：Generating forms dynamically动态生成表单
【发布时间】：2012-11-15 04:40:46
【问题描述】：

我附上了我需要在我的网络应用程序中构建的多个表单中的两个的粗略图像：

如果我考虑一般形式，它具有以下元素：

复选框
日期
日期时间
文件
图片
密码
单选按钮
文本框
标签
文本区域
时间
链接

我想知道是否有一种方法可以将所有表单的结构/元数据存储在某处（配置文件、数据库等），并根据某些操作生成表单，即时基于元数据飞行——用户只需输入值。我经历了几个主题，例如this 和this，但找不到答案。假设有可能，如何构造存储的元素以便它们在生成的页面/表单中正确呈现，如何存储组合框的值，如何使文本框成为只读以及类似的查询已添加到我的困惑。

请注意，虽然我仅限于使用 JQuery 和 Spring，但我也想知道其他技术和方法，当然，实现相同！

感谢和问候！

*第一次编辑开始

虽然 pbibergal 提供的解决方案似乎解决了我的问题，但我仍然期待一些基于 Spring/纯 JQuery 的解决方案来实现相同的目标 - 我不确定是否允许我探索并使用 JS 模板引擎！

*第一次编辑结束

*第二次编辑开始

这是我尝试使用 doT.js 呈现表单的单个页面 - 我是否在某处遗漏了一些 HTML 标记以传递给它可以呈现表单的 js 代码？

    <html>
    <script src="../../jquery1.8.3/jquery-1.8.3.js"></script>

    <script src="https://raw.github.com/olado/doT/master/doT.js">
    </script>

    <script id="form-tmpl" type="text/x-dot-template">
        {{~it.form :value:index}}
            <{{=value.element}} id="input_{{=value.index}}" type="{{=value.type}}" value="{{=value.value}}">
        {{~}}
    </script>

    <script>
    var json =  "{fileState:"Processed",reason:"",cancel:"Cancel"}";

    $(document).ready(function(){
        var tmpl = doT.template(document.getElementById('form-tmpl').text);
        $('body').append(tmpl(json));
    });
    </script>

    <body>
    </body>

    </html>

*第二次编辑结束

【问题讨论】：

你听说过一种叫做cropping的技术吗？ 裁剪是指去除图像的外部部分以改进取景、突出主题或改变纵横比

标签： jquery forms spring web-applications

【解决方案1】：

您可以使用 Javascript 对象来存储数据。例如。

var json = {"form": [
{
    "type": "text", "element": "input", "value": "some text"
},
{
    "type": "button", "element": "input", "value": "Click here"
}
]}

将您的数据保存在 Mozilla IndexedDB 或 WebSQL 等本地数据库中。另一种方法是保存在本地存储中。然后使用 javascript 模板引擎构建您的表单。 doT.js 对此有好处： http://olado.github.com/doT/

在 HTML 文件中：

<script id="form-tmpl" type="text/x-dot-template">
    {{~it.form :value:index}}
        <{{=value.element}} id="input_{{=value.index}}" type="{{=value.type}}" value="{{=value.value}}">
    {{~}}
<script/>

在JS文件中：

$(document).ready(function(){
    var tmpl = doT.template(document.getElementById('form-tmpl').text);
    $('body').append(tmpl(json));
});

【讨论】：

您好 pbibergal，您的输入看起来很有说服力 - 我会探索您提供的主题非常感谢。
谁能给我一个例子来读取一个有表单的javascript对象并使用doT.js渲染它？
我对答案进行了更改以适合您的目的
Err...我只能部分理解您提供的代码。前任。 'json' 的东西 - 它是我打算构建的表单的 JSON 字符串吗？如果您能解释一下代码，我将不胜感激。
您需要在将字符串用作对象之前对其进行解析：var obj = jQuery.parseJSON('{"name":"John"}');