Layui を使用してソート可能なテーブル列関数を実装する方法-jsチュートリアル-php.cn

Layui を使用してソート可能なテーブル列関数を実装する方法

王林

リリース： 2023-10-27 18:02:18

オリジナル

1282 人が閲覧しました

Layui を使用してソート可能なテーブル列関数を実装する方法

Layui を使用して並べ替え可能なテーブル列関数を実装する方法

Web 開発では、テーブルはデータを表示する一般的な方法です。テーブルのソート機能により、ユーザーはテーブルデータを便利にソートおよび検索できます。 Layui は非常に人気のあるフロントエンド UI フレームワークであり、テーブルコンポーネントを含む豊富なコンポーネントとインターフェイスを提供し、並べ替え可能なテーブル列関数の実装を非常に簡単にします。次に、Layui を使用してソート可能なテーブル列機能を実装する方法と具体的なコード例を詳しく紹介します。

まず、Layui フレームワークの関連ファイルを導入する必要があります。 HTML ページのタグに次のコードを追加します。

<link rel="stylesheet" href="path/to/layui/css/layui.css">
<script src="path/to/layui/layui.js"></script>

ログイン後にコピー

次に、次のように <body> タグに table 要素を追加します。以下:

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

ログイン後にコピー

このテーブル要素の id 属性は「demo」、lay-filter 属性は「test」です。これは、後続の JavaScript コードが到着します。

次に、並べ替え可能なテーブル列関数を実装するための JavaScript コードを作成する必要があります。 HTML ページの <script> タグに次のコードを追加します。

layui.use('table', function(){
  var table = layui.table;

  table.render({
    elem: '#demo',
    url: 'path/to/data.json', // 这里替换成实际的数据接口
    cols: [[ // 表头
      {field: 'id', title: 'ID', sort: true},
      {field: 'username', title: '用户名'},
      {field: 'sex', title: '性别', sort: true},
      {field: 'city', title: '城市'},
      {field: 'sign', title: '签名'},
      {field: 'experience', title: '经验值'},
      {field: 'score', title: '积分', sort: true},
      {field: 'classify', title: '分类'},
      {field: 'wealth', title: '财富', sort: true},
      {field: 'operate', title: '操作'}
    ]]
  });
});

ログイン後にコピー

上記のコードでは、最初に layui.use 関数を使用して読み込みます。そしてテーブルモジュールを呼び出します。次に、table.render 関数を使用してテーブルをレンダリングします。パラメータの意味は次のとおりです:

elem: テーブル要素のセレクター。テーブル要素の ID 選択。ここでは、前に定義したテーブル要素が使用されます。
url: テーブルデータのインターフェイスアドレス。ここでは実際のデータインターフェイスに置き換えられます。
cols: ヘッダーの定義。多次元配列の形式で各列のフィールドとタイトルを定義します。sort 属性は、 に設定されている場合はオプションです。 true は、列をソートできることを意味します。

上記のコードを通じて、ソート可能なテーブル列関数を備えたテーブルを実装できます。ユーザーがテーブルのヘッダーの列をクリックすると、その列のフィールドに基づいてテーブルが昇順または降順で並べ替えられます。
同時に、このコードはページング機能を備えたテーブルも提供しており、実際の状況に応じてページングを表示し、データをロードできます。

上記のコードの path/to/data.json は、実際のデータインターフェイスアドレスに置き換える必要があることに注意してください。これにより、Layui テーブルに準拠する JSON データが返されるはずです。データ形式。

要約すると、Layui を使用してソート可能なテーブル列関数を実装するのは非常に簡単です。必要なのは、Layui フレームワークを導入し、テーブル要素とテーブルヘッダーを定義してから、Layui のテーブルモジュールを使用してレンダリングし、選別。このアプローチを使用すると、機能が豊富で使いやすい並べ替え可能なテーブルを迅速に実装できます。この記事が Layui の理解と使用に役立つことを願っています。

以上がLayui を使用してソート可能なテーブル列関数を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。