这个需求的核心在于,联动菜单的选项不是固定的文字,而是数字,并且这些数字选项可以在后台动态添加和修改,这在制作一些需要选择数量、等级、编号等场景时非常有用。

我们将分步完成:
- 理解 Dedecms 联动菜单机制
- 创建自定义表单
- 在后台添加数字选项
- 在前端模板中调用并显示联动菜单
- 查看和提交表单数据
第 1 步:理解 Dedecms 联动菜单机制
Dedecms 的联动菜单功能依赖于两个核心部分:
- 数据字典 (
dede_sysdict):存储所有可用的选项,每个选项都有一个id、itemname(选项名称) 和evalue(选项值)。 - 联动类别 (
dede_syschannel):定义一个“类别”,产品规格”、“数字等级”等,这个类别会关联到数据字典中的某些选项,并决定它们的层级关系。
我们的目标是创建一个“数字”联动类别,并为其添加 1, 2, 3... 这样的数字选项。
第 2 步:创建自定义表单
-
登录你的 Dedecms 后台。
(图片来源网络,侵删) -
在左侧菜单栏中找到 【核心】 -> 插件】 -> 【自定义表单】。
-
点击 【增加一个新的自定义表单】。
-
填写表单信息:
- 表单名称:给你的表单起个名字,数字选择表单”。
- 表单提示:可以留空或填写一些说明。
- 表单默认模板:这里我们先不管,它会自动生成一个默认模板,我们稍后会手动修改它。
- 后台列表模板:用于在后台展示已提交的数据,可以使用默认模板。
- 后台字段模板:用于在后台编辑单个数据时显示的模板,可以使用默认模板。
- 列表行数:设置后台每页显示多少条数据。
- 是否启用:务必勾选 “是”。
-
点击 【确定】,系统会自动为你创建这个表单,并生成一个数据表,记下表单的名称或ID。
(图片来源网络,侵删)
第 3 步:在后台添加数字选项(关键步骤)
我们需要创建一个“数字”联动类别,并向其中添加数字选项。
1 创建联动类别
- 在后台左侧菜单栏找到 【核心】 -> 【频道模型】 -> 【联动类别管理】。
- 点击 【增加一个新的联动类别】。
- 填写类别信息:
- 类别名称:填写一个你容易识别的名称,“数字选择”。
- 类别目录:系统会自动生成一个英文目录,保持默认即可。
- :可以简单描述一下,用于选择数字的联动菜单”。
- 是否启用:勾选 “是”。
- 默认选项:留空。
- 列表模板:留空。
- 发布模板:留空。
- 点击 【确定】,记下这个联动类别的 ID(列表页可以看到)。
2 向类别中添加数字选项
-
返回 【联动类别管理】 页面,点击你刚刚创建的 “数字选择” 类别后面的 【管理选项】。
-
现在我们要添加数字了,假设我们要添加选项
1到10。- 添加顶级选项:
- 选项名称:
1 - 选项值:
1(这里我们让名称和值保持一致,都是数字) - 父选项:选择
(无) - 点击 【新增】。
- 选项名称:
- 添加第二个选项:
- 选项名称:
2 - 选项值:
2 - 父选项:选择
(无)(因为我们希望所有数字都在同一层级,作为单选菜单) - 点击 【新增】。
- 选项名称:
- 重复此操作,直到添加完
1到10的所有数字。
注意:为了让前端显示为单选菜单,所有数字的“父选项”都应该是
(无),如果你做成层级结构(如 1 -> 1.1),前端就会变成多级下拉菜单。 - 添加顶级选项:
你的“数字选择”联动菜单就准备好了,它包含了 1 到 10 这十个数字选项。
第 4 步:在前端模板中调用联动菜单
-
找到你自定义表单生成的模板文件,路径通常是:
/templets/plus/diyform_你的表单ID.htm(/templets/plus/diyform_1.htm) -
用代码编辑器打开这个文件。
-
在你希望显示联动菜单的地方,添加以下代码:
<li> <label><strong>请选择数字:</strong></label> <select name='数字选择' id='数字选择' style='width:250px'> <option value=''>-- 请选择 --</option> {dede:global name='item' function='GetOptionList(@me, "数字选择")'/} </select> </li>代码解释:
<li>和<label>:标准的表单布局。name='数字选择':非常重要!这里的name值必须和你在 第 3 步 中创建的 “联动类别名称” 完全一致,DedeCMS 会通过这个name来查找对应的联动菜单。id='数字选择':方便 JavaScript 操作,建议和name保持一致。{dede:global name='item' function='GetOptionList(@me, "数字选择")'/}:这是核心的调用标签。name='item':固定写法,代表当前表单字段。function='GetOptionList(@me, "数字选择")':调用一个函数。"数字选择":第二个参数,就是你创建的联动类别的 “类别名称”,必须和name属性值一致。- 这个标签会自动遍历“数字选择”类别下的所有选项,并生成
<option value="选项值">选项名称</option>的代码。
-
保存模板文件并上传到服务器。
访问你的自定义表单页面,你应该能看到一个下拉菜单,里面包含了 1 到 10 的数字选项。
第 5 步:查看和提交表单数据
-
前端提交:在前端填写表单并提交,你会看到成功提示。
-
后台查看:
- 回到后台 【自定义表单】 页面。
- 点击你创建的表单名称(如“数字选择表单”)。
- 在数据列表中,你可以看到所有提交的记录。
- 点击 【查看】,在详情页中,“数字选择” 字段会直接显示你选择的数字(
5),而不是数字的ID。
数据库层面:
- 提交的数据会保存在
dede_diyform表(主表)和dede_diyform_你的表单ID表(附表)中。 - 联动菜单的字段存储的是你选择的选项值(evalue),也就是数字本身(如
5),而不是选项的ID(dictid),这非常方便,因为你存储的就是有意义的数字。
总结与要点回顾
| 步骤 | 关键操作 | 核心要点 |
|---|---|---|
| 创建表单 | 核心 -> 内容插件 -> 自定义表单 | 记住表单ID或名称。 |
| 创建联动类别 | 核心 -> 频道模型 -> 联动类别管理 | 类别名称 是关键,“数字选择”。 |
| 添加数字选项 | 在联动类别管理中,点击“管理选项” | 选项名称 和 选项值 都设置为数字(如 1),所有选项的“父选项”都选 (无) 以实现单选。 |
| 编写前端模板 | 修改 diyform_*.htm 文件 |
name 和 id 属性 必须等于 联动类别名称,使用 {dede:global name='item' function='GetOptionList(@me, "联动类别名称")'/}
|
| 提交与查看 | 前端提交,后台查看 | 后台存储的是你选择的数字值,非常直观。 |
通过以上步骤,你就成功地为 Dedecms 自定义表单实现了一个后台可配置、前端显示为数字的联动菜单功能,这个方法同样适用于任何需要动态配置选项(如产品型号、颜色、尺寸等)的场景。
