关闭 TableSorter 列选择器小部件

Question

我在 Mottie 的出色表格排序器上使用列选择器小部件。效果很好！

但是，当用户单击按钮（使用 CSS 仅弹出模式）时，关闭选择模式的唯一方法是再次单击同一按钮。这与我的应用程序的其余部分不一致，后者会在单击模态框外的任何位置时关闭 bootstrap 模态框。

我知道我可以编写一个 onClick 函数来监视整个 body，但我想知道，是否有一个我错过的 built-in 选项会在用户点击时关闭列选择器点击框外？

Answer 1

"Column" 按钮使用隐藏的复选框 show/hide 弹出窗口 - 它是纯粹的 HTML & CSS 并且完全可自定义。

如果要修改当前设置，请添加以下内容 (demo):

HTML（在"columnSelectorWrapper"之后添加）

<div id="columnSelectorOverlay"></div>

CSS

#columnSelectorOverlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,.5);
  display:none;
}

* 注意：如果您不想要深色覆盖，请删除 background: rgba(0,0,0,.5); 设置。

然后将以下设置添加到 .columnSelector 定义中：

z-index: 1;

然后添加这个javascript

$('#colSelect1').on('change', function() {
  if (this.checked) {
    $('#columnSelectorOverlay').show();
  }
});

$('#columnSelectorOverlay').click(function() {
  $('#colSelect1').prop('checked', false);
  $(this).hide();
});

关闭 TableSorter 列选择器小部件

Dismiss TableSorter Column Selector Widget

tablesorter