20

現在、削除された行を非表示にしてから .remove() 関数を使用して削除するコードがあります。

ただし、テーブルソートページャープラグインまたは使用しているフィルタープラグインアドオンを更新するたびに、「削除」したままにするのが困難です。削除された行は、もちろんキャッシュされるため、再表示されます。

現在のコードは単純で、現時点ではウィジェットが更新されています

$('.deleteMAP').live("click", function(){
  $(this).closest('tr').css('fast', function() {
 $(this).remove();
 $(".tablesorter").trigger("update");
 $(".tablesorter").trigger("applyWidgets");
  });
})

とにかく、ページャープラグインのキャッシュとテーブルソータープラグインの両方から「行」を削除して、行が削除されたという事実を反映するためにテーブルを「更新」するときに、それらが再び表示されないようにする方法はありますか?キャッシュ経由で死んだ!

4

7 に答える 7

18

私のために働いた解決策を見つけました:

var usersTable = $(".tablesorter");
usersTable.trigger("update")
  .trigger("sorton", [usersTable.get(0).config.sortList])
  .trigger("appendCache")
  .trigger("applyWidgets");

テーブルを編集した場所の後にこれを置きます。

于 2010-01-06T14:34:01.617 に答える
5

この問題をいじくり回した後、jQueryTablesorterとjQueryTablesorterPagerを組み合わせて使用​​すると問題が発生すると結論付けました。 ページャーがない場合は、行を削除して「更新」するだけで十分です。

ページャーも含めると、これを正しく行うのがはるかに難しくなります(正しく気付いたように、キャッシュの問題がいくつかあります)。

ただし、問題の主な理由は、jQuery Tablesorterが、(行の追加/削除という意味で)変更しようとしているテーブルに使用されるとは考えられていないことです。また、TablesorterPagerを追加で使用すると、これはさらに当てはまります。jQueryTablesorterの説明を読み直してください

tablesorterは、THEADタグとTBODYタグを含む標準のHTMLテーブルを、ページを更新せずに並べ替え可能なテーブルに変換するためのjQueryプラグインです。

TableSorterの明確で簡潔なアプリケーション分野。ページ上のajax、編集、削除、追加、.....または同様の用語についても言及していません。静的テーブルの並べ替え専用です。

したがって、実際の解決策は....テーブルを変更できるという意図/可能性を持って最初から構築された別のjQuery「テーブル」プラグインを探し始めることです。そして、これはデフォルトでこれをサポートします(削除、追加、....)


それでも、次の解決策があります。

jQuery Tablesorter + TablesorterPager行の削除(TR)

javascriptソースコードのクイックコピーアンドペースト( TablesorterPagerの例に基づくHTML )

// "borrowed" from John Resig: Javascript Array Remove
// http://ejohn.org/blog/javascript-array-remove/
Array.prototype.remove = function(from, to) {
    var rest = this.slice((to || from) + 1 || this.length);
    this.length = from < 0 ? this.length + from : from;
    return this.push.apply(this, rest);
};

//repopulate table with data from rowCache
function repopulateTableBody(tbl) {
    //aka cleanTableBody from TableSorter code
    if($.browser.msie) {
        function empty() {
            while ( this.firstChild ) this.removeChild( this.firstChild );
        }
        empty.apply(tbl.tBodies[0]);
    } else {
        tbl.tBodies[0].innerHTML = "";
    }
    jQuery.each(tbl.config.rowsCopy, function() {
        tbl.tBodies[0].appendChild(this.get(0));
    });
}
//removes the passed in row and updates the tablesorter+pager
function remove(tr, table) {
    //pager modifies actual DOM table to have only #pagesize TR's
    //thus we need to repopulate from the cache first
    repopulateTableBody(table.get(0));
    var index = $("tr", table).index(tr)-2;
    var c = table.get(0).config;
    tr.remove();
    //remove row from cache too
    c.rowsCopy.remove(index);
    c.totalRows = c.rowsCopy.length;
    c.totalPages = Math.ceil(c.totalRows / config.size);
    //now update
    table.trigger("update");
    //simulate user switches page to get pager to update too
    index = c.page < c.totalPages-1;
    $(".next").trigger("click");
    if(index)
        $(".prev").trigger("click");
}

$(function() {
    var table;
    //make all students with Major Languages removable
    $('table td:contains("Languages")').css("background-color", "red").live("click", function() {
        remove($(this).parents('tr').eq(0), table);
    });

    //create tablesorter+pager
    // CHANGED HERE OOPS
    // var table = $("table#tablesorter");
    table = $("table#tablesorter");
    table.tablesorter( { sortList: [ [0,0], [2,1] ] } )
        .tablesorterPager( { container: $("#pager")}  );
});

私は自分のソリューションであなたのためにテストページを作成しました(赤いTDの==その行を削除するをクリックします)。

http://jsbin.com/uburo(ソースについてはhttp://jsbin.com/uburo/edit )

どのように/なぜ/....コメントが残っている場合

于 2009-12-15T12:32:27.123 に答える
4

tablesorterpager プラグインと tablesorterfilter プラグインの両方を使用すると、注意が必要になります。

$("#gridTable").trigger("update").trigger("appendCache").trigger("applyWidgets");

ページャーに対してのみ機能し、フィルターには別のキャッシュがあります。私はほぼ2時間解決策を探していましたが、ついに次のようなものを書きました:

$("#deleteRowButton").click( function(){
  // index of row which will be deleted
  var index = $('#gridTable tr[rel="'+$("#removeThisID").val()+'"]').index();
  // table with tablesorter
  var table = document.getElementById( 'gridTable' ).config.cache.row;
  // deleting row
  $('#gridTable tr[rel="'+$("#removeThisID").val()+'"]').remove();
  // truly DELETING row, not only mark as deleted - after this list of rows should look like [tr], [tr], [tr], undefined, [tr], ...
  delete( table[index] );
  // tablesorter things
  $("#gridTable").trigger("update").trigger("appendCache").trigger("applyWidgets");
});

input#removeThisID 値と同じ rel 属性を持つ行を削除しています。

次に、tablesorterfilter プラグインを変更します。doFilter 関数で、次の行を見つけます。

// Walk through all of the table's rows and search.
// Rows which match the string will be pushed into the resultRows array.
var allRows = table.config.cache.row;
var resultRows = [];

これらを次のように置き換えます。

// Walk through all of the table's rows and search.
// Rows which match the string will be pushed into the resultRows array.
var allRows = table.config.cache.row;

// refresh cache 'by hand'
var newcache = new Array();
var i = 0;        
for( var a in allRows )
{
  newcache[i] = allRows[a];
  i++;
}
allRows = newcache;
var resultRows = [];

それで全部です...

よろしくフォームポーランド:)

于 2011-05-18T12:23:26.080 に答える
3

これは奇妙なアプローチのように思えますが、実際にはうまくいきました。テーブルは正常にレンダリングされ、ページャーは適切に機能します。

$("#tabeBodyId").empty();
$("#tableId colgroup").remove();

//Update table(done using Ajax)
$("#tableId").tablesorter({widthFixed: true}).tablesorterPager({container: $("#pager")}); 
于 2012-01-25T09:27:39.680 に答える
1

更新のための行がありませんでしたが、ジッターソリューションはほとんど機能していました (以下のコードを参照)。テーブルに新しい TR を挿入できるようにコードを拡張しました。

私は遊んでいて、FFoxの下で動作します.IExplorerをチェックしませんでした。とにかく、まだ修正できなかったバグがあります。新しい TR を追加してから削除しようとすると、テーブルから削除されません :(

// "borrowed" from John Resig: Javascript Array Remove
// http://ejohn.org/blog/javascript-array-remove/
Array.prototype.remove = function(from, to) {
    var rest = this.slice((to || from) + 1 || this.length);
    this.length = from < 0 ? this.length + from : from;
    return this.push.apply(this, rest);
};

//repopulate table with data from rowCache
function repopulateTableBody(tbl) {
    //aka cleanTableBody from TableSorter code
    if($.browser.msie) {
        function empty() {
            while ( this.firstChild ) this.removeChild( this.firstChild );
        }
        empty.apply(tbl.tBodies[0]);
    } else {
        tbl.tBodies[0].innerHTML = "";
    }
    jQuery.each(tbl.config.rowsCopy, function() {
        tbl.tBodies[0].appendChild(this.get(0));
    });
}
//removes the passed in row and updates the tablesorter+pager
function tablesorter_remove(tr, table) {
    //pager modifies actual DOM table to have only #pagesize TR's
    //thus we need to repopulate from the cache first
    repopulateTableBody(table.get(0));
    var index = $("tr", table).index(tr)-2;
    var c = table.get(0).config;
    tr.remove();

    //remove row from cache too
    c.rowsCopy.remove(index);
    c.totalRows = c.rowsCopy.length;
    c.totalPages = Math.ceil(c.totalRows / config.size);

    //now update
    table.trigger("update");
    table.trigger("appendCache");

    //simulate user switches page to get pager to update too
    index = c.page < c.totalPages-1;
    $(".next").trigger("click");
    if(index)
        $(".prev").trigger("click");
}

function tablesorter_add(tr, table) {
    //pager modifies actual DOM table to have only #pagesize TR's
    //thus we need to repopulate from the cache first
    repopulateTableBody(table.get(0));
    table.append(tr);

    //add row to cache too
    var c = table.get(0).config;
    c.totalRows = c.rowsCopy.length;
    c.totalPages = Math.ceil(c.totalRows / config.size);

    //now update
    table.trigger("update");
    table.trigger("appendCache");

    //simulate user switches page to get pager to update too
    index = c.page < c.totalPages-1;
    $(".next").trigger("click");
    if(index)
        $(".prev").trigger("click");

    //Set previous sorting method
    var sorting = c.sortList;
    if(sorting == '')
        sorting = [[0,0]];
    table.trigger("sorton", [sorting]);
}

そして、次のように使用できます。

複雑な HTML を含む新しい TR を追加します。

tablesorter_add('<tr id="'+data.id+' " title="Haz click para editar" onclick="edit('+data.id+')"><td id="'+data.id+'_genus">'+data.genus+'</td><td id="'+data.id+'_species">'+data.species+'</td></tr>', $("#orchid_list"));

TR を削除します。

tablesorter_remove($("#"+orchid_id),$("#orchid_list"));

私の簡略化されたサンプルテーブル:

<table id="orchid_list" class="tablesorter">
<thead>
<tr>
    <th id="genus">Género</th>
    <th id="species">Especie</th>
</tr>
</thead>
<tbody>
    <tr id="2" title="Haz click para editar" onclick="edit('2')">
        <td id="2_genus">Amitostigma</td>

        <td id="2_species">capitatum</td>
    </tr>
    <tr id="4" title="Haz click para editar" onclick="edit('4')">
        <td id="4_genus">Amitostigma</td>
        <td id="4_species">tetralobum</td>
    </tr>
</tbody>
</table>
于 2010-02-15T11:47:30.127 に答える
1

Mottiesのテーブルソーターフォークをご覧ください。彼は、tablesorter と pager プラグインを使用する場合の行の追加/削除の例を作成しました。 http://mottie.github.com/tablesorter/docs/example-pager.html

于 2012-02-12T13:44:48.647 に答える
1

table.splice(index, 1); を使用することをお勧めします。delete( table[index] ); より! 「削除」は配列の要素を空にするだけで、完全には削除されません。私の英語でごめんなさい!=)

于 2011-10-21T13:28:15.240 に答える