Cara menggunakan Layui untuk melaksanakan fungsi lajur jadual boleh diisih-tutorial js-php.cn

Cara menggunakan Layui untuk melaksanakan fungsi lajur jadual boleh diisih

王林

Lepaskan： 2023-10-27 18:02:18

asal

1261 orang telah melayarinya

Cara menggunakan Layui untuk melaksanakan fungsi lajur jadual boleh diisih

Dalam pembangunan web, jadual ialah cara biasa untuk memaparkan data. Fungsi pengisihan jadual membolehkan pengguna mengisih dan mencari data jadual dengan mudah. Layui ialah rangka kerja UI bahagian hadapan yang sangat popular Ia menyediakan banyak komponen dan antara muka, termasuk komponen jadual, menjadikannya sangat mudah untuk melaksanakan fungsi lajur jadual boleh diisih. Seterusnya, kami akan memperkenalkan secara terperinci cara menggunakan Layui untuk melaksanakan fungsi lajur jadual boleh diisih dan memberikan contoh kod khusus.

Pertama, kami perlu memperkenalkan fail berkaitan rangka kerja Layui. Tambahkan kod berikut dalam teg halaman HTML: 标签中添加以下代码：

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

Salin selepas log masuk

然后，在<body>标签中添加一个表格元素，如下所示：

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

Salin selepas log masuk

这个表格元素的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: '操作'}
    ]]
  });
});

Salin selepas log masuk

在上面的代码中，我们首先使用layui.use函数来加载和调用table模块。然后使用table.render函数来渲染表格，其中的参数含义如下：

elem: 表格元素的选择器，这里使用了前面定义的表格元素的id选择器。
url: 表格数据的接口地址，这里替换成实际的数据接口。
cols: 表头的定义，通过多维数组的形式来定义每列的字段和标题，其中的sort属性为可选，如果设置为true，则表示该列可以进行排序。

通过以上的代码，我们就可以实现一个具有可排序的表格列功能的表格了。当用户点击表格头部的某一列时，表格会根据该列的字段进行升序或降序的排序。
同时，代码还提供了一个具有分页功能的表格，可以根据实际情况进行分页显示和数据加载。

需要注意的是，上述代码中的path/to/data.jsonrrreee

Kemudian, tambahkan elemen jadual dalam teg seperti berikut:

rrreee

Atribut id elemen jadual ini ialah "demo" dan atribut lay-filter ialah "test", yang akan digunakan dalam kod JavaScript berikutnya. 🎜🎜Seterusnya, kita perlu menulis kod JavaScript untuk melaksanakan fungsi lajur jadual boleh diisih. Tambahkan kod berikut dalam teg <script> halaman HTML: 🎜rrreee🎜Dalam kod di atas, kami mula-mula menggunakan fungsi layui.use untuk memuatkan dan memanggil modul jadual. Kemudian gunakan fungsi table.render untuk memaparkan jadual Maksud parameter adalah seperti berikut: 🎜

elemen: Pemilih elemen jadual elemen yang ditakrifkan sebelum ini digunakan di sini.
url: Alamat antara muka data jadual, digantikan di sini dengan antara muka data sebenar.
cols: Takrif pengepala, mentakrifkan medan dan tajuk setiap lajur dalam bentuk tatasusunan berbilang dimensi, atribut sort adalah pilihan, jika ditetapkan kepada true , ini bermakna lajur boleh diisih.

🎜Dengan kod di atas, kita boleh melaksanakan jadual dengan fungsi lajur jadual boleh diisih. Apabila pengguna mengklik pada lajur dalam pengepala jadual, jadual akan diisih dalam susunan menaik atau menurun berdasarkan medan dalam lajur tersebut.
Pada masa yang sama, kod tersebut juga menyediakan jadual dengan fungsi paging, yang boleh memaparkan paging dan memuatkan data mengikut situasi sebenar. 🎜🎜Perlu diambil perhatian bahawa path/to/data.json dalam kod di atas harus digantikan dengan alamat antara muka data sebenar dan antara muka harus mengembalikan data JSON yang mematuhi data jadual Layui format. 🎜🎜Ringkasnya, adalah sangat mudah untuk menggunakan Layui untuk melaksanakan fungsi lajur jadual boleh diisih Anda hanya perlu memperkenalkan rangka kerja Layui, mentakrifkan elemen jadual dan pengepala jadual, dan kemudian menggunakan modul jadual Layui untuk membuat dan mengisih. Dengan pendekatan ini, kami boleh melaksanakan jadual boleh diisih yang kaya ciri dan mesra pengguna dengan cepat. Saya harap artikel ini dapat membantu anda memahami dan menggunakan Layui. 🎜

Atas ialah kandungan terperinci Cara menggunakan Layui untuk melaksanakan fungsi lajur jadual boleh diisih. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!