layui的数据表格的应用

这是一个layui的后台管理的界面

实现代码是这样的：

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<html>
<head>
    <title>后台管理</title>
    <base href="<%=basePath%>">
    <link rel="stylesheet" href="static/plugins/layui/css/layui.css"  media="all">
    <script src="static/plugins/layui/layui.js"></script>
    <script src="static/plugins/jquery/jquery.js"></script>
    <style type="text/css">
        .title{line-height: 60px;color: #d0cbc1;margin-left: 20px;}
        .searchDiv{height: 50px;background: #e0e0e0;font-size: 20px;color: #696969;line-height: 50px;border-radius: 5px;}
        .searchDiv span{margin-left:10px;}
        .searchDiv label{display: inline-block;vertical-align: middle;padding-left: 8px; margin-left: 20px;text-align: center; height: 30px;line-height: 30px;box-sizing:border-box;border: #95918a solid 1px;border-radius: 5px; font-size: 15px;color: black;background: #f8f8f8;}
        .searchDiv input{padding-left: 12px; vertical-align: middle;height: 30px;border: #95918a solid 1px;border-radius: 5px;font-size: 15px;color: black;background: #f8f8f8;box-sizing:border-box;}
        .searchDiv input:last-child{vertical-align: middle;height: 30px;font-size: 15px;width: 80px;color: #fff;margin-left: 15px; border-radius: 5px;background: #4EBBF9;border: #d9d4c9 1px solid;padding-left: 0;cursor: pointer;}

        .operateBtn{color: #1d1d1d; margin-right: 20px;width: 50px;box-sizing: border-box; background: #fff;padding: 5px 10px;border: #c4bfb5 solid 1px;border-radius: 5px;cursor: pointer;}
        .operateBtn:hover{color: #1d1d1d}
        .operateBtn:last-child{background: #ff5833;color: #fff}
        .operateBtn:last-child:hover{color: #fff}
    </style>
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">想看视频后台管理系统</div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <a class="layui-layout-left title" style="">
            用户列表
        </a>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <c:if test="${sessionScope.admin == null}">
                        <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
                        未登录
                    </c:if>
                    <c:if test="${sessionScope.admin != null}">
                        <img src="${sessionScope.admin.img}" class="layui-nav-img">
                        ${sessionScope.admin.name}
                    </c:if>
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="">基本资料</a></dd>
                    <dd><a href="">安全设置</a></dd>
                </dl>
            </li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree"  lay-filter="test">
                <li class="layui-nav-item">
                    <a href="jsp/manager/index.jsp">首页</a>
                </li>
                <li class="layui-nav-item layui-nav-itemed" onclick="">
                    <a class="" href="javascript:;">用户管理</a>
                    <dl class="layui-nav-child">
                        <dd class="layui-this"><a href="javascript:;">用户列表</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">视频管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="">视频列表</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">视频分类管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="manager/category/list">视频分类列表</a></dd>
                        <dd><a href="manager/category/add">添加分类</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">
            <div class="searchDiv">
                <form>
                    <span style="">搜索栏</span>
                    <label>用户名：</label>
                    <input type="text" placeholder="Search" >
                    <label>手机号：</label>
                    <input type="text" placeholder="Search">
                    <label>性别：</label>
                    <input type="text" placeholder="Search">
                    <input type="submit" class="searchBtn" style="" value="搜 索">
                </form>
            </div>

            <div style="border: #beb9b0 solid 1px;margin-top: 20px;border-radius: 5px;">
                <div style="border-bottom: #beb9b0 solid 1px;height:40px;">
                    <h2 style="margin:10px 0 10px 15px;">用户列表</h2>
                </div>
                <div style="padding:20px;">
                    <div id="test" lay-filter="test"></div>
                </div>
            </div>
        </div>
    </div>
    <div id="operation" style="display: none"><a href="/managerself/user/detail" class="operateBtn">查看</a><a class="operateBtn" lay-event="delete">删除</a></div>
</div>

<script>
    $(".layui-nav-item").click(function () {
        $(this).siblings().removeClass("layui-nav-itemed")
    })

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


    })

</script>
</body>
</html>

可以在这个界面的基础上修改适合自己使用

首先要使用layui的数据表格我们要知道我们是要将一个json字符串传过来然后layui会解析将数据显示在界面上

{"code":0,"msg":"","count":1000,"data":[{"id":10000,"username":"user-0","sex":"女","city":"城市-0","sign":"签名-0","experience":255,"logins":24,"wealth":82830700,"classify":"作家","score":57}]}

这是一个标准的传过来的json我们需要code count 和data三个这三个是不可缺少的实现方法我们可以查询数据库中数据的条数，code我们需要设置为0，data则是我们查询出来的数据，我们可以将这三个加到JSONObject对象中，这个对象有一个put方法可以将这些以json字符串的方式传出

使用layui的数据表格我们需要用到javascript

<script>
    $(".layui-nav-item").click(function () {
        $(this).siblings().removeClass("layui-nav-itemed")
    })

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

        table.render({
            elem: '#test'
            ,url: '/managerself/getAll'
            ,page: {
                layout:['count', 'prev', 'page', 'next', 'skip','limit'],
                limit:10
            }
            ,toolbar:true
            ,cols: [[//表头参数
                {type:'checkbox',  width:60,title:'全选'}
                ,{type:'numbers',  width:60,title:'序号'}
                ,{field: 'username', title: '用户名',minWidth:80}
                ,{field: 'phone', title: '电话号码', minWidth:100}
                ,{field: 'age', title: '年龄',sort:true}
                ,{field: 'birthday', title: '生日'}
                ,{field: 'sex', title: '性别'}
                ,{field: 'operation', title: '操作',templet: function(d){
                        return ' <div><a href="/managerself/user/detail/'+d.id+'" class="operateBtn">查看</a><a class="operateBtn" lay-event="delete">删除</a></div>'
                    }}
            ]]
        });

        table.on('tool(test)',function (obj) {//监听工具事件tool是工具条事件名，
            var data=obj.data;//当前行数据
            var layEvent=obj.event;
            if(layEvent=='delete'){
                layer.confirm("是否删除"+data.username+"?",{title:"提示"},function (index) {

                    $.post({
                        url:"managerself/user/deleteuser/"+data.id
                        , data:{

                        },
                        success:function (data) {
                            if(data=="success"){
                                layer.msg("成功删除用户")
                                obj.del();//自动删除对应行的数据，并更新缓存
                            }
                        },error:function (data) {
                            layer.msg("删除失败")
                        }
                    })
                    layer.close(index)
                    return false;
                })

            }else{

            }
        })

        $(".searchBtn").on("click",function () {
          table.reload('test',{//数据表格重载，比如实现搜索
              url:"managerself/getByCondition",
              where:{//传入的数据，可以把这个封装到一个对象中
                  username:$("input").eq(0).val(),
                  phone:$("input").eq(1).val(),
                  sex:$("input").eq(2).val()
              },
              method:'post'
          })
            return false
        })



    })

</script>
在这个中开启了分页的话那么，page和limit都是可以后台得到的然后我们就可以分页面查询

page:{layout:['count', 'prev', 'page', 'next', 'skip','limit'],limit:10}，同样在mybatis，传入的参数，可以用param1，param2表示，如果是个对象则可以param1.username得到
posted @ 2021-01-15 11:11  飞翔的阿飞  阅读(213)  评论(0)    收藏  举报