如何不修改jQuery QueryBuilder源码实现Rule结构自定义扩展

无需修改源码的实现方案 #

你可以通过QueryBuilder原生提供的事件钩子和扩展机制实现需求，完全不需要改动核心源码：

1. 替代第2242行的属性注入逻辑 #

QueryBuilder的规则实例创建后会触发afterCreateRule事件，你可以在该事件中完成to_upper属性的绑定和同步：

$('#builder').queryBuilder({
  // 你的原有配置
  plugins: ['你的大小写转换插件名', 'sql-support']
}).on('afterCreateRule.queryBuilder', function(e, rule) {
  // 规则初始化时设置默认to_upper值
  if (rule.model?.filter) {
    rule.model.filter.to_upper = rule.model.get('to_upper') ?? false;
  }
  // 监听属性变更自动同步到filter
  rule.model.on('change:to_upper', function(model, value) {
    model.filter.to_upper = value;
  });
});

2. 替代sqlToRule部分的属性注入逻辑 #

QueryBuilder的changer:sqlToRule本身就是开放的修改钩子，你直接扩展该钩子即可注入自定义属性，不需要改核心代码：

$.fn.queryBuilder.extend({
  'changer:sqlToRule': function(rule, data) {
    rule.to_upper = data.to_upper ?? false;
    return rule;
  }
});

3. 补充SQL生成逻辑（可选，根据你的需求） #

如果需要在生成SQL时自动应用大写转换，可以监听ruleToSQL事件实现：

$('#builder').on('ruleToSQL.queryBuilder', function(e, rule, sqlObj) {
  if (rule.to_upper) {
    // 替换字段和值为大写包裹格式
    sqlObj.sql = sqlObj.sql.replace(/^(\w+)\s*([=<>!]+)\s*(.+)$/, (_, field, op, val) => {
      return `UPPER(${field}) ${op} UPPER(${val})`;
    });
  }
});

4. 按钮交互逻辑 #

你的自定义按钮点击时直接修改规则模型的to_upper属性即可：

// 插件内部的按钮点击处理
$(document).on('click', '.to-upper-toggle-btn', function() {
  const rule = $(this).closest('.query-builder-rule').data('queryBuilderRule');
  const currentVal = rule.model.get('to_upper');
  rule.model.set('to_upper', !currentVal);
  // 自行处理按钮选中态切换
  $(this).toggleClass('active', !currentVal);
});

以上方案所有自定义属性会自动在规则导入导出、SQL序列化/反序列化流程中保留，完全不需要修改QueryBuilder核心的Rule结构定义。

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