5

Prototype.js を使用する古いアプリに jQuery テーブルソーター機能を追加すると問題が発生します。私は 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 がupdateコンテンツの更新を期待する DOM 要素に呼び出される関数を追加するためです。

どうやってそこにたどり着いたか、次にそれについて何をすべきか：

どうやってそこにたどり着いたか

まず、コードのライブ コピーを作成しました。

テーブルソーター プラグイン部分が機能するかどうかは 100% 確信が持てず、同じエラーが発生することはありませんが、Prototype を使用しないと期待どおりに 1 行が削除され、Prototype を使用するとテーブル全体が削除されます。体が消える。テーブル本体が全部消えると みたいなエラーになるかもしれないので、table.tbodies[0] is undefinedそれでいいのかなと。

だから私は考えました：テーブルソーターを方程式から削除します。まず、タグとその呼び出しだけを削除しまし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)たとえば、「クリック」イベントをトリガーすると、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 プラグインを Prototype と互換性を持たせるために、プラグインのソースを編集して、そのイベントに「update」以外の別の単語 (「tableupdate」など) を使用する必要がある場合があります。

于 2012-06-17T11:00:20.197 に答える