jQuery Tablesorter - отключенные заголовки показывают индикатор выполнения, sortEnd никогда не запускается - PullRequest
Новая
       17

jQuery Tablesorter - отключенные заголовки показывают индикатор выполнения, sortEnd никогда не запускается

1 голос
/ 12 июня 2010

Я объединяю Tablesorter ' отключить заголовки, используя опции ' и функцию ' запускает sortStart / sortEnd ' и столкнулся с проблемой. Следующий код работает нормально по большей части, НО: когда вы нажимаете на отключенный заголовок, появляется индикатор прогресса #overlay, который никогда не исчезает. 

<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>

Любые идеи о том, как я мог бы это исправить, чтобы ничего не происходило при нажатии отключенных заголовков? Спасибо!

Ответы [ 2 ]

1 голос
/ 12 февраля 2012

Намного проще. Искать эти строки ... 

$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;
1 голос
/ 12 июня 2010

EDIT:

Это решение с использованием некоторых модификаций, которые я сделал для плагина. Природа плагина была такова, что вы не можете знать, по какому заголовку щелкнули (что мне кажется очень странным). Если хотите, я опубликую внесенные мной изменения. 

   // 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();
    }
});

EDIT:

Вот изменения, которые я внес в плагин:

Просто для небольшого фона sortStart и sortEnd - это пользовательские события, привязанные к таблице. В плагине событие click привязано к заголовкам, что, в свою очередь, запускает пользовательское событие sortStart в таблице. Из-за этого в обратном вызове нет ссылки на фактический элемент, который получил щелчок.

sortEnd просто срабатывает немного дальше в том же событии щелчка для заголовков.

Я не знаю, почему автор сделал это таким образом, но опять же, я не знаю, почему автор использовал общее слово, такое как "заголовок", для обозначения элементов заголовка. Это просто напрашивается на неприятности.

В любом случае, вот исправления. Я собираюсь дать номера строк из последней неустановленной версии плагина.

Шаг 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:

Затем перейдите к функции appendToTable() в строке 243 , где вы увидите: 

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);

Опять же, я не знаю, будут ли какие-либо побочные эффекты. Хотя я в этом сомневаюсь. Дайте ему шанс, и дайте мне знать, как у вас получилось.

...