dede联动筛选教程

DedeCMS 联动筛选功能完整搭建教程

联动筛选的核心思想是：后台定义好筛选的维度（如品牌、价格、网络制式），然后在前台通过下拉菜单的形式，让用户层层筛选，最终组合出符合条件的内容列表。

整个过程分为三大步：

1. 后台准备：创建模型、添加筛选字段、生成联动表。
2. 内容录入：在后台为已有内容填写筛选字段。
3. 前台调用：制作筛选表单和结果列表页。

第一步：后台准备工作

这是最关键的一步,目的是告诉 DedeCMS 我们需要哪些筛选条件。

1 创建一个自定义模型

联动筛选通常需要为文章模型（或其他模型）添加额外的字段，我们以“文章模型”为例，为其添加“手机”相关的筛选字段。

1. 登录 DedeCMS 后台。
2. 进入 [核心] -> [内容模型管理]。
3. 找到并点击 [普通文章]，进入编辑页面。
4. 在页面底部,点击 [增加新字段]。
5. 字段名称：shouji (英文字母，不能有特殊符号)
6. ：手机筛选 (前台显示的名称)
7. 字段类型：联动类型 (这是最关键的一步！)
8. 是否为必填项：根据需要选择，一般选“否”。
9. 其他选项：保持默认即可。
10. 点击 [保存]。

2 添加联动分类（筛选维度）

我们需要定义“手机筛选”这个字段具体包含哪些选项，比如品牌、价格等。

1. 在后台左侧菜单中,找到 [核心] -> [联动类型管理]。
2. 点击 [增加新的联动类型]。
3. 类型名称：手机筛选 (可以和字段标题一样，方便识别)
4. 类型目录：shouji (英文字母，会自动生成)
5. 是否开启：选择“是”。
6. 点击 [确定]。

3 为联动分类添加选项

这是创建筛选层级的核心步骤,我们以“手机品牌 -> 价格”为例。

1. 在 [联动类型管理] 页面，你刚刚创建的“手机筛选”应该已经出现在列表里。
2. 点击 [手机筛选] 后面的 [管理字段]。
3. 你会看到一个“一级分类”的输入框，我们首先添加顶级分类“品牌”。
   • 在 [一级分类名称] 输入框中输入：品牌
   • 点击 [新增一级分类]。
4. “品牌”出现在列表中，点击“品牌”后面的 [管理子分类]。
5. 在弹出的子分类管理页面,添加具体的手机品牌：
   • 分类名称：苹果
   • 点击 [新增]。
   • 分类名称：三星
   • 点击 [新增]。
   • 分类名称：华为
   • 点击 [新增]。
   • ...以此类推。
6. 添加完品牌后,我们再添加顶级分类“价格区间”。
   • 返回到“手机筛选”的管理字段页面。
   • 在 [一级分类名称] 输入框中输入：价格区间
   • 点击 [新增一级分类]。
7. 为“价格区间”添加子分类：
   • 点击“价格区间”后面的 [管理子分类]。
   • 分类名称：1000元以下
   • 分类名称：1000-3000元
   • 分类名称：3000元以上
   • ...以此类推。
8. 重要提示：你可以无限添加一级分类和二级分类，但不能有三级分类，DedeCMS 联动筛选默认只支持两级。

4 重新生成联动数据

添加完所有选项后,必须执行此步骤，否则前台无法调用。

1. 在 [联动类型管理] 页面，点击右上角的 [重新生成联动数据]。
2. 在弹出的页面中,选择你需要重新生成的联动类型（手机筛选），然后点击 [生成]。
3. 等待生成完成,这个操作会更新数据库中的缓存数据。

第二步：内容录入

后台的筛选框架已经搭建好了,我们需要为网站上的每篇相关文章（比如手机评测文章）填写筛选信息。

1. 进入 [采集] -> [添加文档]，或者编辑一篇已有的文章。
2. 在文章编辑页面的下方,你会看到一个名为 [手机筛选] 的下拉菜单（因为我们之前添加了这个联动类型的字段）。
3. 点击下拉菜单,你会看到我们刚才设置的“品牌”和“价格区间”。
4. 为这篇文章选择对应的品牌和价格,例如选择“品牌”下的“苹果”，和“价格区间”下的“3000元以上”。
5. 正常填写文章标题、内容等信息，[保存]。

提示：你需要为所有需要参与筛选的文章都填写这个字段。

（图片来源网络，侵删）

第三步：前台调用

这是最后一步,也是用户能看到效果的一步，我们需要在前台制作一个筛选表单和一个展示结果的列表。

1 创建筛选表单

在需要显示筛选器的页面（通常是列表页），使用以下代码。

<form name="search" action="/plus/list.php" method="get">
    <!-- 1. 隐藏字段，指定模型ID -->
    <!-- 你需要先在 [模型管理] 中找到 '普通文章' 的 ID，假设是 1 -->
    <input type="hidden" name="tid" value="1" />
    <!-- 2. 第一个联动下拉菜单（品牌） -->
    <select name="shouji" id="shouji" onchange="document.search.submit();">
        <option value="0">全部品牌</option>
        <!-- {dede:global name='shouji' function='GetOptionList(@me)'/} -->
        <!-- 这句代码会自动生成所有一级选项，如 '品牌', '价格区间' -->
        <!-- 我们需要手动修改，只显示我们想要的选项 -->
    </select>
    <!-- 3. 第二个联动下拉菜单（价格） -->
    <!-- 这个选项的值依赖于第一个选项的选中值，需要JS联动 -->
    <select name="shoujison" id="shoujison">
        <option value="0">请先选择品牌</option>
    </select>
    <!-- 4. 提交按钮 -->
    <button type="submit">筛选</button>
</form>

上面的代码是基础框架，我们需要进行修改和添加JS来实现联动效果。

完整且可用的筛选表单代码（推荐）：

将以下代码完整复制到你的列表页模板文件中（通常是 list_article.htm）。

<script language="javascript" type="text/javascript">
// 联动效果JS
function changeShouji(obj) {
    var form = obj.form;
    var objSon = form.shoujison;
    objSon.length = 1; // 清空第二个下拉菜单，保留第一个默认选项
    objSon.options[0] = new Option('请选择', '0');
    var selectedIndex = obj.selectedIndex;
    if (selectedIndex < 1 || form.shouji.value == 0) return; // 如果没有选择一级菜单，则不执行
    // 这里需要根据你的实际情况修改
    // 我们假设 '苹果' 的ID是 1, '三星' 是 2, '华为' 是 3
    // 价格区间ID: '1000元以下'是 11, '1000-3000元'是 12, '3000元以上'是 13
    // 你可以在后台 [联动类型管理] -> [手机筛选] -> [管理字段] 里看到每个选项的ID
    var options = {
        "1": ["iPhone 13", "iPhone 14", "iPhone 15"], // 苹果选项
        "2": "Galaxy S23,Galaxy S22,Galaxy Z Fold", // 三星选项 (用逗号分隔)
        "3": "P60 Mate60 Nova" // 华为选项 (用逗号分隔)
    };
    var selectedValue = form.shouji.value;
    if (options[selectedValue]) {
        var optionArray = options[selectedValue].split(',');
        for (var i = 0; i < optionArray.length; i++) {
            objSon.options[objSon.length] = new Option(optionArray[i], optionArray[i]);
        }
    }
}
</script>
<form name="search" action="/plus/list.php" method="get">
    <input type="hidden" name="tid" value="1" /> <!-- 替换为你的文章模型ID -->
    <select name="shouji" id="shouji" onchange="changeShouji(this)">
        <option value="0">请选择品牌</option>
        <!-- {dede:channel type='son' noself='yes'}
        这句是用来获取栏目列表的，不适用于联动分类
        -->
        <!-- 手动添加一级选项，或者使用PHP代码动态获取 -->
        <!-- 这里我们手动写死，方便理解 -->
        <option value="1">苹果</option>
        <option value="2">三星</option>
        <option value="3">华为</option>
    </select>
    <select name="shoujison" id="shoujison">
        <option value="0">请选择具体型号</option>
    </select>
    <button type="submit">筛选</button>
</form>

代码解释：

• tid：必须指定，这是筛选哪个模型下的内容，你需要去后台“内容模型管理”里查到“普通文章”对应的ID。
• name="shouji" 和 name="shoujison"：这两个下拉菜单的 name 属性必须和你在后台创建的字段名（shouji）完全一致，DedeCMS 会自动将这两个值组合成一个值，如 苹果:iPhone 14。
• onchange="changeShouji(this)"：当第一个下拉菜单值改变时，触发JS函数，动态填充第二个下拉菜单的内容。
• JS部分：options 对象是核心，你需要把你的实际选项和对应的值（通常是选项ID）填进去，键是品牌ID，值是该品牌下所有子选项的数组或逗号分隔的字符串。

2 创建结果列表页

DedeCMS 的 /plus/list.php 文件已经内置了对联动筛选的支持，你只需要确保列表页模板 (list_article.htm) 正常调用文章列表即可。

在 list_article.htm 中，使用标准的列表调用标签：

{dede:list pagesize='20'}
    <li>
        <a href="[field:arcurl/]">[field:title/]</a>
        <p>筛选信息：[field:shouji/]</p> <!-- 显示我们填写的筛选信息 -->
    </li>
{/dede:list}
<div class="dede_pages">
    <ul>
        {dede:pagelist listsize='4'/}
    </ul>
</div>

[field:shouji/] 会显示该文章的筛选字段值，苹果:iPhone 15”。

常见问题与注意事项 (FAQ)

1. 为什么我的筛选没效果？

   • 检查 tid：确保 tid 的值正确，指向了正确的模型。
   • 检查字段名：确保表单中 name 属性和后台字段名一致。
   • ：确保被筛选的文章都填写了该联动字段。
   • 重新生成数据：在后台“联动类型管理”中，务必点击 [重新生成联动数据]。

2. 联动选项很多，手动写JS很麻烦怎么办？

   对于复杂的JS联动,可以编写一个PHP函数来动态生成JS代码，这样更灵活，但这对PHP有一定要求，对于大多数情况，手动填写选项更直接。

3. 如何实现三级筛选？

   DedeCMS 自带的联动类型只支持两级，如果需要三级，需要修改核心文件或使用更复杂的二次开发方案，难度较大，建议尽量在两级内解决问题。

4. 如何清空筛选条件？

   • 在URL中,移除 shouji 和 shoujison 这两个参数即可，从 list.php?tid=1&shouji=1&shoujison=iPhone+14 变成 list.php?tid=1。

通过以上三个步骤,你就可以在 DedeCMS 中成功搭建一个功能完善的联动筛选系统了，祝你成功！