dedecms联动筛选通过自定义字段、ajax与sql查询实现前端选择动态更新内容列表。首先在后台添加层级关联的自定义字段，如省、市、区；然后在模板中构建select下拉框，利用javascript监听change事件，通过ajax将选中值发送至后端；后端php文件引入dedecms核心，接收参数并拼接sql条件查询，返回对应子级选项或过滤后的列表数据，前端据此更新下一级选项和内容区域，实现逐级联动筛选，提升用户查找效率。
DedeCMS联动筛选的核心在于通过前端交互，动态调整后端数据查询条件，实现内容列表的逐步过滤。它通常依赖自定义字段、AJAX技术和DedeCMS的SQL查询标签来完成，目的是让用户在多个筛选条件之间建立关联，每选择一个条件，后续的选项或内容列表都会随之更新。这极大地提升了用户查找信息的效率和体验。
解决方案
要实现DedeCMS的联动筛选，我通常会从以下几个方面着手，这算是一个比较常见的思路：
1. 自定义字段的准备 首先，你需要在DedeCMS后台为你的内容模型（比如文章、产品等）添加必要的自定义字段。这些字段是实现联动的基础，例如：
- 一级分类： 下拉框类型，比如“省份”。
- 二级分类： 下拉框类型，比如“城市”，它的选项会根据“省份”的选择而变化。
- 三级分类： 同样是下拉框，比如“区域”，选项依赖“城市”。 这些字段的值需要预先填充好，或者在内容发布时进行选择。如果是多选类型，比如“产品颜色”，数据存储时通常会用逗号分隔。
2. 前端HTML结构与JavaScript/AJAX逻辑 这是联动筛选的关键部分。
-
HTML结构： 在你的列表页模板中，放置多个
<select>
标签，代表不同的筛选条件。<select id="provinceSelect"> <option value="">请选择省份</option> <!-- 省份选项通过DedeCMS标签或JS初始化 --> </select> <select id="citySelect" disabled> <option value="">请选择城市</option> </select> <select id="areaSelect" disabled> <option value="">请选择区域</option> </select> <div id="resultList"> <!-- 筛选结果会显示在这里 --> </div> -
JavaScript/AJAX：
监听每个
<select>
标签的change
事件。当一个选择框的值改变时，获取当前已选择的所有条件值。
通过AJAX请求将这些条件发送到后端的一个特定接口（比如一个专门用于处理筛选请求的PHP文件或DedeCMS的某个模板页）。
后端根据这些条件查询数据，并返回新的筛选选项（用于更新后续的
<select>
标签）和/或过滤后的内容列表。前端接收到数据后，动态更新后续的
<select>
标签选项，并刷新内容列表。-
核心逻辑示例（伪代码）：
$('#provinceSelect').on('change', function() { var provinceId = $(this).val(); // 清空并禁用后续选择框 $('#citySelect').html('<option value="">请选择城市</option>').prop('disabled', true); $('#areaSelect').html('<option value="">请选择区域</option>').prop('disabled', true); if (provinceId) { $.ajax({ url: '/ajax_filter.php', // 后端处理文件 type: 'GET', data: { action: 'get_cities', province_id: provinceId }, success: function(response) { // 假设response是JSON格式的城市列表 if (response.cities && response.cities.length > 0) { var options = '<option value="">请选择城市</option>'; $.each(response.cities, function(i, city) { options += '<option value="' + city.id + '">' + city.name + '</option>'; }); $('#citySelect').html(options).prop('disabled', false); } } }); } // 每次选择变化，都重新加载内容列表 loadContentList(); }); function loadContentList() { var params = { province_id: $('#provinceSelect').val(), city_id: $('#citySelect').val(), area_id: $('#areaSelect').val() }; $.ajax({ url: '/ajax_filter.php', type: 'GET', data: { action: 'get_list', ...params }, success: function(response) { $('#resultList').html(response.html); // 假设返回HTML片段 } }); } // 页面加载时初始化 $(function() { loadContentList(); });
3. 后端DedeCMS标签与PHP处理 这块儿是把前端请求和DedeCMS数据打通的关键。
创建后端处理文件： 通常我会在网站根目录或某个子目录创建一个
ajax_filter.php
（或类似的名称）文件，专门处理前端的AJAX请求。-
接收参数与构建SQL： 在这个PHP文件中，你会接收前端传来的
province_id
、city_id
等参数。然后，根据这些参数动态构建SQL查询语句。<?php require_once(dirname(__FILE__)."/include/common.inc.php"); // 引入DedeCMS核心文件 $action = $_GET['action'] ?? ''; if ($action == 'get_cities') { $provinceId = intval($_GET['province_id'] ?? 0); $cities = []; if ($provinceId > 0) { // 这里假设城市数据存储在某个自定义表或DedeCMS的分类表中 // 实际应用中，你可能需要根据自定义字段的存储方式来查询 // 比如从一个专门的省市区表中查询 $dsql->SetQuery("SELECT id, name FROM `#@__city` WHERE province_id = '$provinceId'"); $dsql->Execute(); while($row = $dsql->GetArray()){ $cities[] = ['id' => $row['id'], 'name' => $row['name']]; } } echo json_encode(['cities' => $cities]); exit(); } elseif ($action == 'get_list') { $provinceId = intval($_GET['province_id'] ?? 0); $cityId = intval($_GET['city_id'] ?? 0); $areaId = intval($_GET['area_id'] ?? 0); $where = " WHERE arc.id > 0 "; // 初始条件，防止SQL语法错误 // 假设自定义字段名为 field_province, field_city, field_area // DedeCMS的自定义字段数据通常存储在`dede_addon*`表中，需要JOIN查询 // 或者如果字段是下拉框，直接在dede_archives表中 if ($provinceId > 0) { $where .= " AND cf.field_province = '$provinceId' "; // 假设自定义字段存储在附加表中，且字段名为field_province } if ($cityId > 0) { $where .= " AND cf.field_city = '$cityId' "; } if ($areaId > 0) { $where .= " AND cf.field_area = '$areaId' "; } // 构建SQL查询，这里需要JOIN附加表获取自定义字段 $model_id = 1; // 你的内容模型ID $addtable = Get
