使用带有Prototype的jQuery Tablesorter

Question

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

Answer 1

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

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

我是怎么到那儿的

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

• 没有原型 | 资源
• 使用Prototype | 资源

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

所以我想:我会从等式中删除tablesorter.首先,我删除了script标签和对它的调用,但保留了jQuery('table').trigger(...)呼叫.包含Prototype后,完整的表格仍然消失,因此不是tablesorter代码本身.所以我评论了这些trigger调用,它开始工作(只是被删除的点击行).

我看了一下触发器电话并想:我打赌这是jQuery('table').trigger('update')电话.当然,那是罪魁祸首.评论一下,一切顺利; 把它留下,你的桌子身体消失了.

那为什么会这样呢？让我们考虑一下trigger:它创建一个合成事件,然后通过它自己的事件处理程序触发它,然后通过调用它来激活DOM元素上的事件(如果它存在).例如,如果你触发'click'事件,to call any old-style DOM0 handlers on the element. Similarly if you trigger an 'update' event, eventually it will call 'domelement.update(event)如果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").