jqGrid如何实现国家、城市双列联动的自定义复杂过滤器？

jqGrid官方提供的标准过滤器组件不原生支持跨列联动的多级复选筛选效果，需要对筛选控件做自定义扩展即可实现需求，具体落地方案如下：

核心实现步骤 #

• 自定义列筛选控件
  在colModel中为国家、城市两列配置自定义筛选渲染规则，使用custom_element和custom_value属性替换默认的筛选输入框，支持多选和全选能力，参考配置：

  colModel: [
    // 其余列配置省略
    {
      name: "country",
      index: "country",
      width: 150,
      stype: "custom", // 声明使用自定义筛选控件
      searchoptions: {
        custom_element: renderCountryDropdown,
        custom_value: getDropdownValue,
        sopt: ["in"] // 筛选逻辑用in匹配多个值
      }
    },
    {
      name: "city",
      index: "city",
      width: 150,
      stype: "custom",
      searchoptions: {
        custom_element: renderCityDropdown,
        custom_value: getDropdownValue,
        sopt: ["in"]
      }
    }
  ]
  

• 实现国家下拉的联动逻辑
  提前维护国家和城市的映射关系（可从后端接口拉取），在国家下拉的change事件中动态更新城市下拉的可选范围：

  // 国家-城市映射表示例，可根据实际业务调整
  const countryCityMap = {
    "中国": ["北京", "上海", "广州", "深圳", "杭州"],
    "美国": ["纽约", "洛杉矶", "芝加哥", "旧金山", "休斯顿"],
    "日本": ["东京", "大阪", "京都", "横滨", "名古屋"]
  };
  let cityDropdownInstance = null; // 存储城市下拉实例方便后续更新
  
  // 渲染国家下拉
  function renderCountryDropdown(value) {
    // 可配合jQuery MultiSelect等第三方插件实现带全选的多选下拉效果
    const $select = $('<select multiple="multiple"></select>');
    $select.append('<option value="all">全选</option>');
    Object.keys(countryCityMap).forEach(country => {
      $select.append(`<option value="${country}">${country}</option>`);
    });
    // 绑定联动事件
    $select.on("change", function() {
      const selectedCountries = $(this).val() || [];
      let validCities = [];
      if (selectedCountries.includes("all")) {
        // 国家全选时加载所有城市
        Object.values(countryCityMap).forEach(cities => validCities.push(...cities));
      } else {
        // 仅加载选中国家对应的城市
        selectedCountries.forEach(country => validCities.push(...countryCityMap[country]));
      }
      // 更新城市下拉选项
      cityDropdownInstance.empty().append('<option value="all">全选</option>');
      validCities.forEach(city => cityDropdownInstance.append(`<option value="${city}">${city}</option>`));
      // 触发表格重新筛选
      $("#gridId")[0].triggerToolbar();
    });
    return $select[0];
  }
  
  // 渲染城市下拉
  function renderCityDropdown(value) {
    const $select = $('<select multiple="multiple"></select>');
    cityDropdownInstance = $select;
    // 初始默认加载所有城市
    $select.append('<option value="all">全选</option>');
    Object.values(countryCityMap).forEach(cities => {
      cities.forEach(city => $select.append(`<option value="${city}">${city}</option>`));
    });
    return $select[0];
  }
  
  // 获取下拉选中值的通用方法
  function getDropdownValue(elem) {
    const val = $(elem).val();
    return val?.includes("all") ? "" : val.join(",");
  }
  

• 自定义筛选规则
  在过滤器的beforeSearch回调中处理多选值的匹配逻辑，适配后端查询或者本地筛选：

  $("#gridId").jqGrid("filterToolbar", {
    beforeSearch: function() {
      const postData = $(this).jqGrid("getGridParam", "postData");
      // 可在此处对国家、城市的多选值做二次处理，拼接为后端接口要求的查询参数格式
      // 若使用本地数据筛选，可在此处自定义匹配规则，return false阻止默认筛选逻辑
    },
    stringResult: true,
    defaultSearch: "cn"
  });
  

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