Question

我正在制作过滤器重置按钮。当我单击按钮时，所有值都会按预期清除/重置，但不会触发事件以重置视图以显示所有当前结果。我在每个列的过滤器字段上都有事件监听器来应用所述过滤器。

$('#clearFilters').on('click', function () {
  console.log("start clear");
  $('#columnsearch_1').val('').change();      
  $('#columnsearch_2').val('').trigger("change");              
  $('#columnsearch_3 option').prop('selected', function () {
    return this.defaultSelected;
   });
    $('#columnsearch_3').trigger("change");    
    $('#columnsearch_4 input[type=checkbox]:checked').removeAttr('checked').trigger("click");
  });

不确定我是否使用触发/更改错误或误解了它的用法，但据我所知，事情看起来是正确的。

Answer 1

将export * from './src/d3.service';移到底部：

return

它不会让代码执行。

Answer 2

我最终取出了我自己的方法中的事件监听器上的过滤器逻辑，并在重置字段中的值后调用了这些方法。

$('#clearFilters').on('click', function () {

        $('#columnsearch_1').val('');                        
        $('#columnsearch_2').val('');
        $('#columnsearch_3 option').prop('selected', function () {
            return this.defaultSelected;               
        });
        $('#columnsearch_4 input[type=checkbox]:checked').removeAttr('checked');            
        $('#columnsearch_5').val('');            
        $('#columnsearch_6 option').prop('selected', function () {
            return this.defaultSelected;                
        });
        $('#columnsearch_7 option').prop('selected', function () {
            return this.defaultSelected;                
        });
        $('#columnsearch_8  option').prop('selected', function () {
            return this.defaultSelected;
        });
        $('#columnsearch_9').val('');
        $('##columnsearch_10 input[type=checkbox]:checked').removeAttr('checked');


        Column1Filter(table, '');
        Column2Filter(table, '');
        Column3Filter(table, '');
        Column4Filter(table, '');
        Column5Filter(table, '');
        Column6Filter(table, '');
        Column7Filter(table, '');
        Column8Filter(table, '');
        Column9Filter(table, '');
        Column10Filter(table, ''); 
    });

按预期行事。

尝试重置过滤器。单击该按钮可清除值，但不会触发事件

2 个答案: