动态生成表格 [英] Generating forms dynamically
问题描述
我已经附上了我需要在Web应用程序中构建的多种形式中的两种的原始图像:
I have attached crude images of two of the multiple forms I need to build in my web application:
如果我通常考虑表单，则它具有以下元素:
If I consider forms in general, it has the following elements:
- 复选框
- 日期
- DateTime
- 文件
- 图片
- 密码
- 单选按钮
- 文本框
- 标签
- 文本区域
- 时间
- 链接
- Checkbox
- Date
- DateTime
- File
- Image
- Password
- Radio Button
- Text Box
- Label
- Text Area
- Time
- Link
我想知道是否存在一种方法可以将所有表单的结构/元数据存储在某个地方(配置文件，数据库等)，并根据某些操作在表格上生成表单.基于元数据运行-用户只需输入值即可.我经历了几个主题，例如 this 和
I was wondering if there could be a way where I could store the structure/meta-data of all the forms somewhere(config. file, database etc.) and depending upon some action, generate the form, on-the-fly based on the meta-data - the user will simply input the values. I went through several topics like this and this but couldn't find the answer. Assuming it is possible, how to structure the stored elements so that they are rendered properly in the generated page/form, how to store the values for combo-boxes, how to make text-boxes read-only and queries like that have added to my confusion.
请注意，虽然我仅限于使用JQuery和Spring ，但我也想知道其他技术和方法，当然，要实现相同的目的！
Please note while I'm restricted to the use of JQuery and Spring, I would also like to know the other technologies and ways,of course, to achieve the same!
感谢和问候！
*第一次编辑开始
虽然pbibergal提供的解决方案似乎可以解决我的问题，但我仍期待一些基于Spring/基于纯JQuery的解决方案来实现相同的目的-我不确定是否允许我探索并使用JS模板引擎！
While the solution provided by pbibergal appears to address my problem, I'm still looking forward to a some Spring-based/pure JQuery-based solution to achieve the same - I'm not sure if I would be allowed to explore and use a JS template engine !
*第一个编辑结束
*第二次编辑开始
这是我尝试使用doT.js呈现表单的单个页面-我是否在某个地方缺少一些HTML标记以传递给可以呈现表单的js代码?
This is the single page where I'm trying to render the form using doT.js - am I missing some HTML tag somewhere to be passed to the js code where it can render the form?
<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>
*第二次编辑结束
推荐答案
您可以使用Javascript对象存储数据. 例如
You can use Javascript objects for storing the data. Eg.
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/
Save your data in local database like Mozilla IndexedDB or WebSQL. Another way is to save in local storage. Then build your form using javascript template engine. doT.js is good for this: 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));
});
这篇关于动态生成表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
