In the Layui framework, dynamically deleting table row data can be achieved through the following steps: 1. Listen to the toolbar event and a confirmation box pops up when you click the delete button; 2. Use the obj.del() method to delete the DOM structure after confirmation; 3. Remove the corresponding data from the data source and re-render the table using the table.reload method to ensure the consistency of the data and the DOM structure.

Dynamically deleting table row data is a common requirement when using the Layui framework. Let's start from this question and explore in-depth how to implement this feature and share some practical experiences and tips.

In Layui, the table component provides a rich API to manipulate table data. The key to deleting row data is to understand the structure and event handling mechanism of the Layui table. Let's start with a simple example and gradually dive into more complex scenarios.

First, we need to understand the basic structure of the Layui table. Layui tables are usually initialized by the table.render method, and data can be passed in through data parameter. When deleting row data, we need to find the target row and remove it from the data source and then re-render the table.

Let's look at a simple example, suppose we have a table where the user can delete the selected row by clicking the button:

 // Initialize the table table.render({
    elem: '#demo',
    cols: [[
        {field: 'id', title: 'ID', width: 80},
        {field: 'username', title: 'username', width: 120},
        {field: 'experience', title: 'points', width: 80, sort: true},
        {field: 'sign', title: 'sign'},
        {field: 'operation', title: 'operation', width: 150, temple: '#operationTpl'}
    ]],
    data: [
        {"id": "10001", "username": "Du Fu", "experience": "93", "sign": "I will be on the top of the mountain and overlook the small mountains."},
        {"id": "10002", "username": "Li Bai", "experience": "88", "sign": "How can I bow my eyebrows and serve the powerful and unhappy!"},
        {"id": "10003", "username": "Wang Bo", "experience": "91", "sign": "There are close friends in the sea, and the world is like neighbors."}
    ],
    id: 'testReload'
});

// Define the operation template <script type="text/html" id="operationTpl">
    <a class="layui-btn layui-btn-xs" lay-event="del">Delete</a>
</script>

// Listen to toolbar event table.on(&#39;tool(demo)&#39;, function(obj){
    var data = obj.data;
    if(obj.event === &#39;del&#39;){
        layer.confirm(&#39;Does it really delete the line&#39;, function(index){
            obj.del(); //Delete the DOM structure of the corresponding line (tr) and update the cache layer.close(index);
            //Send a delete command to the server});
    }
});

In this example, we listen to the toolbar event through the table.on method. When the user clicks the delete button, a confirmation box pops up. After confirmation, we call obj.del() method to delete the row data.

However, simply deleting the DOM structure is not enough, we also need to update the data source and re-render the table. Let's look at a more complete example of how to dynamically delete row data and update data sources:

 // Suppose we have a global variable to store table data var tableData = [
    {"id": "10001", "username": "Du Fu", "experience": "93", "sign": "I will be on the top of the mountain and overlook the small mountains."},
    {"id": "10002", "username": "Li Bai", "experience": "88", "sign": "How can I bow my eyebrows and serve the powerful and unhappy!"},
    {"id": "10003", "username": "Wang Bo", "experience": "91", "sign": "There are close friends in the sea, and the world is like neighbors."}
];

// Initialize the table table.render({
    elem: '#demo',
    cols: [[
        {field: 'id', title: 'ID', width: 80},
        {field: 'username', title: 'username', width: 120},
        {field: 'experience', title: 'points', width: 80, sort: true},
        {field: 'sign', title: 'sign'},
        {field: 'operation', title: 'operation', width: 150, temple: '#operationTpl'}
    ]],
    data: tableData,
    id: 'testReload'
});

// Define the operation template <script type="text/html" id="operationTpl">
    <a class="layui-btn layui-btn-xs" lay-event="del">Delete</a>
</script>

// Listen to toolbar event table.on(&#39;tool(demo)&#39;, function(obj){
    var data = obj.data;
    if(obj.event === &#39;del&#39;){
        layer.confirm(&#39;Does it really delete the line&#39;, function(index){
            // Delete the row of data from the data source tableData = tableData.filter(function(item){
                return item.id !== data.id;
            });
            // Re-render the table table.reload(&#39;testReload&#39;, {
                data: tableData
            });
            layer.close(index);
            // Send a delete command to the server// Here you can add an AJAX request to synchronize the delete operation});
    }
});

In this example, we not only deleted the DOM structure, but also removed the corresponding data from tableData and re-rendered the table through the table.reload method. In this way, both the tabular data and the DOM structure can be consistent.

In practical applications, we need to pay attention to the following points:

1. Data synchronization : Ensure that the front-end deletion operation remains synchronized with the back-end data. It is usually necessary to synchronize the delete operation to the server via an AJAX request.

2. User experience : Before deleting the operation, provide confirmation prompts to avoid misoperation. It can be implemented using Layui's layer.confirm method.

3. Performance optimization : If the table data is large, frequent re-rendering may affect performance. Consider using virtual scrolling or paging loading for optimization.

4. Error handling : During the deletion operation, you may encounter network errors or server returns errors. These situations need to be handled to provide friendly user feedback.

Through the above methods and techniques, we can flexibly implement the function of dynamically deleting row data in Layui tables. Hopefully these experiences and code samples can help you better use the Layui table components in your actual project.

The above is the detailed content of How to dynamically delete row data in a layui table. For more information, please follow other related articles on the PHP Chinese website!