집 >웹 프론트엔드 >JS 튜토리얼 >Layui를 사용하여 드래그 앤 드롭 검색 및 필터링 기능을 구현하는 방법

Layui를 사용하여 드래그 앤 드롭 검색 및 필터링 기능을 구현하는 방법

王林원래의: 2023-10-27 11:55:461366검색

배경 소개:
인터넷의 급속한 발전으로 인해 데이터의 양이 계속 증가하고 있으며, 데이터를 효율적으로 필터링하고 검색하는 방법은 점점 더 많아지고 있습니다. 중요한 문제가 됩니다. Layui는 다양한 기능을 쉽게 구현할 수 있는 풍부한 구성요소와 플러그인을 갖춘 경량 프런트엔드 UI 프레임워크입니다. 이 기사에서는 Layui를 사용하여 드래그 앤 드롭 검색 및 필터 기능을 구현하여 사용자가 필요에 따라 검색 조건을 사용자 정의할 수 있는 방법을 소개합니다.

구현 아이디어:

Layui의 테이블 구성 요소를 사용하여 데이터를 표시하고 검색 창을 추가합니다.
Layui의 레이어 컴포넌트를 사용하여 사용자가 정의한 검색 조건에 대한 팝업 창을 구현하세요.
Layui의 양식 구성 요소를 사용하여 검색 양식을 생성하세요.
레이이의 드래그 앤 드롭 컴포넌트를 사용해 드래그 앤 드롭 검색 및 필터링 기능을 구현해보세요.

구체적 구현:

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>

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: '性别'}
        ]]
    });
});

요약:
Layui 컴포넌트와 플러그인을 사용하면 드래그 앤 드롭 검색 및 필터 기능을 쉽게 구현할 수 있습니다. 팝업 창과 양식 구성 요소를 통해 사용자는 검색 기준을 사용자 정의할 수 있습니다. 테이블 구성 요소와 결합하여 데이터를 표시하고 사용자의 필터링 조건에 따라 동적으로 검색 및 필터링할 수 있습니다. 이러한 기능은 사용자의 검색 효율성을 크게 향상시키고 더 나은 사용자 경험을 제공할 수 있습니다.

위 내용은 Layui를 사용하여 드래그 앤 드롭 검색 및 필터링 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript layui html ui

성명：

이전 기사：HTML, CSS 및 jQuery: 아름다운 페이지 스크롤 효과 구축다음 기사：HTML, CSS 및 jQuery: 아름다운 페이지 스크롤 효과 구축