Handsontable.js を使用して JavaScript でデータ グリッドを作成する

Handsontable は、データ グリッドを作成するときに使用する JavaScript ライブラリです。 Excel に非常によく似た、スプレッドシートのようなエクスペリエンスを提供します。このチュートリアルでは、handsontable.js を使用して独自のデータを含むデータ グリッドを作成する方法を説明します。さらに、handsontable.js で使用できるさまざまなオプションの使用方法についても説明します。

さまざまなスプレッドシート (Grid Creator など) を使用できる場合もありますが、handsontable.js はプレーンな JavaScript、React、または Angular でも使用できるため、ほとんどのスプレッドシートより際立っています。

handsontable.js の使用を開始する前の最初のステップは、handsontable.js をローカル コンピューターにインストールすることです。 handsontable.js をインストールするにはさまざまな方法があります。

最も基本的な方法は、HTML コードで CDN リンクを使用することです。次の HTML コードを

タグに貼り付けるだけです。 リーリー

上記のコード スニペットでは、CDN 経由で 2 つのファイルをインポートします。これらは、「handsontable スタイル」をインポートするために使用される「handsontable.full.min.css」であり、次に JavaScript コードをインポートするために使用される「handsontable.full.min.js」をインポートします。

CDN リンクの使用に興味がない場合は、npm または yarn を使用して CDN リンクをインストールできます。 以下に示す NPM コマンドの使用を検討してください。 リーリー

Yarn には次のコマンドを使用します。

リーリー

これらのコマンドのいずれかを使用したら、以下に示す 2 行を

タグに追加するだけで、handsontable の使用を開始できます。 リーリー

<script> タグと <link> タグでは、対応する「js」ファイルと「CSS」ファイルを「node_modules」フォルダーからインポートします。これで、handsontable.js を使用できるようになります。 </script>

index.html

最初のステップは、HTML ファイルを作成することです。ファイルに index.html という名前を付けます。 私が作成したindex.htmlファイルの最終的なコードは次のようになります。

＃＃＃例＃＃＃ リーリー

上記の HTML コードでは、2 つの

div

クラスを使用します。最初のヘッダーではヘッダーを作成し、次のヘッダーでは空のままにしますが、その空の div には container というクラスがあり、これを JavaScript コードとします。 app.js

次のコード スニペットでは、

タグを使用して、JavaScript コードを記述する

app.js<script> ファイルにリンクします。 <b> </script>

app.js

という名前のファイルを作成し、次のコードを貼り付けます - リーリー 上記の

app.js

コードでは、最初に data という定数を作成します。ここには、作成されたグリッドのデータに適合するさまざまな値が保存されます。 次のステップでは、

querySelector

から HTML の特定の要素を選択し、その値を Handsontable コンストラクター内の最初のパラメーターとして渡します。 2 番目のパラメータは、div に表示したい実際のデータにほかなりません。 index.html

これは、

app.js

データを含む完全なコードです。このコードを実行して、出力がどのように表示されるかを確認します - ＃＃＃例＃＃＃ リーリー 行ヘッダーと列ヘッダーの紹介

行や列にヘッダーを導入することもできます。これを行うには、Handsontable コンストラクター メソッドの 2 番目のパラメーター内に 2 つのプロパティを追加するだけです。以下に示すコード スニペットを考えてみましょう。

リーリー

上記のコード スニペットを

app.js

ファイルに既に存在するコード スニペットに置き換えると、行と列に追加されたデフォルトのヘッダーを確認できるようになります。

rowHeaders には 1 から 9 までの数値が含まれますが、列ヘッダーには A から列文字の末尾までのデフォルト値が含まれます。 p>

データ グリッドでは列ヘッダーを独自に提供します。これはデータにも表示されます。最初の行は次のようになります - リーリー 上記の値は、

colHeaders

内に指定することもできます。以下に示す更新されたコード スニペットを考えてみましょう。

リーリー

データ定数も変更する必要があります。更新されたデータ定数を以下に示します。 リーリー ＃＃＃結論は＃＃＃ このチュートリアルでは、handsontable.js とは何か、およびそれを使用して任意のデータ グリッドを作成する方法について説明します。列とヘッダーにデフォルト値を提供するさまざまな例を検討しました。

以上がHandsontable.js を使用して JavaScript でデータ グリッドを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。