1

我附上了我需要在我的 Web 应用程序中构建的多个表单中的两个的原始图像：

形式

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

  1. 复选框
  2. 日期
  3. 约会时间
  4. 文件
  5. 图片
  6. 密码
  7. 单选按钮
  8. 文本框
  9. 标签
  10. 文本区
  11. 时间
  12. 关联

我想知道是否有一种方法可以将所有表单的结构/元数据存储在某处（配置文件、数据库等），并根据某些操作即时生成表单元数据 - 用户只需输入值。我经历了几个像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>

*第二次编辑结束

4

1 回答 1

3

您可以使用 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));
});
于 2012-11-27T15:12:10.893 回答