解决jQuery树形复选框多选时仅传递单一筛选值的问题

我明白你现在遇到的困扰——每次多选树形日历里的月份（或季度、年份）时，Tableau的筛选只会保留最后选中的那个值，之前的选择都被覆盖了。这是因为你的当前代码每次只处理单个选中/取消的节点，并且用tableau.FilterUpdateType.REPLACE直接替换了筛选条件，没有收集所有已选中的同类型节点值。

下面是完整的修复方案，核心思路是每次复选状态变化时，收集所有当前选中的对应类型的节点值，再统一传递给Tableau进行多值筛选：

步骤1：添加获取选中值的辅助函数 #

先写一个通用函数，用来从Treeview中获取所有选中的指定类型的节点文本：

function getSelectedValuesByType(targetType) {
  // 获取树的所有节点数据
  const allNodes = $('#Dyanmic').treeview('getNodes');
  // 筛选出已选中且类型匹配的节点，收集它们的text值
  return allNodes.filter(node => {
    // 注意：你的JSON里有些节点（比如17-02）没有type属性，这里设置默认值为月份类型
    const nodeType = node.type || 'M';
    return node.checked && nodeType === targetType;
  }).map(node => node.text);
}

步骤2：修改筛选函数支持多值 #

更新你的monthFilter、quarterFilter、yearFilter函数，让它们接收数组类型的参数，适配多值筛选：

<script>
function yearFilter(selectedYears) {
  const sheet = viz.getWorkbook().getActiveSheet();
  if (selectedYears.length === 0) {
    sheet.clearFilterAsync("Year");
  } else {
    sheet.applyFilterAsync("Year", selectedYears, tableau.FilterUpdateType.REPLACE);
  }
}

function quarterFilter(selectedQuarters) {
  const sheet = viz.getWorkbook().getActiveSheet();
  if (selectedQuarters.length === 0) {
    sheet.clearFilterAsync("Quarter");
  } else {
    sheet.applyFilterAsync("Quarter", selectedQuarters, tableau.FilterUpdateType.REPLACE);
  }
}

function monthFilter(selectedMonths) {
  const sheet = viz.getWorkbook().getActiveSheet();
  if (selectedMonths.length === 0) {
    sheet.clearFilterAsync("Month");
  } else {
    sheet.applyFilterAsync("Month", selectedMonths, tableau.FilterUpdateType.REPLACE);
  }
}
</script>

步骤3：修改树节点的事件处理逻辑 #

不管是选中还是取消选中节点，都重新收集对应类型的所有选中值，再调用筛选函数：

$('#Dyanmic').treeview({
  data: jsonCalendarTreeStructure,
  showCheckbox: true,
  multiSelect: true,
});

// 选中节点事件
$('#Dyanmic').on('nodeChecked', function (event, data) {
  const nodeType = data.type || 'M';
  switch(nodeType) {
    case "Y":
      yearFilter(getSelectedValuesByType("Y"));
      break;
    case "Q":
      quarterFilter(getSelectedValuesByType("Q"));
      break;
    case "M":
      monthFilter(getSelectedValuesByType("M"));
      break;
  }
});

// 取消选中节点事件
$('#Dyanmic').on('nodeUnchecked', function (event, data) {
  const nodeType = data.type || 'M';
  switch(nodeType) {
    case "Y":
      yearFilter(getSelectedValuesByType("Y"));
      break;
    case "Q":
      quarterFilter(getSelectedValuesByType("Q"));
      break;
    case "M":
      monthFilter(getSelectedValuesByType("M"));
      break;
  }
});

关键说明 #

1. 为什么这样有效？：每次复选状态变化时，我们都会遍历整个树的节点，收集所有当前选中的同类型值，然后用REPLACE把整个值数组传递给Tableau，这样就能实现多值筛选的效果，而不是每次只替换成单个值。
2. 关于节点type属性：你的示例JSON里有些节点（比如17-02）没有type属性，我在代码里设置了默认值为M（月份），你可以根据实际数据结构调整这个默认值，或者补全所有节点的type属性，避免筛选逻辑出错。
3. Tableau筛选支持：Tableau的applyFilterAsync方法本身就支持接收数组作为筛选值，所以直接传递收集到的数组即可实现多值筛选。

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