如何在DevExtreme FilterBuilder对话框实时显示筛选表达式

你的实现思路核心逻辑是对的：监听筛选值变更、调用getFilterExpression获取表达式、同步渲染预览内容，这部分逻辑没有问题，但直接用jQuery手动插入DOM的实现方式存在兼容性隐患，有更贴合组件原生能力的实现方案。

1. 自定义FilterBuilder弹窗内容区 #

不要在DOM渲染完成后手动插入节点，直接利用filterBuilderPopup的弹窗生命周期事件追加预览容器，避免重复渲染、DOM结构不兼容问题：

$("#grid").dxDataGrid({
  // 其余Grid配置省略
  filterBuilderPopup: {
    width: 600,
    onShowing(e) {
      const $content = e.component.content();
      // 避免重复追加预览容器
      if ($content.find(".filter-expr-preview").length) return;
      // 追加预览区容器
      $("<div>")
        .addClass("filter-expr-preview")
        .css({
          padding: "12px 16px",
          marginTop: "12px",
          borderTop: "1px solid #e5e5e5",
          background: "#fafafa"
        })
        .appendTo($content);
    },
    onShown(e) {
      // 弹窗打开时初始化渲染已有筛选条件
      const fbInstance = $("#grid").dxDataGrid("instance").getFilterBuilder();
      updateFilterPreview(fbInstance.getFilterExpression());
    }
  }
})

2. 监听筛选条件变更实时更新预览 #

通过Grid的filterBuilder配置项直接绑定组件的valueChanged事件，不需要手动查找DOM节点绑定事件：

$("#grid").dxDataGrid({
  // 其余Grid配置省略
  filterBuilder: {
    onValueChanged(e) {
      const expr = e.component.getFilterExpression();
      updateFilterPreview(expr);
    }
  }
})

// 抽离预览更新逻辑
function updateFilterPreview(expression) {
  const $preview = $(".filter-expr-preview");
  $preview.html(`
    <div style="font-weight: 500; margin-bottom: 8px;">生成的筛选表达式：</div>
    <code style="display: block; white-space: pre-wrap;">${JSON.stringify(expression, null, 2)}</code>
  `);
}

• 手动DOM插入方案：功能可实现，但依赖组件内部DOM结构，DevExtreme版本迭代如果调整弹窗DOM层级、类名，逻辑会直接失效，且需要额外处理弹窗重复打开时的节点清理问题。
• 基于公开API的实现方案：所有逻辑都走组件暴露的官方事件和方法，不触碰内部DOM结构，跨版本兼容性更强，代码维护成本更低。

实现效果参考：

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