2021-09-23 工作记录--LayUI-搜索重载

最新推荐文章于 2023-04-04 14:02:39 发布

小呀小萝卜儿

最新推荐文章于 2023-04-04 14:02:39 发布

阅读量261

点赞数 2

分类专栏：工作-LayUI 文章标签： layui 前端 javascript

本文链接：https://blog.csdn.net/weixin_48850734/article/details/120917698

版权

工作-LayUI 专栏收录该内容

47 篇文章 4 订阅

订阅专栏

此博客介绍了如何使用LayUI框架实现搜索重载功能。通过HTML和JS代码展示了两种不同的搜索重载方法，包括监听按钮点击事件和动态获取表单数据来重载表格内容。主要涉及layui的表单、表格和数据接口的使用。

摘要由CSDN通过智能技术生成

一、LayUI-搜索重载

HTML：
在这里插入图片描述
JS：

补充搜索重载的另外一种写法：【直接看js部分：搜索重载1和搜索重载2】

<!DOCTYPE html>
<html>
<style>
    *{font-size: 12px !important;}
    .layui-inline{
        width: 100px;
    }
</style>
<head>
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport">
    <link rel="stylesheet" href="__PUBLIC_JS__/layui/css/layui.css?v={:config('hisiphp.version')}">
    <link rel="stylesheet" href="__PUBLIC_JS__/layer/skin/default/layer.css">

    <title>查看日志</title>
    <link rel="stylesheet" type="text/css" href="/theme/index/default/css/ydui.css" />
</head>
{include file="system@block/layui" /}
<body>
    <div>
        <div class="demoTable" style="margin-top: 10px;">
            <form class="layui-form" >
                <div class="layui-inline" style="margin-left: 10px;" >
                    <input class="layui-input" name="name" autocomplete="off" placeholder="输入员工姓名">
                </div>
                <div class="layui-inline">
                    <input class="layui-input" name="title" autocomplete="off" placeholder="操作内容">
                </div>
                <div class="layui-inline">
                    <input class="layui-input" name="admin" autocomplete="off" placeholder="操作人">
                </div>
                <div class="layui-inline wx_add_widthBox">
                    <select name="remark" >
                        <option value="">操作类型</option>
                        <option value="1">新增</option>
                        <option value="2">修改</option>
                        <option value="3">删除</option>
                    </select>
                </div>
                <div class="layui-inline wx_add_widthBox">
                    <select name="convenient" >
                        <option value="">快捷查询</option>
                        <option value="1">今日</option>
                        <option value="4">昨日</option>
                        <option value="2">本周</option>
                        <option value="5">上周</option>
                        <option value="3">本月</option>
                        <option value="6">上月</option>
                        <option value="7">全部</option>
                    </select>
                </div>
                <button class="layui-btn" data-type="reload" style="margin-left: 4px;" type="button" id="reload">搜索</button>
            </form>

        </div>
        <table class="layui-hide" id="demo" lay-filter="test" style="min-height: 600px;"></table>
    </div>
</body>
</html>
<script>
        layui.use(['layer', 'laydate','table'], function(){
        var layer = layui.layer //弹层
            ,table = layui.table //表格

            table.render({
                elem: '#demo'
                ,id: 'testReload'
                ,url: "{:url('logList')}" //数据接口
                ,title: '日志表'
                ,where: {'type':{$type}}
                ,page: true //开启分页
                ,cols: [[ //表头
                    {field: 'real_name', title: '用户名',align:'center'}
                    ,{field: 'title', title: '操作',align:'center' }
                    ,{field: 'old', title: '旧数据',align:'center'}
                    ,{field: 'new', title: '新数据',align:'center'}
                    ,{field: 'detail_id', title: '原序号',align:'center'}
                    ,{field: 'input_time', title: '时间',align:'center'}
                    ,{field: 'admin', title: '操作人',align:'center'}
                ]]
            });
            
            // 搜索重载1
            $ = layui.$,
            active = {
            	reload: function(obj) {
               		//执行重载
               		table.reload('testReload', {
                 		 page: {
                    		curr: 1 //重新从第 1 页开始
                  		},
                  		 where: obj
              		}, 'data');
            	}
           }
        })

        // 搜索重载2
        $('#reload').on('click', function() { // reload对应上面搜索的id
            var name = $('input[name=name]').val()
            var admin = $('input[name=admin]').val()
            var title = $('input[name=title]').val()
            var remark = $('select[name=remark]').val();
            var convenient=$('select[name=convenient]').val()
            let obj = {
                name,admin,title,remark,convenient
            }
            active.reload(obj)
        });
</script>