layer ui table、page、date、util等使用解析

最新推荐文章于 2024-08-03 13:41:47 发布
小丑的忧伤
最新推荐文章于 2024-08-03 13:41:47 发布
阅读量426
点赞数
文章标签： html layui
本文链接：https://blog.csdn.net/wdz985721191/article/details/116446910
版权
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>测试</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">
    <link rel="stylesheet" href="../../lib/layui-v2.5.5/css/layui.css" media="all">
    <script src="../../js/common.js" charset="utf-8"></script>
</head>
<style>
    // 内容居中
    .layui-table th {
        text-align: center;
    }
    // 内容居中
    .layui-table td {
        text-align: center;
    }
    // 分页居中
    .layui-table-page {
        text-align: center;
    }
</style>
<body>
<form class="layui-form" action="">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">检索内容</label>
            <div class="layui-input-inline">
                <input type="text" name="phone" id="phone" placeholder="检索内容" maxlength="13" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">时间</label>
            <div class="layui-input-inline">
                <input type="text" name="startTime" id="startTime" placeholder="开始时间" readonly class="layui-input">
            </div>
            <div class="layui-input-inline">
                <input type="text" name="endTime" id="endTime" placeholder="结束时间" readonly class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">下拉框</label>
            <div class="layui-input-inline">
                <select name="grade" lay-filter="aihao">
                    <option value="0">选项1</option>
                    <option value="5">选项2</option>
                </select>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline" style="margin-left: 111px">
            <div class="layui-input-inline">
                <button type="button" class="layui-btn layui-btn-primary" οnclick="resetFun()">重置</button>
                <button type="button" class="layui-btn layui-btn-primary" οnclick="searchFun()">查询</button>
            </div>
        </div>
    </div>
</form>
// 自定义功能按钮
<div style="text-align: left;margin-left:110px ">
    <button type="button" class="layui-btn layui-btn-primary" οnclick="exportFun()">导出</button>
</div>
// 行事件按钮
<script type="text/html" id="operations">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs" lay-event="integral">添加积分</a>
    <a class="layui-btn layui-btn-xs" lay-event="disable">禁用</a>
</script>
<table class="layui-hide" id="test" lay-filter="test"></table>
<script src="../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="../../js/jquery/dist/jquery.js" charset="utf-8"></script>

<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script>
    // 定义并初始化layerui工具
    var table,util;
    layui.use(['table', 'util', 'laydate'], function () {
        table = layui.table;
        util = layui.util;
        laydate = layui.laydate;
        //日期弹框常规用法
        laydate.render({
            elem: '#startTime'
            , format: 'yyyy-MM-dd'
        });
        laydate.render({
            elem: '#endTime'
            , format: 'yyyy-MM-dd'
        });
        // 加载列表数据
        loadTable();
    });
    // 检索事件
    function searchFun(){
        var phone = $("#phone").val();
        var startTime = $("#startTime").val();
        var endTime = $("#endTime").val();
        var grade = $('select[name="grade"]').val();
        var userName = $("#userName").val();
        var updateStartTime = $("#updateStartTime").val();
        var updateEndTime = $("#updateEndTime").val();
        loadTable(phone,startTime,endTime,grade,userName,updateStartTime,updateEndTime);
    }
    // 重置
    function resetFun() {
        $("#list_type_name").val("");
    }
    // 加载列表数据
    function loadTable(phone,startTime,endTime,grade,userName,updateStartTime,updateEndTime) {
        // 使用table组件初始化列表，该组件使用的是解析任意数据的那个
        table.render({
            // 绑定id，table需要的
            elem: '#test'
            // 数据请求URL
            , url: url + '/sys/u/list'
            // 请求参数
            , where:{
                token:localStorage.getItem("token")
                ,phone:phone
                ,registStartTime:startTime
                ,registEndTime:endTime
                ,grade:grade
                ,nickName:userName
                ,updateStartTime:updateStartTime
                ,updateEndTime:updateEndTime
            }
            // 生成的行数据
            , cols: [[
                {field: 'snId', title: '会员ID', fixed: 'left'}
                , {field: 'nickName', title: '昵称'}
                , {field: 'phone', title: '手机号'}
                , {
                    field: 'sex', title: '性别', templet: function (res) {
                        if (res.sex == 0) {
                            return "女";
                        } else {
                            return "男";
                        }
                    }
                }
                , {field: 'grade', title: '等级'}
                , {field: 'integral', title: '积分'}
                , {
                    field: 'createTime', title: '注册时间', templet: function (res) {
                        return util.toDateString(res.createTime, "yyyy-MM-dd HH:mm:ss")
                    }
                }
                , {
                    field: 'lastPayTime', title: '最近一次消费时间', templet: function (res) {
                        return util.toDateString(res.lastPayTime, "yyyy-MM-dd HH:mm:ss")
                    }
                }
                , {fixed: 'right', title: '操作', toolbar: '#operations', width: 200}
            ]]
            // 重置默认pageNum和limit，将参数设置为自己系统需要的参数
            , request:{
                pageName:'pageNum',
                limitName:'pageSize'
            }
            // 开启分页
            , page: true
            // 自定义返回状态码
            , response: {
                statusCode: "200" //重新规定成功的状态码为 200，table 组件默认为 0
            }
            // 自定义解析返回结果
            , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                if (res.code == "201"){
                    window.location="../login.html";
                }
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.list //解析数据列表
                };
            }
        });
    }
    // 自定义按钮功能
    function exportFun(){
        window.open(url+"/sys/u/exportUser?token="+localStorage.getItem("token"));
    }
</script>

</body>
</html>