如何在queryBuilder的getRules返回结果中获取选中字段的optgroups对象？

Got it, let’s work through this problem together. The core issue here is that the queryBuilder('getRules') method doesn’t include optgroup metadata for selected fields, but you need to attach that optgroups object (like { core: { en: 'Item' } }) to each rule in your final JSON output. Here are three practical, actionable approaches to make this happen:

1. 预定义字段与Optgroup的映射表 #

Since you’re the one configuring the Query Builder’s fields (and their associated optgroups), you can create a static lookup object that maps each field ID to its optgroup data. This is the simplest approach for static field configurations.

First, set up your mapping:

// 提前定义好所有字段对应的optgroup信息
const fieldOptgroupMap = {
  price: { core: { en: 'Item' } },
  name: { product: { en: 'Product Details' } },
  category: { taxonomy: { en: 'Category' } }
  // 补充其他字段的映射
};

Then, after fetching the raw rules, iterate through them and inject the optgroup data:

// 获取原始规则
const rawRulesOutput = $('#queryBuilder').queryBuilder('getRules');

// 给每个规则添加对应的optgroups属性
const rulesWithOptgroups = rawRulesOutput.rules.map(rule => ({
  ...rule,
  optgroups: fieldOptgroupMap[rule.id] || {} // 没有匹配的字段就返回空对象兜底
}));

// 组装最终的JSON输出
const finalOutput = {
  ...rawRulesOutput,
  rules: rulesWithOptgroups
};

2. 从Query Builder配置动态构建映射 #

If your fields are defined in a configuration object (which they almost always are), you can dynamically generate the optgroup mapping instead of hardcoding it. This keeps your code in sync if you ever update your field definitions.

Example implementation:

// 假设这是你的Query Builder配置
const queryBuilderConfig = {
  fields: [
    {
      id: 'price',
      label: 'Price',
      type: 'double',
      optgroup: { core: { en: 'Item' } }
    },
    {
      id: 'name',
      label: 'Product Name',
      type: 'string',
      optgroup: { product: { en: 'Product Details' } }
    }
    // 其他字段配置...
  ]
};

// 动态生成字段-optgroup映射
const fieldOptgroupMap = queryBuilderConfig.fields.reduce((map, field) => {
  map[field.id] = field.optgroup || {};
  return map;
}, {});

// 接下来用和方法1一样的逻辑，给raw rules添加optgroups
const rawRulesOutput = $('#queryBuilder').queryBuilder('getRules');
const rulesWithOptgroups = rawRulesOutput.rules.map(rule => ({
  ...rule,
  optgroups: fieldOptgroupMap[rule.id] || {}
}));

const finalOutput = { ...rawRulesOutput, rules: rulesWithOptgroups };

3. 监听字段选择事件，实时注入Optgroup #

Another approach is to hook into Query Builder’s field selection events to attach optgroup data directly to the rule when the user picks a field. This way, when you call getRules(), the optgroup info is already part of the rule object.

Note: Event names may vary slightly depending on your Query Builder version (this example uses jQuery Query Builder’s event syntax):

// 监听字段选中事件
$('#queryBuilder').on('queryBuilder.fieldSelected', function(e, rule) {
  // 从配置中找到当前选中字段的信息
  const selectedField = queryBuilderConfig.fields.find(field => field.id === rule.field);
  
  if (selectedField?.optgroup) {
    // 将optgroup数据直接附加到rule对象上
    rule.optgroups = selectedField.optgroup;
  }
});

// 之后调用getRules()时，返回的规则就已经包含optgroups了
const finalOutput = $('#queryBuilder').queryBuilder('getRules');

额外注意事项 #

• If you’re using dynamic fields (loaded via AJAX), make sure to update your optgroup mapping or re-attach event listeners after fields are loaded.
• Some Query Builder versions may filter out custom properties when returning rules. If this happens, check the documentation for parameters like get_all: true (e.g., queryBuilder('getRules', { get_all: true })) to ensure custom attributes are preserved.
• If your optgroups are multilingual, ensure the mapping uses the correct language variant you need in your JSON output.

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