私は、Rails経由でデータベースからのデータを表示するHandsontableを作成しました。現在、表に99行あります。左端の「選択済み」列には、ユーザーが行を選択したかどうかを示す疑似チェックボックス（カスタムセルレンダラーを使用）が表示されます。データスキーマには、「選択された」プロパティも含まれます。ユーザーが1つまたは複数の列を選択すると、対応する行の「選択された」プロパティがデータオブジェクト内でトグルされ、変更されたセルが変更を反映するように再描画されます。Handsontable - 過剰なセルレンダリングでアプリケーションが遅くなる
編集可能な列に加えられた変更に対して、表示されているすべての「選択済み」セルが再描画されるという問題があります。デモを行うには、添付のjsFiddleで、左端の「選択済み」列と右端の「Prom」列の両方を編集できます。表の上のカウンタは、「選択された」セルレンダラが呼び出された回数を示します（簡略化のため、チェックボックスではなく「選択された」列にXが表示されます）。行1の「選択された」セルをクリックするだけで、selectColRendererが21回呼び出されることがわかります。同じセルをクリックして5行目（「選択済み」列に残っている）までドラッグすると、セルレンダラーが105回呼び出されます。 「Prom」列セルのいずれかにテキストを入力すると、セルレンダラへの21回の呼び出しも生成されます。
私のアプリケーションでは、データモデル内の99個のオブジェクトすべてを選択する「すべて選択」ボタンがあります。これらの行のうち28行が表示されている場合、selectColRendererは99 * 28回→ほぼ2800回のセルレンダラ呼び出しと呼ばれます。変更がブラウザに反映されるまでには3〜4秒かかります。
これは（簡体字）、セルレンダラー機能である：
var selectColRenderer = function(instance, td, row, col, prop, value, cellProperties) {
// the following 2 lines are only part of the fiddle
renderCount++;
$("#render_count").val(renderCount);
if (instance.getSourceDataAtRow(cellProperties.row).selected == true) {
$(td).html("X");
} else {
$(td).html("");
}
};
そして、これは、データモデルを更新機能である：
afterSelectionEnd: function(r1, c1, r2, c2) {
hot = $("#list_table").handsontable("getInstance");
if (c1 === 0 && c2 === 0) {
for (r = r1; r <= r2; r++) {
objRow = hot.getCellMeta(r, 0).row;
var selected = (hot.getSourceDataAtRow(objRow).selected)
hot.setDataAtRowProp(r, "selected", !selected);
}
}
},
この動作を回避する方法はありますか？私が何百もの行を持つテーブルを持っていれば、パフォーマンスは受け入れられません。 Handsontableの仕組みですか、何か間違っていますか？
はフィドル：