Cara menggunakan Layui untuk melaksanakan fungsi carian dan penapisan seret dan lepas-tutorial js-php.cn

Cara menggunakan Layui untuk melaksanakan fungsi carian dan penapisan seret dan lepas

王林

Lepaskan： 2023-10-27 11:55:46

asal

1361 orang telah melayarinya

Cara menggunakan Layui untuk melaksanakan fungsi carian dan penapisan seret dan lepas

Pengenalan latar belakang:
Dengan perkembangan pesat Internet, jumlah data terus berkembang, dan cara menapis dan mencari data dengan cekap telah menjadi isu penting. Layui ialah rangka kerja UI bahagian hadapan yang ringan dengan komponen kaya dan pemalam yang boleh melaksanakan pelbagai fungsi dengan mudah. Artikel ini akan memperkenalkan cara menggunakan Layui untuk melaksanakan carian drag-and-drop dan fungsi penapis untuk memudahkan pengguna menyesuaikan keadaan carian mengikut keperluan mereka sendiri.

Idea pelaksanaan:

Gunakan komponen jadual dalam Layui untuk memaparkan data dan menambah bar carian.
Gunakan komponen lapisan Layui untuk melaksanakan tetingkap timbul untuk keadaan carian yang ditentukan pengguna.
Gunakan komponen borang dalam Layui untuk menjana borang carian.
Gunakan komponen seret dan lepas Layui untuk melaksanakan fungsi carian dan penapisan seret dan lepas.

Pelaksanaan khusus:

Bahagian HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>可拖拽的搜索筛选功能</title>
    <link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
 
<div class="layui-container">
    <div class="layui-row">
        <div id="searchBar" class="layui-col-md12">
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">关键词</label>
                    <div class="layui-input-inline">
                        <input type="text" name="keyword" placeholder="请输入关键词" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">筛选条件</label>
                    <div class="layui-input-inline">
                        <input type="text" name="filter" placeholder="请选择筛选条件" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux">点击右侧按钮进行自定义筛选条件</div>
                </div>
            </form>
        </div>
        <div id="tableContainer" class="layui-col-md12">
            <table id="dataTable" lay-filter="dataTable"></table>
        </div>
    </div>
</div>
 
<script src="layui/layui.js"></script>
<script>
    layui.use(['layer', 'table', 'form'], function(){
        var layer = layui.layer;
        var table = layui.table;
        var form = layui.form;
 
        // 监听自定义筛选条件按钮点击事件
        $('#searchBar').on('click', 'button', function(){
            layer.open({
                type: 1,
                title: '自定义筛选条件',
                content: $('#filterForm'),
                area: ['600px', '400px'],
                success: function(){
                    // 渲染表单
                    form.render();
                },
                btn: ['确定', '取消'],
                yes: function(index, layero){
                    // 提交表单
                    form.on('submit(filterSubmit)', function(data){
                        // 获取筛选条件，并进行搜索操作
                        var filterData = data.field;
                        table.reload('dataTable', {
                            where: filterData
                        });
 
                        // 关闭弹窗
                        layer.close(index);
 
                        return false;
                    });
                }
            });
        });
 
        // 渲染表格
        table.render({
            elem: '#dataTable',
            url: 'data.json',
            cols: [[
                {field: 'name', title: '姓名'},
                {field: 'age', title: '年龄'},
                {field: 'gender', title: '性别'}
            ]]
        });
    });
</script>
 
<!-- 自定义筛选条件弹窗 -->
<script type="text/html" id="filterForm">
    <form class="layui-form" lay-filter="filterForm">
        <div class="layui-form-item">
            <label class="layui-form-label">年龄段</label>
            <div class="layui-input-inline">
                <input type="text" name="minAge" placeholder="最小年龄" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid">-</div>
            <div class="layui-input-inline">
                <input type="text" name="maxAge" placeholder="最大年龄" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <input type="checkbox" name="gender" value="男" title="男">
                <input type="checkbox" name="gender" value="女" title="女">
            </div>
        </div>
        <div class="layui-form-item layui-hide">
            <input type="button" lay-submit lay-filter="filterSubmit" id="filterSubmit">
        </div>
    </form>
</script>
 
</body>
</html>

Salin selepas log masuk

Bahagian JavaScript:

layui.use(['layer', 'table', 'form'], function(){
    var layer = layui.layer;
    var table = layui.table;
    var form = layui.form;

    // 监听自定义筛选条件按钮点击事件
    $('#searchBar').on('click', 'button', function(){
        layer.open({
            type: 1,
            title: '自定义筛选条件',
            content: $('#filterForm'),
            area: ['600px', '400px'],
            success: function(){
                // 渲染表单
                form.render();
            },
            btn: ['确定', '取消'],
            yes: function(index, layero){
                // 提交表单
                form.on('submit(filterSubmit)', function(data){
                    // 获取筛选条件，并进行搜索操作
                    var filterData = data.field;
                    table.reload('dataTable', {
                        where: filterData
                    });

                    // 关闭弹窗
                    layer.close(index);

                    return false;
                });
            }
        });
    });

    // 渲染表格
    table.render({
        elem: '#dataTable',
        url: 'data.json',
        cols: [[
            {field: 'name', title: '姓名'},
            {field: 'age', title: '年龄'},
            {field: 'gender', title: '性别'}
        ]]
    });
});

Salin selepas log masuk

Ringkasan:
Menggunakan komponen dan pemalam Layui, kami boleh melaksanakan fungsi carian dan penapis drag-and-drop dengan mudah. Melalui tetingkap timbul dan komponen borang, pengguna boleh menyesuaikan kriteria carian. Digabungkan dengan komponen jadual, kami boleh memaparkan data dan mencari serta menapis secara dinamik berdasarkan keadaan penapisan pengguna. Fungsi sedemikian boleh meningkatkan kecekapan carian pengguna dan memberikan pengalaman pengguna yang lebih baik.

Atas ialah kandungan terperinci Cara menggunakan Layui untuk melaksanakan fungsi carian dan penapisan seret dan lepas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!