Implementing CRUD Operations and Popup Interactions with LayUI

To streamline development of data management interfaces, creating reusable templates for CRUD (Create, Read, Update, Delete) operatiosn proves efficient. LayUI offers components for building such interfaces with consistent styling and behavior.

User List Interface The list view features search controls, action buttons, and a data table. Below is a simplified implementation:


<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/layui/css/layui.css">
    <style>body { margin: 10px; }</style>
</head>
<body>
<div class="layui-card">
    <div class="layui-card-header">
        <div class="layui-input-inline">
            <input id="searchTerm" type="text" placeholder="Search keyword" class="layui-input">
        </div>
        <button class="layui-btn" onclick="fetchRecords()">Search</button>
        <button class="layui-btn layui-btn-normal" onclick="showEditor()">Add User</button>
        <button class="layui-btn layui-btn-danger" onclick="removeMultiple()">Delete Selected</button>
    </div>
    <div class="layui-card-body">
        
    </div>
</div>

<script type="text/html" id="actionButtons">
    <button class="layui-btn layui-btn-xs" lay-event="modify">Edit</button>
    <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="remove">Delete</button>
</script>

<script src="/layui/layui.js"></script>
<script src="/js/main.js"></script>
</body>
</html>

Data Grid Initialization JavaScript handles table rendering and event binding:

let grid;
let modal;
layui.use(['table', 'layer'], function() {
    const tableModule = layui.table;
    modal = layui.layer;
    
    grid = tableModule.render({
        elem: '#dataGrid',
        url: '/api/users',
        cols: [
            { type: 'checkbox' },
            { field: 'userId', title: 'ID', width: 80 },
            { field: 'userName', title: 'Name', width: 160 },
            { field: 'gender', title: 'Gender', width: 120 },
            { title: 'Actions', toolbar: '#actionButtons', width: 200 }
        ]
    });

    tableModule.on('tool(gridActions)', function(event) {
        const record = event.data;
        if (event.event === 'modify') {
            openEditor(record.userId);
        } else if (event.event === 'remove') {
            deleteRecord(record.userId);
        }
    });
});

function fetchRecords() {
    const term = document.getElementById('searchTerm').value;
    grid.reload({
        where: { search: term },
        page: { curr: 1 }
    });
}

Editor Form Implementation The edit form appears in a modal layer:

<form class="layui-form">
    <input type="hidden" id="recordId">
    <div class="layui-form-item">
        <label class="layui-form-label">Full Name</label>
        <div class="layui-input-block">
            <input type="text" id="fullName" required class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">Gender</label>
        <div class="layui-input-block">
            <input type="radio" name="gender" value="F" title="Female" checked>
            <input type="radio" name="gender" value="M" title="Male">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">Age</label>
        <div class="layui-input-block">
            <input type="number" id="ageValue" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <button class="layui-btn" lay-submit>Save</button>
        <button type="button" class="layui-btn layui-btn-primary" onclick="closeModal()">Cancel</button>
    </div>
</form>

Popup Layer Solutions Two common issues with LayUI modals include:

Partial screen coverage: Ensure consistent CSS and JS imports across parent/child views
Unresponsive close buttons: Verify function naming conflicts don't prevent execution

Proper modal initialization:

function openEditor(id) {
    modal.open({
        type: 2,
        title: "User Details",
        content: `/editor?id=${id}`,
        area: ['600px', '450px']
    });
}

function closeModal() {
    const frameIndex = parent.layer.getFrameIndex(window.name);
    parent.layer.close(frameIndex);
}

Data Management Functions Core operations for record handling:

function deleteRecord(ids) {
    modal.confirm('Confirm deletion?', function() {
        fetch(`/api/delete?ids=${ids}`)
            .then(response => {
                if (response.ok) {
                    modal.msg("Records deleted");
                    fetchRecords();
                }
            });
    });
}

function removeMultiple() {
    const selected = grid.checkStatus().data;
    if (selected.length === 0) return;
    
    const ids = selected.map(item => item.userId).join();
    deleteRecord(ids);
}

Tags: LayUI javascript CRUD frontend WebDevelopment

Posted on Mon, 31 Aug 2026 16:33:55 +0000 by aviatorisu

Freaks City

Implementing CRUD Operations and Popup Interactions with LayUI

Hot Tags