Cara menggunakan Layui untuk melaksanakan fungsi jadual boleh diedit

Cara menggunakan Layui untuk melaksanakan fungsi jadual boleh diedit

Layui ialah rangka kerja UI bahagian hadapan yang klasik dan ringkas dengan komponen kaya dan fungsi berkuasa. Semasa proses pembangunan menggunakan Layui, kita mungkin menghadapi keperluan untuk melaksanakan fungsi jadual boleh diedit. Artikel ini akan memperkenalkan cara menggunakan komponen jadual dan komponen bentuk Layui untuk melaksanakan fungsi jadual boleh diedit, dan menyediakan contoh kod khusus.

1. Perkenalkan perpustakaan Layui

Pertama, perkenalkan fail perpustakaan Layui yang berkaitan ke dalam projek. Anda boleh memilih untuk memuat turun kod sumber secara terus, atau menggunakan pautan CDN Layui.

<!-- 引入Layui库 -->
<link rel="stylesheet" href="http://cdn.layui.com/layui/2.5.4/layui.css">
<script src="http://cdn.layui.com/layui/2.5.4/layui.js"></script>

2 Cipta jadual yang boleh diedit

Buat elemen jadual dalam HTML dan tetapkan ia sebagai id.

<table class="layui-table" id="demoTable"></table>

3. Renderkan jadual

Dalam JavaScript, render jadual melalui fungsi table.render Layui dan tentukan pengepala jadual dan data.

<script>
layui.use('table', function(){
  var table = layui.table;
  
  //定义表头
  var cols = [[
    {field: 'name', title: '姓名', edit: 'text'},
    {field: 'gender', title: '性别', edit: 'text'},
    {field: 'age', title: '年龄', edit: 'text'},
    {field: 'email', title: '邮箱', edit: 'text'},
    {field: 'phone', title: '电话', edit: 'text'}
  ]];
  
  //定义数据
  var data = [
    {name: '张三', gender: '男', age: '22', email: 'zhangsan@example.com', phone: '123456789'},
    {name: '李四', gender: '女', age: '25', email: 'lisi@example.com', phone: '987654321'},
    {name: '王五', gender: '男', age: '28', email: 'wangwu@example.com', phone: '456789123'},
  ];
  
  //渲染表格
  table.render({
    elem: '#demoTable',
    cols: cols,
    data: data,
    toolbar: 'default',
    editMode: 'single' //可编辑模式，支持：single单行、row整行、cell单元格
  });
});
</script>

Dalam kod di atas, kami memberikan jadual melalui fungsi table.render. Antaranya, elem menentukan id elemen jadual, cols mentakrifkan pengepala, data mentakrifkan data jadual, bar alat digunakan untuk memaparkan bar alat lalai, dan editMode menentukan mod boleh diedit sebagai penyuntingan satu baris.

4. Memantau penyuntingan sel

Untuk melaksanakan fungsi penyuntingan sel, kita perlu mendengar acara penyuntingan sel, mendapatkan nilai baharu dalam acara tersebut dan memprosesnya dengan sewajarnya. Dalam JavaScript, ini boleh dicapai melalui fungsi table.on Layui.

<script>
layui.use('table', function(){
  var table = layui.table;
  
  //定义表头和数据
  //...
  
  //渲染表格
  //...
  
  //监听单元格编辑
  table.on('edit(demoTable)', function(obj){
    var value = obj.value; //得到修改后的值
    var field = obj.field; //得到字段名
    var data = obj.data; //得到当前行数据
    
    //在这里进行相应的处理，比如发送请求保存到后端数据库等
    
    layer.msg('修改成功');
  });
});
</script>

Dalam kod di atas, kami mendengar acara penyuntingan sel jadual demoTable melalui fungsi table.on. Nilai yang diubah suai, nama medan dan data baris semasa boleh diperolehi melalui parameter obj. Di sini, kami boleh memproses data, seperti menghantar permintaan untuk disimpan ke pangkalan data bahagian belakang, dsb.

Melalui langkah di atas, kita boleh merealisasikan fungsi jadual boleh diedit menggunakan Layui. Apabila pengguna mengubah suai data dalam jadual, peristiwa suntingan sel akan dicetuskan dan data boleh diproses.

Ringkasan:

Layui ialah rangka kerja UI bahagian hadapan yang ringkas dan berkuasa yang turut menyediakan pelbagai komponen dan fungsi untuk melaksanakan fungsi jadual boleh diedit. Dengan menggunakan komponen jadual dan komponen bentuk Layui, kami boleh melaksanakan fungsi jadual boleh diedit dengan mudah. Artikel ini menerangkan cara membuat jadual boleh diedit, memaparkan jadual, mendengar acara pengeditan sel dan menyediakan contoh kod khusus. Saya harap ia akan membantu semua orang untuk merealisasikan fungsi jadual boleh diedit.

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