如何设计动态表单

公司前辈要我为动态设计一个动态表单,他稍微和我说了一下,但我不是很了解他的意思
不知道哪位仁兄做过这方面的研究,帮我解决下问题。

比如说我 有个界面要出售电脑:电脑有不同的档次。

我要在界面实现能够动态的为我的电脑档次增加 属性。如我单机”添加属性“按钮,就能显示一个对话框出来让我输入 属性的名称,字符类型,控件类型(如:是下拉列表还是 单选框等。还要考虑到下拉列表关联到的是数据库中其他表的属性(如 usb型号))
高档电脑能够添加一个USB视频设备 的属性等,或则提供修改等。

他说大概要这几个表 如 :
模板表:存放不档次电脑的共同属性。如档次1:CPU MAINBOARD RAM 档次2 CPU MAINBOARD RAM USB视频设备 硬盘
属性表:存放不同字段的信息,如 CPU 属性的类型 长度 控件类型(表单类型) label:界面显示名称

值表:存放具体的cpu 型号 主板型号 价格 等信息。

通过这些表如果做到动态修改表单呢,这些表要如何关联 设计呢,中间有没有缺少其他的表,请高手帮我解惑啊 !!!

9个回答

[quote]一句话:为档次1的电脑 添加一个属性 :硬盘
通过上面三张表 如何实现
[/quote]

在js里(jquery神马的也是js……)的数据结构原则上差不多是这样的:
levels = ['档次1','档次2','档次3'];
properties = [];
properties['档次1'] = ['硬盘','显卡','CPU','内存条',...];
properties['档次2'] = [...]
...
values = [];
values['硬盘'] = ['250G','320G','500G','1T',...];
values['显卡'] = [...];
...
这样不就能够级联了么……

至于数据库表差不多一样,就是属性表有个外键指向档次表,而值表有个外键指向属性表。如果不同档次还有不同值的话,那值表还可以加个外键指向档次表,就是有两个外键,相似js可以是这样的:
values['硬盘']['档次1'] = ['250G','320G','500G','1T',...];

基本两个思路:
1.使用DOM、Javascript、AJAX:
每做一步都用AJAX获取数据,返回用户选择,再通过Javascript动态生成表单……周而复始;
2.使用DOM、Javascript但不用AJAX:
一开始把数据都加载到页面的Javascript中,用户操作时直接通过各种选项用Javascript动态生成表单。

其实还可以1和2结合使用,不过本人个人倾向于第二个思路。

具体实现要看你的具体需求,这里你写的不是很清楚,可一个你个参考:
单击“添加属性”可以选择弹出框(用DIV或其他Dialog控件实现)、也可以直接多出一行,有一个文本框或下拉列表选名称(建议多用下拉列表),值的选项可以直接关联,应为是要交给用户选择的。选完之后可以有“完成”或“取消”,完成的也可以删除。这些用Javascript都可以实现,不是很难,就是麻烦点而已。

用jquery吧。没纯js麻烦

就是说设定页面的元素是从数据库里读出来的嘛

用 fmjsjx 的方法 :idea:
我觉得因该在档次表和属性表之间还应该有张电脑表,不然客户买什么呢?档次还是属性?
电脑表的外键指向档次表,属性表外键指向电脑表

……
数据库建表伪码:

档次表
(
id int PK,
name varchar
);

属性表
(
id int PK,
name varchar,
档次_id FK ref(档次表.id)
);

值表
(
id int PK,
name varchar,
属性_id FK ref(属性表.id)
);

基本就这样了。

这个我以前做过一个,用的是两张表,a表(aid--主键,属性1,属性2,属性3...),b表(bid,aid,属性名,属性类型,属性校验规则,属性值),a表中的一条记录和b表中的多条记录组成一条完整的设备记录。4个界面完成了30多类,50多种设备的增删改查。

这个我接触过和你说的差不多类型的需求,你可以将所有类型的电脑的属性综合在一起,也就是说品牌1和品牌2的属性是他们两个品牌属性的总数,但是在赋值的时候,你不一定要每一个属性都有值啊,如果获取的是品牌1,就拿在页面上显示这几个属性,获取的是品牌2,在页面上就显示另外几个属性,这样的弊端就是如果数据量比较大,占用数据库的空间比较大,不过这样解决你针对某一个品牌添加属性的问题简单了很多啊,
愚见,仅供参考!

设计一张表用来存动态表单的表名及基本信息,一张表用来存动态表单的字段信息,多张动态表对应生成的动态表单.后面的多张指动态生成的表.以上方案完全可行,以前项目中做过类似的东西.当时是用动态生成工作流的申请表单.

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问