Google Charts筛选场景下jQuery重置按钮无法启用问题排查

核心原因 #

你遇到的按钮无法启用问题，本质是图表重绘触发的ready事件会重复重置按钮状态：

• 在filter_st_charts中调用st_chart.draw()后，Google Charts会触发ready事件；
• 而ready事件回调里每次都会执行$('.button-reset').button('disable')，直接覆盖了你刚设置的启用状态。

另外还有两个次要问题：

1. clearFilter中移除选中类的写法错误，无法正确清除选中状态；
2. ready事件中重复初始化accordion和button组件，可能导致事件绑定重复或状态混乱。

修复方案 #

1. 调整按钮初始化逻辑，避免重复重置 #

将按钮的初始化、禁用、点击事件绑定逻辑移到click==0的判断分支内，只在第一次页面加载时执行：

if(click==0){
  $.each(filt_values.filter(uniquelists), function(index, value) {
    $('.st_selectable').append('<li>' + value + '</li>');
  });

  // 仅首次加载时初始化按钮
  $('.button-reset').button();
  $('.button-reset').button('disable');
  $('.button-reset').on('click', clearFilter);
}

2. 修复clearFilter中的选中类移除逻辑 #

移除类名时不能使用选择器语法（空格），直接传入要移除的类名：

// 错误写法：removeClass('st_selectable .ui-selected')
accordion.find('.st_selectable li').removeClass('ui-selected');

3. 完善filter_st_charts的按钮状态控制 #

添加else分支，当没有选中项时禁用按钮：

if(st_selectedvalues.length > 0){        
  $('.st_selectable').closest('.st_accordion').find('.button-reset').button('enable');
  // ... 其他代码
} else {
  // 无选中项时禁用按钮
  $('.st_selectable').closest('.st_accordion').find('.button-reset').button('disable');
}

4. 避免重复初始化accordion #

将accordion的初始化也移到click==0分支内，防止重复初始化导致的组件状态异常：

if(click==0){
  // ... 其他首次加载代码

  $('.st_accordion').accordion({
    active: false,
    create: function () {
      $('.st_selectable').selectable({
        filter: '*',
        stop: filter_st_charts
      });
    },
    collapsible: true,
    heightStyle: 'content'
  });
}

修改后的完整JavaScript代码 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"/> 
<script src="https://www.gstatic.com/charts/loader.js"></script> 
<script type="text/javascript">
var click = 0;

function filter_st_charts(){
  var st_chartview={};
  var st_selectedvalues = [];

  var r_row;
  var r_view = {
    columns: [0]
  };       

  $('.st_selectable li.ui-selected').each(function(index, selected) {        
    st_selectedvalues.push(selected.innerHTML);
  });

  if(st_selectedvalues.length > 0){        
    $('.st_selectable').closest('.st_accordion').find('.button-reset').button('enable');                    
    for (var i = 0; i < st_selectedvalues.length; i++) {            
      r_row = r_columnTable.getFilteredRows([{column: 1, value: st_selectedvalues[i]}])[0];
      r_view.columns.push(r_columnTable.getValue(r_row, 0));
    }        
  } else {
    // 无选中项时禁用按钮
    $('.st_selectable').closest('.st_accordion').find('.button-reset').button('disable');
  }
  st_chart.setView(r_view);
  st_chart.draw();
}

onload_st_filter_values = st_initState.selectedValues;
google.visualization.events.addListener(st_chart,'ready',function() {
  var filt_values = onload_st_filter_values;
  console.log("Inside ready");
  if(click==0){
    $.each(filt_values.filter(uniquelists), function(index, value) {
      $('.st_selectable').append('<li>' + value + '</li>');
    });

    // 仅首次加载初始化accordion和按钮
    $('.st_accordion').accordion({
      active: false,
      create: function () {
        $('.st_selectable').selectable({
          filter: '*',
          stop: filter_st_charts
        });
      },
      collapsible: true,
      heightStyle: 'content'
    });

    $('.button-reset').button();
    $('.button-reset').button('disable');
    $('.button-reset').on('click', clearFilter);
  }

  click++
})

function clearFilter(sender) {
  console.log("Inside Clear Filter");
  var accordion;
  sender.preventDefault();
  sender.stopPropagation();

  accordion = $(sender.target).closest('.st_accordion');
  // 修复removeClass的写法
  accordion.find('.st_selectable li').removeClass('ui-selected');
  accordion.accordion('option', 'active', false);
  $(sender.target).closest('button').button('disable');
  filter_st_charts();
  return false;
}
</script>

验证要点 #

• 选中筛选项后，重置按钮应正常启用；
• 点击重置按钮，筛选项被清空，按钮恢复禁用状态；
• 图表渲染和筛选功能保持正常。

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