Handsontable.js を使用して JavaScript でデータグリッドを作成する-jsチュートリアル-php.cn

使用 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の使用を開始できます。リーリー

index.html

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

＃＃＃例＃＃＃リーリー

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

div

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

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

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

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 サイトの他の関連記事を参照してください。