Question

我正在组合Tablesorter的“disable headers using options”函数和“trigger sortStart / sortEnd”函数，并遇到了一个问题。以下代码在大多数情况下工作正常，但是：当您单击禁用的标题时，将显示进度指示#overlay div并且永远不会消失。

<script type="text/javascript" id="js">
$(document).ready(function() {
  // call the tablesorter plugin, the magic happens in the markup
  $("#projectTable").tablesorter({ 
      // pass the headers argument and assing a object 
      headers: { 
          // assign the secound column (we start counting zero) 
          1: { 
              // disable it by setting the property sorter to false 
              sorter: false 
          }, 
          // assign the third column (we start counting zero) 
          2: { 
              // disable it by setting the property sorter to false 
              sorter: false
          } 
      } 
  });

  //assign the sortStart event
  $("#projectTable").bind("sortStart",function() {
      $("#overlay").show();
  }).bind("sortEnd",function() {
      $("#overlay").hide();
  });
}); </script>

有关如何解决此问题的任何想法，以便在单击禁用的标题时根本不会发生任何事情？谢谢！

Answer 1

编辑：

这是一个使用我对插件进行的一些修改的解决方案。插件的本质是你不知道点击了哪个标题（这对我来说似乎很奇怪）。如果您愿意，我会发布我所做的更改。

   // Works only with plugin modification
$("#projectTable").bind("sortStart",function(e) { 
    if( $(e.target).hasClass('header') ) {
        $("#overlay").show();
    }
}).bind("sortEnd",function(e) {
    if( $(e.target).hasClass('header') ) {
        $("#overlay").hide();
    }
});

修改

以下是我对插件所做的更改：

为了给出一些背景知识，sortStart和sortEnd是绑定到表格的自定义事件。在插件中，click事件绑定到标头，从而触发表上的sortStart自定义事件。因此，回调中没有引用接收到点击的实际元素。

sortEnd只是在标题的同一点击事件中稍微向下触发。

我不知道为什么作者这样做了，但话又说回来，我不知道为什么作者使用像“header”这样的常用词来表示标题元素。那只是在寻找麻烦。

无论如何，这里有修复。我将从最新的未经启发的插件版本中提供行号。

第1步：

在 520 行附近，您会看到为代码设置点击的代码：

// apply event handling to headers // this is to big, perhaps break it out? $headers.click(function(e) { $this.trigger("sortStart");

...改为：

// apply event handling to headers // this is to big, perhaps break it out? $headers.click(function(e) { $(e.target).trigger("sortStart"); // e.target refers to the clicked element. // The event will bubble up to the table, // and fire.

第2步：

然后在 578 附近向下走一点，你会看到这段代码：

setTimeout(function() { //set css for headers setHeadersCss($this[0],$headers,config.sortList,sortCSS); appendToTable($this[0],multisort($this[0],config.sortList,cache); },1);

...改为：

setTimeout(function() { //set css for headers setHeadersCss($this[0],$headers,config.sortList,sortCSS); // Passes the element clicked to appendToTable() ------------------v appendToTable($this[0],multisort($this[0],config.sortList,cache), e.target); },1);

第3步：

然后转到 243 行周围的appendToTable()功能，您将看到：

function appendToTable(table,cache) {

...将其更改为：

// Receives element we passed --------v function appendToTable(table,cache,theHeader) {

第4步：

最后，在相同的appendToTable()函数中，在 285 附近，您会看到：

setTimeout(function() { $(table).trigger("sortEnd"); },0);

...将其更改为：

setTimeout(function() { // Triggers the sortEnd event on the element we passed in $(theHeader).trigger("sortEnd"); },0);

同样，我不知道是否会有任何副作用。不过我有点怀疑。试一试，让我知道原来是怎么回事。

Answer 2

更简单的方法。搜索这些行...

$headers.click(function(e) {
$this.trigger("sortStart");
var totalRows = ($this[0].tBodies[0] && $this[0].tBodies[0].rows.length) || 0;

并将其更改为此...

$headers.click(function(e) {
$this.trigger("sortStart");
//Triggers SortEnd if header disabled
if(this.sortDisabled){ $(this).trigger("sortEnd"); }
var totalRows = ($this[0].tBodies[0] && $this[0].tBodies[0].rows.length) || 0;

jQuery Tablesorter - 禁用标题显示进度条，sortEnd从未触发

2 个答案:

第1步：

第2步：

第3步：

第4步：