データを表示するためにLayUIのテーブルコンポーネントを使用するにはどうすればよいですか？

データを表示するためにLayUIのテーブルコンポーネントを使用するにはどうすればよいですか？

LayUIのテーブルコンポーネントは、表形式でデータを表示するためのシンプルで強力な方法を提供します。それを使用するコアには、HTMLを使用してテーブル構造を設定し、JavaScriptを使用してデータを入力することが含まれます。これが故障です：

まず、HTMLにLayUI CSSとJavaScriptファイルを含める必要があります。

 <code class="html"><link rel="stylesheet" href="layui/css/layui.css"> <script src="layui/layui.js"></script></code>

次に、HTMLにtable要素を作成します。これは、テーブルのコンテナとして機能します。この要素には、LayUIがターゲットにするためのid属性が必要です。また、オプションで基本的なテーブル構造を含めることもできます。

 <code class="html"><table id="demo" lay-filter="test"></table></code>

lay-filter属性は非常に重要です。後で操作するためにテーブルインスタンスを識別するために使用されます。

最後に、JavaScriptを使用して、 layui.table.render()を使用してテーブルデータをレンダリングします。この関数は、オブジェクトを引数として採用し、要素ID（ elem ）、データ（ data ）、列（ cols ）、その他の構成などのさまざまなオプションを指定します。これが例です：

 <code class="javascript">layui.use('table', function(){ var table = layui.table; table.render({ elem: '#demo' ,cols: [[ //标题栏{field: 'id', title: 'ID', width:80, sort: true} ,{field: 'username', title: '用户名', width:80} ,{field: 'email', title: '邮箱', width:120} ,{field: 'sex', title: '性别', width:80} ,{field: 'city', title: '城市', width:80} ,{field: 'sign', title: '签名', width:170} ]] ,data: [ //假设数据{'id':'1','username':'张三','email':'zhangsan@gmail.com','sex':'男','city':'西安','sign':'hello'} ,{'id':'2','username':'李四','email':'lisi@gmail.com','sex':'女','city':'北京','sign':'hello world'} ] ,page: true //开启分页}); });</code>

このコードは、指定された列とデータを備えたテーブルをレンダリングします。サンプルデータを実際のデータに置き換えることを忘れないでください。 page: trueオプションは、ページネーションを有効にします（以下にさらに説明します）。

LayUIのテーブルコンポーネントの列をカスタマイズできますか？

はい、LayUIのテーブルコンポーネントは、広範な列のカスタマイズを提供します。次のような、各列のさまざまな側面を制御できます。

• field ：列に対応するデータキー。これは、LayUIがデータを列にマップする方法です。
• title ：列ヘッダーテキスト。
• width ：列幅（ピクセルまたはパーセンテージ）。
• sort ：この列のソートを有効にします（True/False）。
• templet ：セルにデータの表示方法をカスタマイズする関数または文字列テンプレート。これにより、アイコン、リンク、またはその他のHTML要素を使用するなど、複雑なフォーマットが可能になります。たとえば、テンプレートを使用して、色付きのアイコンでユーザーのステータスを表示できます。
• toolbar ：各行のセル内にカスタムボタンまたはアクションを追加できます。これは、編集、削除、またはその他の行固有の操作を作成するのに役立ちます。
• edit ：インプレースセルの編集を有効にします。これにより、ユーザーはテーブル内のデータを直接変更できます。
• type ： 「チェックボックス」などのさまざまな列タイプを指定して、各行にチェックボックスを追加できます。

templetとtoolbarを示す例は次のとおりです。

 <code class="javascript">cols: [[ {field: 'status', title: 'Status', templet: function(d){ return d.status === 1 ? '<span style="color:green;">Active</span>' : '<span style="color:red;">Inactive</span>'; }} ,{field: 'actions', title: 'Actions', toolbar: '#barDemo'} ]]</code>

これにより、条件付き色付きのステータス列と、ID barDemoのテンプレートで定義されたカスタムボタンを備えたアクション列が追加されます。

LayUIのテーブルコンポーネントでページネーションを処理するにはどうすればよいですか？

Layuiのテーブルコンポーネントは、パジネーションを簡素化します。ページネーションを有効にするには、 pageオプションをtable.render()関数でtrueに設定するだけです。

 <code class="javascript">table.render({ // ... other options ... page: true });</code>

これにより、テーブルの下部にページネーションコントロールが自動的に追加されます。 LayUIは、各ページのデータの取得と表示を処理します。追加のオプションを指定することにより、パジネーションをさらにカスタマイズできます。

• limit ： 1ページあたりの行数。
• limits ：ユーザーが選択できるページあたりの行数のオプションの配列。
• layout ：どのページネーション要素が表示されるかを制御します（例： 'count'、 'prev'、 'page'、 'next'、 'limit'、 'skip'）。
• curr ：現在のページ番号を指定します。特定のページをロードするときに便利です。

大規模なデータセットの場合、通常、現在のページ番号とlimitに基づいて、チャンクでバックエンドAPIからデータを取得する必要があります。これについては、次のセクションで説明します。

LayUIのテーブルコンポーネントをバックエンドAPIと統合するにはどうすればよいですか？

LayUIのテーブルをバックエンドAPIと統合するには、Ajax（通常はjQueryの$.ajax()またはBrowserの内蔵fetch() APIを使用してデータを取得し、そのデータをtable.render()関数に渡すことが含まれます。通常、現在のページと制限に基づいてAPI呼び出しを調整する必要があります。

fetch()を使用した例は次のとおりです。

 <code class="javascript">layui.use('table', function(){ var table = layui.table; let currentPage = 1; let pageSize = 10; function fetchData(page, limit) { return fetch(`/api/data?page=${page}&limit=${limit}`) .then(response => response.json()) .then(data => { return { data: data.items, // Assuming your API returns an object with 'items' property count: data.totalCount // Assuming your API returns total count }; }); } fetchData(currentPage, pageSize).then(data => { table.render({ elem: '#demo', cols: [[ /* ... your columns ... */ ]], data: data.data, page: { curr: currentPage, limit: pageSize, count: data.count } }); }); });</code>

このコードは/api/dataからデータを取得し、ページ番号を渡してクエリパラメーターとして制限します。次に、応答を使用してテーブルをレンダリングします。バックエンドに一致するように、APIエンドポイントとデータ構造を調整することを忘れないでください。また、通常、イベントリスナーを追加してページネーションの変更を処理し、それに応じてcurrentPageを更新し、ページが変更されたときにデータを再削減します。エラー処理と読み込み指標は、生産対応の実装のための重要な考慮事項でもあります。

以上がデータを表示するためにLayUIのテーブルコンポーネントを使用するにはどうすればよいですか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。