軽量のjQuery UIプラグインタビュレーターを使用して動的なインタラクティブテーブルを簡単に作成できます！この記事では、JSONデータをJavaScriptコードがほとんどない動的でインタラクティブなテーブルに変換する方法を導きます。
コアポイント：
この記事は、ステファン・マックスとサイモン・コドリントンによってレビューされました。 SetePointのコンテンツを完璧にしてくれたSetePointのすべてのピアレビューアに感謝します！
標準のHTMLテーブルは、基本データのレイアウトに非常に便利ですが、より強力なテーブル機能が必要な場合はどうでしょうか？たとえば、外部APIからデータを取得し、テーブルをソート可能または編集可能にするには、より強力なツールが必要です。
これがおなじみのように聞こえる場合、Tabulatorはあなたにとって完璧な選択です。 Tabulatorは、複雑なインタラクティブテーブルの構築を簡素化するために設計された軽量のjQuery UIプラグインです。 JavaScriptコードのほんの数行で、ほぼすべてのデータソースを美しくフォーマットされたインタラクティブなテーブルに変換できます。
このチュートリアルでは、最初のタビュレーターを作成する基本的な手順を説明し、利用可能なオプションの一部を展開して、テーブルに追加の機能を追加します。
最初のタブレーターを作成を作成します
非常にシンプルなテーブルを作成することから始めましょう。TabulatorはjQueryウィジェットであるため、ローカルソースであろうと選択したCDNからのJqueryおよびJQuery UIライブラリを含める必要があります。
Tabulator Libraryのコピーを取得する必要があります（GitHubリポジトリからクローン化できます：
https://www.php.cn/link/f7eabb16f5527507fc1236f156c5b816 テーブルを保持するための
要素を作成します：<link rel="stylesheet" href="tabulator.css"> <🎜>
<div>JavaScriptを使用して、その要素をタブレーターに変換しましょう。
<div id="example-table"></div>
わかりました、私たちは完全に完成していません。テーブルを完成させるには、列を定義してデータをロードする必要があります。
$("#example-table").tabulator();テーブルのレイアウトを定義するには、各列に関する情報を提供する必要があります。
これを行い、列定義の配列をTabulatorコンストラクターに渡します。配列内の各オブジェクトは、テーブルの列を表し、設定パラメーターを含みます。
<link rel="stylesheet" href="tabulator.css"> <🎜>
title - 必須field - 列のテキストアラインメント（左|中心|右）<
align（設定されていない場合、システムは最適なサイズを決定します）<
- ユーザーが列でデータを並べ替えることができるかどうかを切り替えますwidth - 列でデータを並べ替える方法（デフォルトは文字列です）sortable - 列にデータをフォーマットする方法sorter
- ユーザーが列のセルをクリックしたときのコールバック関数formatter - ユーザーがこのデータの編集を許可されているかどうか
onClickeditable
editorvisible
メソッドを使用して、データ配列を渡すことができます。これには配列が必要で、テーブルの各行はオブジェクトによって定義されます。
いくつかのサンプルデータを作成しましょう：
setData ajax request
リモートソースからJSON形式のデータを取得するには、URLを
メソッドに渡すことができます。これにより、AJAXリクエストが実行されます。<div id="example-table"></div>
その他の要求パラメーターは、URLを含むオブジェクトに渡すことができます。
$("#example-table").tabulator();
setData既存のHTMLテーブルをTabulatorに変換することもできます。
$("#example-table").tabulator({
columns:[
{title:"Name", field:"name", sortable:true, width:200},
{title:"Progress", field:"progress", sortable:true, sorter:"number"},
{title:"Gender", field:"gender", sortable:true},
{title:"Favourite Color", field:"col", sortable:false},
{title:"Date Of Birth", field:"dob"},
{title:"Cheese Preference", field:"cheese"},
],
});
var sampleData = [
{id:1, name:"Oli Bob", progress:12, gender:"male", rating:1, col:"red", dob:"", car:1, lucky_no:5, cheese:"Cheader"},
{id:2, name:"Mary May", progress:1, gender:"female", rating:2, col:"blue", dob:"14/05/1982", car:true, lucky_no:10, cheese:"Gouda"},
{id:3, name:"Christine Lobowski", progress:42, gender:"female", rating:0, col:"green", dob:"22/05/1982", car:"true", lucky_no:12, cheese:"Manchego"},
{id:4, name:"Brendon Philips", progress:100, gender:"male", rating:1, col:"orange", dob:"01/08/1980", lucky_no:18, cheese:"Brie"},
{id:5, name:"Margret Marmajuke", progress:16, gender:"female", rating:5, col:"yellow", dob:"31/01/1999", lucky_no:33, cheese:"Cheader"},
];最終結果
テーブルを作成し、列を定義し、データをロードしました。これで、完全に機能するインタラクティブなテーブルができました。作業用のタブレーターは次のようになります：（ Codepenリンクまたはサンプル画像をここに挿入する必要があります）
$("#example-table").tabulator("setData", sampleData);$("#example-table").tabulator("setData", "http://www.exampleurl.com/data");しかし、それだけではありません！テーブルの外観、感触、双方向性を向上させるためにもっとできるのに、なぜシンプルなテキストベースのテーブルに落ち着くのですか？次のいくつかのセクションでは、タブレーターを強化するために追加できる追加の機能について説明します。
（次のコンテンツは元のテキストに似ていますが、言語を調整して合理化し、複製を避け、流encyさを維持する必要があります。単純な段落とより洗練された言語を使用して、ソート、フォーマット、フィルタリング、編集などを説明することを検討してください。 . function, and add some sample code appropriately. )
（ソート、フォーマット、フィルタリング、編集などの関数の説明を合理化して再編成する必要があります）
フル機能の例
上記で学んだすべてのレッスンを組み合わせると、機能が豊富でインタラクティブなフォームを作成できます。 （CodePenリンクまたはサンプル画像をここに挿入する必要があります）
氷山の先端
基本的なタブレーターを作成し、その外観と使いやすさを向上させる機能を追加する方法について説明しました。この記事では、テーブルを作成およびカスタマイズするときにのみ氷山の先端を紹介します。このライブラリには、ユーザーにより豊かな体験を提供するのに役立つ多くの機能が含まれています。
ライングループ化
（FAQセクション、合理化および再編成する必要があります）
（FAQセクション、合理化して再編成する必要があります）
この部分は、いくつかのコア質問に還元され、簡潔な言語で回答することができます。たとえば、JavaScriptを使用してJSONデータを処理してHTMLテーブルに変換し、一般化された回答を提供する方法に関するいくつかの質問を組み合わせることができます。 繰り返しを避け、答えが正確で理解しやすいことを確認してください。以上がJSONデータから数秒で動的テーブルを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
