使用带有Prototype的jQuery Tablesorter

在使用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');

当“update”回调抛出错误表时,未定义.tBodies [0].

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

这是简单示例的代码……

<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冲突,会得到相同的错误.

这确实是一个非常有趣的问题.我找到了答案：这是因为Prototype在DOM元素中添加了一个名为update的函数,希望更新它们的内容.

我是怎么到达那里的,接下来该做些什么：

我是怎么到那儿的

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

> Without Prototype | source
> With Prototype | source

我并不是100％确定其中的tablesorter插件部分是有效的,而且我没有得到同样的错误,但是如果没有Prototype,那么一行就会被删除,并且使用Prototype整个表格身体消失了.由于整个表体消失可能会导致像table.tbodies [0]未定义的错误,我认为这已经足够了.

所以我想：我会从等式中删除tablesorter.首先,我删除了脚本标记和对它的调用,但保留了jQuery(‘table’).触发器(…)调用.包含Prototype后,完整的表格仍然消失,因此不是tablesorter代码本身.所以我评论了那些触发器调用,它开始工作(只是单击的行被删除).

我查看了触发器调用并认为：我敢打赌它是jQuery(‘table’).触发器(‘update’)调用.当然,那是罪魁祸首.评论一下,一切顺利;把它留下,你的桌子身体消失了.

那为什么会这样呢？让我们考虑一下触发器的作用：它创建一个合成事件,然后通过它自己的事件处理程序触发它,然后通过调用它来激活DOM元素上的事件(如果它存在).例如,如果你触发’click’事件,最终会调用’domelement.click(event)来调用元素上的任何旧式DOM0处理程序.类似地,如果你触发’update’事件,如果DOM元素具有这样的功能,它最终将调用’domelement.update(event).

这就是Prototype的用武之地：Prototype为所有DOM元素添加了一个名为update的函数.该函数类似于jQuery的html函数：它接受元素的新内容,清除旧内容,并添加新内容.该功能在桌面上被调用,消灭了这个功能.所以jQuery最终调用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);
  }
});

Live copy | source

当然,如果我们点击按钮,我们会看到在段落上调用更新的消息.

怎么办呢

不要调用jQuery(‘table’).trigger(‘update’).我在the tablesorter docs中没有看到任何说明你应该触发一个名为“更新”的事件,所以你可能不需要这样做(尽管文档似乎有点细节).如果你真的需要这样做,为了使tablesorter插件与Prototype兼容,你可能需要编辑插件的源代码,以便为该事件使用除“update”之外的其他单词(例如“tableupdate”).