Layui 数据列表

最新推荐文章于 2023-12-19 20:03:12 发布

IronMenPHP

最新推荐文章于 2023-12-19 20:03:12 发布

阅读量1k

点赞数 1

分类专栏： layui 文章标签： php jquery

本文链接：https://blog.csdn.net/qq_54337367/article/details/117195835

版权

layui 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML页面

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
    </script>
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <link rel="stylesheet" href="//unpkg.com/layui@2.6.5/dist/css/layui.css">

    <!-- 引入 layui.js -->
    <script src="//unpkg.com/layui@2.6.5/dist/layui.js"></script>
</head>
<body>
<div class="demoTable">
    搜索：
    <div class="layui-inline">
        <input class="layui-input" name="wheretext" id="demoReload" autocomplete="off">
    </div>
    <button class="layui-btn" id="sou" data-type="reload">搜索</button>
</div>
<table class="layui-hide" id="test" lay-filter="test"></table>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
        <a href="{:url('admin/user/createDocs')}"><button class="layui-btn layui-btn-sm" >添加es索引</button></a>
        <a href="{:url('admin/user/create')}"><button class="layui-btn layui-btn-sm" >添加管理员</button></a>
    </div>
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
    layui.use('table', function(){
        var table = layui.table;
        //温馨提示：默认由前端自动合计当前行数据。从 layui 2.5.6 开始： 若接口直接返回了合计行数据，则优先读取接口合计行数据。
        //详见：https://www.layui.com/doc/modules/table.html#totalRow
        table.render({
            elem: '#test'
            ,url:"http://www.testshop.work/index.php/admin/user/userData"
            ,toolbar: '#toolbarDemo'
            ,title: '用户数据表'
            ,totalRow: true
            ,cols: [[
                {type: 'checkbox', fixed: 'left'}
                ,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true, totalRowText: '合计'}
                ,{field:'username', title:'用户名', width:120, edit: 'text'}
                ,{field:'name', title:'姓名', width:120, edit: 'text'}
                ,{field:'email', title:'邮箱',  edit: 'text'}
                ,{field:'phone', title:'手机号'}
                ,{field:'role_name', title:'角色'}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo',}
            ]]
            ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
            layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                //,curr: 5 //设定初始在第 5 页
                ,groups: 10 //只显示 1 个连续页码
                ,first: false //不显示首页
                ,last: false //不显示尾页
        }
        ,id:'idTest'
        });
        $('#sou').click(function () {
            //上述方法等价于
            table.reload('idTest', {
                where: { //设定异步数据接口的额外参数，任意设
                    wheretext:$('#demoReload').val()
                }
                ,page: {
                    curr: 1 //重新从第 1 页开始
                }
            }); //只重载数据
        })

        table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
            var id = data.id;

            if(layEvent === 'detail'){ //查看
                //do somehing
            } else if(layEvent === 'del'){ //删除
                layer.confirm('真的删除行么'+data.id, function(index){
                    $.ajax({
                        url:"http://www.testshop.work/index.php/admin/user/delete",
                        data:{id:id},
                        type:'DELETE',
                        success:(res)=>{
                            console.log(res)
                            if (res.code == 413){
                                layer.alert(res.mag);
                                return false;
                            }
                            if (res.code == 200){
                                layer.alert(res.mag);
                                obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                            }
                            layer.close(index);
                        }
                    })
                    //向服务端发送删除指令
                });
            } else if(layEvent === 'edit'){ //编辑
                //do something

                //同步更新缓存对应的值
                obj.update({
                    username: '123'
                    ,title: 'xxx'
                });
            } else if(layEvent === 'LAYTABLE_TIPS'){
                layer.alert('Hi，头部工具栏扩展的右侧图标。');
            }
        });
        //工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：'+ data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选': '未全选')
                    break;
            };
        });
    });
</script>
</body>
</html>

后端PHP数据渲染接口

/**
 * 显示资源列表
 *
 * @return \think\Response
 */
public function index()
{
    return view('user/index');
}

/**
 * layui 数据列表
 * @param Request $request
 */
public function userData(Request $request)
{
    //分页
    $page = $request->param('page');
    $limit = $request->param('limit');
    $start = ($page-1)*$limit;
    
    $es = new MyElasticeearch();
    //搜索
    $whereText = $request->param('wheretext');
    if ($whereText == ''){
        $user_data = UserModel::with('roles')
            ->limit($start,$limit)
            ->select()->toArray();
        //总个数
        $count = count(UserModel::select());
    } else {
        //有数据 使用ES 进行查询
        $body = [
            'query' => [
                'fuzzy' => [
                    'username' => $whereText
                ]
            ],
            'highlight' => [
                'pre_tags' => ["<span style='color: red'>"],
                'post_tags' => ["</span>"],
                'fields' => [
                    '*' =>
                        new Highlighter()
                ]
            ],
            'size' => $limit,
            'from' => $start,
        ];

        $res = $es->search_doc('test_index', 'users_type', $body);
        //$user_data = array_column($res['hits']['hits'], '_source');
        $user_data = array_column($res['hits']['hits'], 'highlight');
        //获取搜索到的总个数
        $count = $res['hits']['total']['value'];
    }
        //接口返回要素
        $api = [
            'code' => 0,
            'mag' => '成功',
            'count' => $count,
            'data' => $user_data
        ];
        $api = json_encode($api);
        echo $api;
        die();
}

IronMenPHP

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Layui 数据列表

HTML页面<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Layui</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> &l.
复制链接

扫一扫