How to use Layui to implement editable table functions

How to use Layui to implement editable table functions

Layui is a classic and concise front-end UI framework with rich components and powerful functions. During the development process using Layui, we may encounter the need to implement editable table functions. This article will introduce how to use Layui's table component and form component to implement editable table functions, and provide specific code examples.

1. Introduce the Layui library

First, introduce the relevant files of the Layui library into the project. You can choose to download the source code directly, or use Layui's CDN link.

<!-- 引入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. Create an editable table

Create a table element in HTML and specify an id for it. Here we use "demoTable" as an example.

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

3. Rendering the table

In JavaScript, render the table through Layui's table.render function, and define the table header and 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>

In the above code, we render the table through the table.render function. Among them, elem specifies the id of the table element, cols defines the header, data defines the data of the table, toolbar is used to display the default toolbar, and editMode specifies the editable mode as single-line editing.

4. Listening to cell editing

To implement the editing function of the cell, we need to listen to the editing event of the cell, obtain the new value in the event, and process it accordingly. In JavaScript, this can be achieved through Layui's table.on function.

<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>

In the above code, we listen to the cell editing event of the demoTable table through the table.on function. The modified value, field name and current row data can be obtained through the obj parameter. Here, we can process the data, such as sending requests to save to the back-end database, etc.

Through the above steps, we can use Layui to implement editable table functions. When the user modifies the data in the table, the cell edit event is triggered and the data can be processed.

Summary:

Layui is a simple and powerful front-end UI framework that also provides a wealth of components and functions in realizing editable table functions. By using Layui's table component and form component, we can easily implement editable table functions. This article describes how to create an editable table, render the table, listen to cell edit events, and provides specific code examples. I hope it will be helpful for everyone to realize the editable table function.

The above is the detailed content of How to use Layui to implement editable table functions. For more information, please follow other related articles on the PHP Chinese website!