Kendo UI Grid：动态添加/移除筛选器需求技术求助

嘿，这个需求挺实用的——固定常用筛选器减少用户重复操作，动态添加又能满足个性化需求，我来给你一步步拆解实现方案：

我们可以把实现分成两部分：

• 给需要固定的4列配置默认显示的筛选器
• 做一个自定义控制面板，让用户选择其他列并动态生成对应筛选器，最后把所有筛选条件合并后应用到Grid的数据源

1. 初始化Grid并配置固定筛选器 #

首先初始化Grid时，给4个固定列开启filterable，其他列默认关闭（后续再动态开启筛选功能）。这里以文本、数字、日期类型的列为例：

<div id="grid"></div>
<!-- 动态筛选器控制面板 -->
<div class="filter-controls">
  <label>添加动态筛选器：</label>
  <select id="columnSelector">
    <!-- 选项会通过JS动态填充非固定列 -->
  </select>
  <button id="addFilterBtn">添加筛选</button>
</div>
<div id="dynamicFiltersContainer"></div>

// 定义Grid列配置，标记固定筛选列
const gridColumns = [
  { field: "id", title: "ID", filterable: true, width: 80 }, // 固定筛选列1
  { field: "name", title: "名称", filterable: true, width: 150 }, // 固定筛选列2
  { field: "category", title: "分类", filterable: true, width: 120 }, // 固定筛选列3
  { field: "price", title: "价格", filterable: true, width: 100 }, // 固定筛选列4
  { field: "stock", title: "库存", filterable: false, width: 100 },
  { field: "createDate", title: "创建日期", filterable: false, width: 160 },
  { field: "status", title: "状态", filterable: false, width: 100 }
];

// 初始化Grid
$("#grid").kendoGrid({
  dataSource: {
    type: "odata",
    transport: {
      read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
    },
    schema: {
      model: {
        fields: {
          id: { type: "number" },
          name: { type: "string" },
          category: { type: "string" },
          price: { type: "number" },
          stock: { type: "number" },
          createDate: { type: "date" },
          status: { type: "string" }
        }
      }
    },
    pageSize: 20
  },
  columns: gridColumns,
  filterable: {
    mode: "row" // 用行内筛选更直观，也可以用默认弹出式，按需调整
  },
  pageable: true,
  sortable: true
});

2. 填充动态列选择器并实现添加筛选器功能 #

接下来把非固定列填充到下拉选择器，然后给“添加筛选”按钮绑定事件，根据用户选择的列生成对应类型的筛选控件：

// 填充非固定列到选择器
const nonFixedColumns = gridColumns.filter(col => !col.filterable);
const columnSelector = $("#columnSelector");
nonFixedColumns.forEach(col => {
  columnSelector.append(`<option value="${col.field}">${col.title}</option>`);
});

// 存储已添加的筛选列，避免重复添加
const addedFilterFields = new Set();

$("#addFilterBtn").on("click", function() {
  const selectedField = columnSelector.val();
  if (!selectedField || addedFilterFields.has(selectedField)) {
    alert("该列筛选器已添加或未选择列！");
    return;
  }
  
  const column = gridColumns.find(col => col.field === selectedField);
  const filterContainer = $("#dynamicFiltersContainer");
  
  // 根据列类型生成对应的筛选控件
  let filterHtml = '';
  const fieldType = column.schema?.model?.fields[selectedField]?.type || "string";
  switch (fieldType) {
    case "number":
      filterHtml = `
        <div class="dynamic-filter" data-field="${selectedField}">
          <label>${column.title}：</label>
          <input type="number" class="filter-min" placeholder="最小值">
          <span>-</span>
          <input type="number" class="filter-max" placeholder="最大值">
          <button class="remove-filter">移除</button>
        </div>
      `;
      break;
    case "date":
      filterHtml = `
        <div class="dynamic-filter" data-field="${selectedField}">
          <label>${column.title}：</label>
          <input type="text" class="filter-date" placeholder="选择日期">
          <button class="remove-filter">移除</button>
        </div>
      `;
      break;
    default: // 文本/字符串类型
      filterHtml = `
        <div class="dynamic-filter" data-field="${selectedField}">
          <label>${column.title}：</label>
          <input type="text" class="filter-text" placeholder="关键词">
          <button class="remove-filter">移除</button>
        </div>
      `;
  }
  
  filterContainer.append(filterHtml);
  
  // 初始化日期控件（如果是日期类型）
  if (fieldType === "date") {
    $(`.dynamic-filter[data-field="${selectedField}"] .filter-date`).kendoDatePicker();
  }
  
  // 绑定移除筛选器事件
  $(`.dynamic-filter[data-field="${selectedField}"] .remove-filter`).on("click", function() {
    $(this).closest(".dynamic-filter").remove();
    addedFilterFields.delete(selectedField);
    // 移除后重新应用筛选
    applyCombinedFilters();
  });
  
  addedFilterFields.add(selectedField);
  // 添加后立即应用筛选
  applyCombinedFilters();
});

3. 合并固定筛选和动态筛选条件并应用 #

最后写一个函数，把Grid自带的固定筛选条件和动态添加的筛选条件合并，统一应用到数据源：

function applyCombinedFilters() {
  const grid = $("#grid").data("kendoGrid");
  const dataSource = grid.dataSource;
  
  // 获取Grid的固定筛选条件
  const builtInFilters = dataSource.filter()?.filters || [];
  
  // 收集动态筛选条件
  const dynamicFilters = [];
  $(".dynamic-filter").each(function() {
    const field = $(this).data("field");
    const fieldType = gridColumns.find(col => col.field === field).schema?.model?.fields[field]?.type || "string";
    
    switch (fieldType) {
      case "number":
        const minVal = $(this).find(".filter-min").val();
        const maxVal = $(this).find(".filter-max").val();
        if (minVal) {
          dynamicFilters.push({ field: field, operator: "gte", value: parseFloat(minVal) });
        }
        if (maxVal) {
          dynamicFilters.push({ field: field, operator: "lte", value: parseFloat(maxVal) });
        }
        break;
      case "date":
        const dateVal = $(this).find(".filter-date").data("kendoDatePicker")?.value();
        if (dateVal) {
          dynamicFilters.push({ field: field, operator: "eq", value: dateVal });
        }
        break;
      default:
        const textVal = $(this).find(".filter-text").val();
        if (textVal) {
          dynamicFilters.push({ field: field, operator: "contains", value: textVal });
        }
    }
  });
  
  // 合并所有筛选条件（用and逻辑）
  const allFilters = [...builtInFilters, ...dynamicFilters];
  if (allFilters.length > 0) {
    dataSource.filter({ logic: "and", filters: allFilters });
  } else {
    dataSource.filter(null); // 清空所有筛选
  }
}

// 监听固定筛选器的变化，同步应用动态筛选
grid.dataSource.bind("filter", function() {
  applyCombinedFilters();
});

4. 可选：添加样式优化 #

给动态筛选器控件加一点样式，让界面更美观：

.filter-controls {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #eee;
}
.dynamic-filter {
  margin: 8px 0;
  padding: 8px;
  border: 1px solid #ddd;
  display: inline-block;
  margin-right: 10px;
}
.dynamic-filter input {
  margin: 0 5px;
  padding: 4px;
}
.remove-filter {
  margin-left: 5px;
  padding: 2px 6px;
  background: #dc3545;
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

• 动态筛选器的类型要和列的数据类型严格匹配，避免筛选逻辑出错
• 要处理重复添加的情况，用Set存储已添加的列字段
• 当固定筛选器变化时，要重新合并所有筛选条件，确保结果一致
• 如果用的是服务器端分页/筛选，需要把合并后的筛选条件传到后端，调整dataSource.transport.read的参数即可

内容的提问来源于stack exchange，提问作者Lakshan