5

在使用 Prototype.js 的旧应用程序上添加 jQuery tablesorter 功能时遇到问题。我会使用 TableKit，但我想要排序的表是在 AJAX 回调中动态构建 + 清除的，这是 TableKit 无法处理的。工作正常，除非我尝试在 tablesorter 缓存上触发更新：

// Clear the list view
$$('#scrollingList tr.dataRow').each(function(e) { 
    e.remove();
});

addMapMarkers(); // This function rebuild the sortable table

// triggering update to clear tablesorter cache
jQuery('#soundTable').trigger('update');

当“更新”回调抛出错误时 table.tBodies[0] 未定义。

我敲了一个简化的测试用例，如果我不包含prototype.js库，它工作得很好，所以我很确定这是jQuery和Prototype之间的兼容性。我真的不想为了使用tablesorter而在jQuery中重写整个东西，所以任何帮助都会很受欢迎。谢谢。

这是简单示例的代码...

<script type="text/javascript" src="../jquery-latest.js"></script>
<script type="text/javascript" src="../jquery.tablesorter.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js" type="text/javascript"></script>
<script type="text/javascript">

    jQuery(document).ready(function() {
    jQuery("table").tablesorter(); 
    jQuery("#append").click(function() {

    // add some html
    var html = "<tr id='deltest' class='data'><td>Peter</td><td>Parker</td><td>28</td><td>$9.99</td><td>20%</td><td>Jul 6, 2006 8:14 AM</td></tr>";
    html += "<tr class='data'><td>John</td><td>Hood</td><td>33</td><td>$19.99</td><td>25%</td><td>Dec 10, 2002 5:14 AM</td></tr>";
    html += "<tr class='data'><td>Clark</td><td>Kent</td><td>18</td><td>$15.89</td><td>44%</td><td>Jan 12, 2003 11:14 AM</td></tr>";        
    html += "<tr class='data'><td>Bruce</td><td>Almighty</td><td>45</td><td>$153.19</td><td>44%</td><td>Jan 18, 2001 9:12 AM</td></tr>";

    var sorting = [[2,1],[0,0]];

   // append new html to table body 
    jQuery("table tbody").append(html);

    jQuery('tr').click(function(){  
    jQuery(this).remove();
    jQuery('table').trigger('update');
    jQuery("table").trigger("sorton",[sorting]) 

   }) 
  return false;
    });
});
</script>

我有一个动态构建的表，在第一行附加了一个点击处理程序。建表后单击第一行会删除该行并触发更新。正如我所说，没有prototype.js 也可以正常工作，如果包含我认为指向jQuery/Prototype 冲突的错误，则会出现相同的错误。

4

1 回答 1

5

这确实是一个非常有趣的问题。我找到了答案：这是因为 Prototype 添加了一个调用updateDOM 元素的函数，该函数期望更新它们的内容。

我是如何到达那里的，然后是如何处理它：

我是怎么到那里的

首先，我创建了您的代码的实时副本：

我不是 100% 确定其中的 tablesorter 插件部分有效，而且我没有得到与您相同的错误，但是没有 Prototype 会像您期望的那样删除一行，并且使用 Prototype 整个表身体消失。由于整个表体消失可能会导致类似的错误table.tbodies[0] is undefined，我认为这已经足够了。

所以我想：我将从等式中删除 tablesorter。首先，我只删除了script标签和对它的调用，但将jQuery('table').trigger(...)调用留在原处。包含 Prototype 的完整表格仍然消失了，所以它不是 tablesorter 代码本身。所以我评论trigger了这些调用，它开始工作（只是点击的行被删除）。

我看着触发呼叫并想：我敢打赌这是jQuery('table').trigger('update')呼叫。果然，这就是罪魁祸首。把它注释掉，一切都很好；把它留在里面，你的桌身就会消失。

那为什么会这样呢？让我们想想它做了什么trigger：它创建一个合成事件，然后通过它自己的事件处理程序触发它，然后通过调用它来“触发”DOM 元素上的事件（如果存在）。to call any old-style DOM0 handlers on the element. Similarly if you trigger an 'update' event, eventually it will call 'domelement.update(event)例如，如果你触发了一个 'click' 事件，如果 DOM 元素有这样的功能，它最终会调用 'domelement.click(event) 。

这就是 Prototype 的用武之地：Prototype 添加了一个调用update所有 DOM 元素的函数。该函数类似于 jQuery 的html函数：它接受元素的新内容，清除旧内容并添加新内容。该函数在桌面上被调用，清除了tbody. 所以 jQuery 最终会update在元素上调用 Prototype，清除表格的内容。

我们可以在完全不使用 Prototype 的情况下证明这一点，如下所示：

jQuery(function($) {

  var p = document.createElement('p');
  p.innerHTML = "Hi there";
  p.update = function() {
    display("<code>update</code> called on paragraph");
  };

  document.body.appendChild(p);

  $("#theButton").click(function() {
    $("p").trigger("update");
  });

  function display(msg) {
    $("<p>").html(String(msg)).appendTo(document.body);
  }
});

现场复制| 资源

果然，如果我们单击按钮，我们会看到update在段落中调用的消息。

该怎么办

不要打电话jQuery('table').trigger('update')。我在tablesorter 文档中没有看到任何内容说您应该触发一个名为“更新”的事件，因此您可能不需要这样做（尽管文档似乎对细节有点轻）。如果您确实需要这样做，为了使 tablesorter 插件与 Prototype 兼容，您可能必须编辑插件的源代码，以便为该事件使用除“update”之外的其他词（例如，“tableupdate”）。

于 2012-06-17T11:00:20.197 回答