1

状況

さて、これが取引です。JavaScriptの知識を向上させるために自分自身に挑戦を設定しました。この課題には、完全にフロントエンドのExcelのようなスプレッドシートの作成が含まれます。現在私が持っているのは、テキスト入力を可能にする15列と30行のテーブルセルを持つテーブルです。Excelの場合と同様に、各セルには独自の参照ID（A2、F14、G9など）があります。

           _________________
     _____|__A__|__B__|__C__|
    |__1__|__8__|_____|_____|
    |__2__|_100_|__6__|_____|
    |__3__|_300_|_____|__5__| etc...

これらのセルを使用すると、Excelのようなライブ数式を内部に配置でき、スプレッドシートはそれに応じて更新されます。次に例を示します。

           _____________________
     _____|__________C__________|
    |__1__| =(SUM(A1:A3)*C3)+B2 |

    Would translate to: var n = ((8+100+300)*5)+6;

問題

これですべて問題ありませんが、問題があります。1つのセルだけを更新するたびに、データが正確であることを確認するために、すべてのセルをループして更新する必要があります。上記の大まかな例のように使用可能なセルが9つしかない場合、これは大きな問題ではありませんが、現在のテーブルには15列と30行があります... 450個です！

私は現在、ブラウザーのフォーカスがセルを離れるたびに、背後のJavaScriptがループして各セルを更新し、データがすべて正しいことを確認するように設定しています。これ自体が、データを含むセルが5つまたは6つしかない場合にわずかな遅延を引き起こします。そのため、スプレッドシートのすべてのセルにデータを入力するまでに、ブラウザが停止するのではないかと心配しています。

私はおそらく不可能を夢見ていますが、理想的には、その場で更新される数百の列と行を含むスプレッドシートを提示できるようにしたいと思います。ですから、皆さんへの私の2つの質問は次のとおりです。

  • ラグを防ぐために何ができますか？
  • その過程でインターネットを壊すことなく、15列以上と30行以上の数式をサポートすることさえ可能でしょうか？
4

2 に答える 2

2

すべてのセルで「更新」を実行する必要はありません。1つのセルが更新されるときに、その中に関数がある場合、そのセルは特定のセル、行、または列を参照します。その参照が含まれているため、それを解析して、更新する必要のあるセルを判別できます。たとえば=(SUM(A1:A3)*C3)+B2、A1、A2、A3、C3、およびB2の値のみが必要であることがわかっているため、すべてをループする代わりに、これらのセルを直接参照できます。リスナーで更新される最後のセルがわかっているので、セルが参照するデータを解析して、それらのセルでのみスクリプトを実行できます（イベントをトリガーしたセルのデータを更新する必要がある場合）。すべての機能とユーザーがデータを選択する方法を制御しているので、何かを更新する必要があるときを知ることができます。

于 2013-01-14T22:04:41.260 に答える
1

テーブル全体を反復処理するのではなく、コールバックを処理するのが良い解決策だと思います。

新しい数式を作成するたびに、その数式で参照されるセルを探し、セルが変更されるたびにその参照されるセルを呼び出すセルを変更するためのハンドラーを追加する必要があります。

私が意味することの非常に簡単な例を作成しました。使用には注意してください。数式を変更すると参照セルをクリーンアップしないため、非常にバグがある可能性があります。とにかく、一例としてはっきり見えるかもしれません。

アイデアの核心は次のスニペットにあります

$('input').on('change', function(){
  var referencedCells = getReferencedCells($(this).val());
  var $referencer = $(this);  

  for(var i=0 ; i<referencedCells.length; i++){  
    $(referencedCells[i]).on('change', function(){  
      updateValue($referencer);
    });
  }

  updateValue($referencer);

});

すべてのセルが。であると仮定しinputます。変更するたびに、数式で参照されているセルを探し、それらのコールバックを追加します。したがって、これらのセルを変更すると、数式内で変更したセルと呼ばれるすべてのセルを検索せずに、数式の値が更新されます。

編集：すべてのセルは、「=」で始まらない合計（例：A2 + B2 + 3）（スペースなし）またはリテラルのみを受け入れます。実際の値を変更すると数式が混乱するため、結果はアラートに表示されます（実際には、属性に実際の値を保存することでこれを実現できます）。良い場合には機能しないはずの数式を試さないでください（Excelで数値とは異なるものを表示するもの）。

于 2013-01-14T22:49:29.583 に答える