The way to add a custom button column in a Layui table is to specify the template ID through the toolbar property and handle button click behavior through event listening. The specific steps include: 1. Use the toolbar attribute to specify the template ID in the table configuration; 2. Write the template content and define the buttons and their events; 3. Use the event listening mechanism to handle the button click behavior. The advantage of this method is its high flexibility, but it should be noted that too many buttons may affect performance.

introduction

In modern web development, tables are a common UI component that is powerful and flexible. Especially when using front-end frameworks like Layui, the ability to customize tables has become a topic of discussion among developers. Today we will explore how to add custom button columns to the Layui table to help everyone manipulate data more flexibly in the project.

Through this article, you will learn how to add button columns to your Layui table and gain insight into the pros and cons of this approach and the challenges you may encounter.

Review of basic knowledge

Layui is a lightweight front-end UI framework that provides rich components, where tables are commonly used and powerful components. Layui tables support a variety of data manipulation and presentation methods, while the addition of custom columns takes the table's functionality to a higher level.

Before you begin, make sure you are familiar with the basic usage of Layui, including how to initialize tables and basic configuration items.

Core concept or function analysis

Definition and function of custom button columns

In the Layui table, adding a custom button column allows us to embed action buttons in each row of the table, such as editing, deleting, viewing details, etc. These buttons can trigger specific actions to enhance user interaction with data.

Example:

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

<script>
    layui.use(&#39;table&#39;, function(){
        var table = layui.table;

        table.render({
            elem: &#39;#demo&#39;
            ,url:&#39;/data.json&#39;
            ,cols: [[
                {field:&#39;id&#39;, title:&#39;ID&#39;, width:80, sort: true}
                ,{field:&#39;username&#39;, title:&#39;username&#39;, width:120}
                ,{field:&#39;experience&#39;, title:&#39;points&#39;, width:120, sort: true}
                ,{field:&#39;sign&#39;, title:&#39;sign&#39;}
                ,{title:&#39;Operation&#39;, toolbar: &#39;#barDemo&#39;, width:150}
            ]]
            ,page: true
        });

        // Toolbar event table.on(&#39;tool(test)&#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();
                    layer.close(index);
                });
            } else if(obj.event === &#39;edit&#39;){
                layer.prompt({
                    formType: 2
                    ,value: data.email
                }, function(value, index){
                    obj.update({
                        email: value
                    });
                    layer.close(index);
                });
            }
        });
    });
</script>

<!-- Toolbar Template-->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">Edit</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">Delete</a>
</script>

In this example, we specify a template ID #barDemo through toolbar property and apply this template to操作column when the table is rendered. In this way, we successfully added a custom button column to the table.

How it works

The custom button columns of Layui tables are implemented through the template engine. When rendering a table, it will parse and render the corresponding HTML content into the cell of the table based on the template ID specified by toolbar property. When the user clicks these buttons, Layui will trigger the corresponding operation through the event listening mechanism.

The advantage of this approach is flexibility and scalability, and you can customize the style and behavior of the buttons as you want. However, it should be noted that too many custom buttons may affect the loading speed and user experience of the table.

Example of usage

Basic usage

In the example above, we have shown how to add edit and delete buttons. The basic usage is to specify toolbar attribute in the table configuration and handle the button click behavior through event listening.

Advanced Usage

If you want to add more functions to the button column, such as viewing details, batch operations, etc., you can achieve it by extending the template content and event processing logic.

Example:

 <!-- Extended toolbar template-->
<script type="text/html" id="barDemoAdvanced">
    <a class="layui-btn layui-btn-xs" lay-event="detail">View</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">Edit</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">Delete</a>
    <a class="layui-btn layui-btn-xs" lay-event="batch">Batch Operation</a>
</script>

<script>
    layui.use(&#39;table&#39;, function(){
        var table = layui.table;

        table.render({
            elem: &#39;#demo&#39;
            ,url:&#39;/data.json&#39;
            ,cols: [[
                {field:&#39;id&#39;, title:&#39;ID&#39;, width:80, sort: true}
                ,{field:&#39;username&#39;, title:&#39;username&#39;, width:120}
                ,{field:&#39;experience&#39;, title:&#39;points&#39;, width:120, sort: true}
                ,{field:&#39;sign&#39;, title:&#39;sign&#39;}
                ,{title:&#39;Operation&#39;, toolbar: &#39;#barDemoAdvanced&#39;, width:250}
            ]]
            ,page: true
        });

        // Toolbar event table.on(&#39;tool(test)&#39;, function(obj){
            var data = obj.data;
            if(obj.event === &#39;detail&#39;){
                // View the logic layer.open({
                    type: 1,
                    title: &#39;User Details&#39;,
                    content: &#39;<div>Username: &#39; data.username &#39;</div><div>Points: &#39; data.experience &#39;</div>&#39;
                });
            } else if(obj.event === &#39;edit&#39;){
                // Edit logic layer.prompt({
                    formType: 2
                    ,value: data.email
                }, function(value, index){
                    obj.update({
                        email: value
                    });
                    layer.close(index);
                });
            } else if(obj.event === &#39;del&#39;){
                // Delete the logical layer.confirm(&#39;Does it really delete the line&#39;, function(index){
                    obj.del();
                    layer.close(index);
                });
            } else if(obj.event === &#39;batch&#39;){
                // Batch operation logic layer.open({
                    type: 1,
                    title: &#39;Batch operation&#39;,
                    content: &#39;<div>Select the batch operation to be performed</div>&#39;
                });
            }
        });
    });
</script>

In this advanced usage, we have added buttons to view details and batch operations and handle these new features via event listening.

Common Errors and Debugging Tips

• Button event not fired : Make sure your lay-filter property is consistent with lay-filter listened to, otherwise the event will not be triggered correctly.
• Template parsing error : Check whether your template ID is correct and whether the template content meets Layui's requirements.
• Performance issues : If the table data is large, too many custom buttons may cause slow loading, consider loading on demand or paging.

Performance optimization and best practices

In practical applications, it is very important to optimize the performance of Layui tables and follow best practices. Here are some suggestions:

• Loading on demand : For large data volumes, consider using Layui's paging function to avoid loading all data at once.
• Simplify templates : Try to simplify template content, reduce unnecessary DOM operations, and improve rendering speed.
• Event listening optimization : For complex table operations, you can consider using event delegates to reduce the number of event listeners.

Example:

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

<script>
    layui.use(&#39;table&#39;, function(){
        var table = layui.table;

        table.render({
            elem: &#39;#demo&#39;
            ,url:&#39;/data.json&#39;
            ,cols: [[
                {field:&#39;id&#39;, title:&#39;ID&#39;, width:80, sort: true}
                ,{field:&#39;username&#39;, title:&#39;username&#39;, width:120}
                ,{field:&#39;experience&#39;, title:&#39;points&#39;, width:120, sort: true}
                ,{field:&#39;sign&#39;, title:&#39;sign&#39;}
                ,{title:&#39;Operation&#39;, toolbar: &#39;#barDemo&#39;, width:150}
            ]]
            ,page: true
            ,limit: 10 // 10 pieces of data are displayed on each page, limits: [10, 20, 30] // Optional display number of pieces per page});

        // Toolbar event table.on(&#39;tool(test)&#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();
                    layer.close(index);
                });
            } else if(obj.event === &#39;edit&#39;){
                layer.prompt({
                    formType: 2
                    ,value: data.email
                }, function(value, index){
                    obj.update({
                        email: value
                    });
                    layer.close(index);
                });
            }
        });
    });
</script>

<!-- Simplified toolbar template-->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">Edit</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">Delete</a>
</script>

With these optimizations and best practices, you can flexibly add custom button columns in your Layui tables while maintaining good performance and user experience.

In actual projects, I once encountered an interesting case: in the backend management system of a large e-commerce platform, we need to add multiple operation buttons to the product list, including listing, removing, editing, deleting, etc. Due to the huge amount of data, we adopted pagination loading and on-demand rendering, which greatly improved the system's response speed and user experience. This case made me deeply realize that performance optimization and user experience are equally important during the development process.

Hope this article helps you to add custom button columns flexibly in Layui tables and be at ease in actual projects.

The above is the detailed content of How to add custom button columns in layui table. For more information, please follow other related articles on the PHP Chinese website!