Question

我附上了我需要在我的网络应用程序中构建的多种表单中的两种形式的原始图像：

Form

如果我一般考虑表格，它有以下要素：

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

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

请注意，虽然我只限于使用JQuery和Spring ，但我还想了解其他技术和方法，当然也要实现同样的目标！

谢谢和问候！

*第一次编辑开始

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

*第1次编辑结束

*第二次编辑开始

这是我尝试使用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>

*第二次编辑结束

Answer 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));
});

动态生成表单

1 个答案: