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>

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

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

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

次に、並べ替え可能なテーブル列関数を実装するための JavaScript コードを作成する必要があります。 HTML ページの <script></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 サイトの他の関連記事を参照してください。