layUi项目实战

最新推荐文章于 2024-08-02 02:06:22 发布
最新推荐文章于 2024-08-02 02:06:22 发布
阅读量1.1k 收藏 3
点赞数 1
分类专栏： # layUi
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xsh096011/article/details/117516707
版权

右击页面，检查

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

@layout("/common/_container.html", {js:["/assets/userinfo/system_account_batch_add.js"]}){

<div class="layui-body-header">
    <span class="layui-body-header-title">系统账户批量生成</span>
</div>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-sm12 layui-col-md12 layui-col-lg12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="layui-form toolbar">
                        <div class="layui-form-item">
                            <button id="btnSearch" class="layui-btn icon-btn layui-disabled"><i class="layui-icon">&#xe615;</i>查询
                            </button>
                            <div class="layui-inline">
                                <button id="btnAdd" class="layui-btn icon-btn"><i class="layui-icon">&#xe654;</i>新增
                                </button>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <div id="valuation" style="margin-bottom: 10px">
                            </div>
                        </div>

                    </div>
                    <table class="layui-table" id="sysAccountListTable" lay-filter="sysAccountListTable"></table>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="tableBar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="disable">禁用</a>
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="enable">启用</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
</script>
@}



layui.use(['table','admin','ax','laydate','form'], function () {
    var $ = layui.$;
    var table = layui.table;
    var form = layui.form;
    var $ax = layui.ax;

    var sysAccountListTable = {
        tableId: "sysAccountListTable"
    };

    $('#btnSearch').click(function () {
        sysAccountListTable.search();
    });
    sysAccountListTable.initColumn = function () {
        return [[
            {type: 'checkbox', LAY_CHECKED: true, hide: true},
            {field: 'id', align: "center", sort: true, title: 'id',width: 110},
            {field: 'userId', align: "center", sort: true, title: 'UID',width: 110},
            {field: 'operatingTime', align: "center", sort: true, title: '操作时间',width: 200},
            {field: 'operationOf', align: "center", sort: true, title: '操作人',width: 110},
            {field: 'remark', align: "center", sort: true, title: '备注',width: 110},
            {
                field: 'status', align: "center", sort: true, title: '限制', width: 110, templet: function(d) {
                    if (d.status === 1) {
                        return '登录';
                    } else {
                        return '禁止登录';
                    }
                }
            },
            {align: 'center', toolbar: '#tableBar', title: '操作',width: 250}
        ]];
    };

    // 渲染表格
    table.render({
        elem: '#' + sysAccountListTable.tableId,
        url: Feng.ctxPath + '/userinfo/system/account/list',
        page: true,
        toolbar: '#toolbar',
        defaultToolbar: ['filter', 'exports'],
        height: "full-98",
        cellMinWidth: 100,
        cols: sysAccountListTable.initColumn(),

    });

    sysAccountListTable.search = function () {
        var queryData = {};
        table.reload(sysAccountListTable.tableId, {
            where: queryData, page: {curr: 1}
        });

        $('#hide').prop("checked", false);
        form.render();
    };

    // 绑定添加事件
    $('#btnAdd').click(function () {
        window.location.href = Feng.ctxPath + "/userinfo/system/account/add/page";
    });

    // 行内操作事件
    table.on('tool(' + sysAccountListTable.tableId + ')', function (obj) {
        var data = obj.data;
        var layEvent = obj.event;

        var ids = [];
        ids[0] = data.id;

        if (layEvent === 'enable') {
            sysAccountListTable.enable(data);
        }
        if (layEvent === 'disable') {
            sysAccountListTable.disable(data);
        }
        if (layEvent === 'delete') {
            sysAccountListTable.delete(data);
        }
    });

    sysAccountListTable.enable = function (data) {
        $.ajax({
            type: "post",
            url: Feng.ctxPath + "/userinfo/system/account/enable?id=" + data.id,
            async: false,
            contentType: false,
            processData: false,
            success: function (data) {
                if (data.code === 200) {
                    Feng.success("启用成功");
                    table.reload(sysAccountListTable.tableId);
                } else {
                    Feng.error(data.message);
                }
            },
            error: function (data) {
                Feng.error("启用失败！" + data.message);
            }
        });
    };

    sysAccountListTable.disable = function (data) {
        $.ajax({
            type: "post",
            url: Feng.ctxPath + "/userinfo/system/account/disable?id=" + data.id,
            async: false,
            contentType: false,
            processData: false,
            success: function (data) {
                if (data.code === 200) {
                    Feng.success("禁止用户登录成功");
                    table.reload(sysAccountListTable.tableId);  // 重新渲染table
                } else {
                    Feng.error(data.message);
                }
            },
            error: function (data) {
                Feng.error("禁止用户登录失败！" + data.message);
            }
        });
    };

    sysAccountListTable.delete = function (data) {
        $.ajax({
            type: "post",
            url: Feng.ctxPath + "/userinfo/system/account/delete?id=" + data.id,
            async: false,
            contentType: false,
            processData: false,
            success: function (data) {
                if (data.code === 200) {
                    Feng.success("删除成功");
                    table.reload(sysAccountListTable.tableId);
                } else {
                    Feng.error(data.message);
                }
            },
            error: function (data) {
                Feng.error("删除失败！" + data.message);
            }
        });
    };




@layout("/common/_form.html",{js:["/assets/userinfo/system_account_add.js"]}){

<div class="layui-body-header">
    <span class="layui-body-header-title">新增账户</span>
</div>

<div class="layui-fluid " style="">
    <div class="layui-card">
        <div class="layui-card-body">
            <form id="businessForm" lay-filter="businessForm" class="layui-form model-form"
                  style="max-width: 700px;margin: 40px auto;">

                <div class="layui-form-item">
                    <label class="layui-form-label">新增账号个数<span style="color: red;">*</span></label>
                    <div class="layui-input-block">
                        <input id="number" name="number" placeholder="1" type="text" class="layui-input"
                               maxlength="50"
                               lay-verify="required" required autocomplete="off"/>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">备注（必填）<span style="color: red;">*</span></label>
                    <div class="layui-input-block">
                        <input id="remark" name="remark" placeholder="添加备注" type="text" class="layui-input"
                               maxlength="50"
                               lay-verify="required" required autocomplete="off"/>
                    </div>
                </div>

                <div class="layui-form-item">
                    <input type="checkbox" id="selectPassword" name="selectPassword" title="指定密码" lay-skin="primary" checked>
                    <div class="layui-input-block">
                        <input id="password" name="password" placeholder="123" type="text" class="layui-input"
                               maxlength="50"/>
                    </div>
                </div>

                <div class="layui-form-item" style="padding-left: 110px;">大写，小写，8位以上，特殊字符</div>

                <div class="layui-form-item">
                    <input type="checkbox" id="selectGoogleCode" name="selectGoogleCode" title="指定谷歌码" lay-skin="primary" checked>
                    <div class="layui-input-block">
                        <input id="googleCode" name="googleCode" placeholder="123" type="text" class="layui-input"
                               maxlength="50"/>
                    </div>
                </div>

                <div class="layui-form-item" style="padding-left: 110px;">选择指定则密码和谷歌码为指定的，否则随机生成</div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-filter="btnSubmit" lay-submit>&emsp;确定&emsp;</button>

                        <button class="layui-btn layui-btn-primary" type="button" id="close">&emsp;关闭&emsp;</button>

                        <button class="layui-btn layui-btn-primary" type="button" id="backupPage">&emsp;返回&emsp;
                        </button>
                    </div>
                </div>
            </form>
            <table class="layui-table" id="sysAccountListTable" lay-filter="sysAccountListTable"></table>
            <div class="layui-input-block" style="padding-left: 160px;">
                密码与谷歌仅显示一次，关闭后不可见
            </div>
        </div>
    </div>
</div>
@}


layui.use(['table','form', 'admin', 'ax', 'upload', 'laydate', 'selectPlus'], function () {
    var $ = layui.jquery;
    var $ax = layui.ax;
    var table = layui.table;
    var form = layui.form;
    var admin = layui.admin;
    var upload = layui.upload;
    var laydate = layui.laydate;
    var selectPlus = layui.selectPlus;

    var sysAccountListTable = {
        tableId: "sysAccountListTable"
    };
    sysAccountListTable.initColumn = function () {
        return [[
            {type: 'checkbox', LAY_CHECKED: true, hide: true},
            {field: 'userId', align: "center", sort: true, title: 'UID',width: 110},
            {field: 'email', align: "center", sort: true, title: '邮箱',width: 200},
            {field: 'password', align: "center", sort: true, title: '密码',width: 110},
            {field: 'googleCode', align: "center", sort: true, title: '谷歌码',width: 200}
        ]];
    }

    // 渲染表格
    table.render({
        elem: '#' + sysAccountListTable.tableId,
        url: Feng.ctxPath + '/userinfo/system/account/temporary/list',
        page: true,
        toolbar: '#toolbar',
        defaultToolbar: ['filter', 'exports'],
        height: "full-98",
        cellMinWidth: 100,
        cols: sysAccountListTable.initColumn(),
    });

    // 表单提交事件
    form.on('submit(btnSubmit)', function () {
        var formData = new FormData($("#businessForm")[0]);
        // 复选框判断是否选中
        var passwordCheck = document.getElementById("selectPassword").checked;
        var googleCodeCheck = document.getElementById("selectGoogleCode").checked;

        if(passwordCheck) {
            var reg = /^(?![\d]+$)(?![a-zA-Z]+$)(?![~!@#\$%\^&\*\(\)_\-\+=\{\}\[\]\|;:,<>\.\?\/]+$)[\da-zA-Z~!@#\$%\^&\*\(\)_\-\+=\{\}\[\]\|;:,<>\.\?\/]{8,32}$/;
            if(!reg.test(document.getElementById("password").value)) {
                Feng.error("密码不符合规范，请重新输入");
                return;
            } else {
                console.log('xx111');
            }
        }
        var googleCode = $("#googleCode").val();
        var password = $("#password").val();
        if (googleCodeCheck == true) {
            if (googleCode.length != 16) {
                Feng.error("输入长度不满足16位");
                return;
            }
        }

        $.ajax({
            type: "post",
            url: Feng.ctxPath + "/userinfo/system/account/add",
            async: false,
            data: formData,
            contentType: false,
            processData: false,
            success: function (data) {
                if (data.code === 200) {
                    Feng.success("添加成功");
                    form.render();
                    table.reload(sysAccountListTable.tableId);
//                    window.location.href = Feng.ctxPath + "/userinfo/system/account/batch/add/page";
                } else {
                    Feng.error(data.message);
                }
            },
            error: function (data) {
                Feng.error("添加失败！" + data.message);
            }
        });
        //当前页的刷新
        // $(".layui-laypage-btn")[0].click();
        return false;
    });

    // 返回按钮
    $("#backupPage").click(function () {
        window.location.href = Feng.ctxPath + "/userinfo/system/account/batch/add/page";
    });

    // 关闭清除一次性显示在表单的系统账户
    $("#close").click(function () {
        let uri = '/userinfo/system/account/clear'

        $.ajax({
            type: "post",
            url: Feng.ctxPath + uri,
            async: false,
            dataType: "json",
            contentType: 'application/json; charset=UTF-8',
        });
        //当前页的刷新
        table.reload(sysAccountListTable.tableId);
        // $(".layui-laypage-btn")[0].click();
    });
});

table.reload(sysAccountListTable.tableId); // 重新渲染table
placeholder=“添加备注”

<div class="layui-form-item" style="padding-left: 110px;">大写，小写，8位以上，特殊字符</div>

//当前页的刷新
// $(".layui-laypage-btn")[0].click();

逍遥浪子~
关注
专栏目录
Layui项目实战
黄瓜炒鸡蛋的博客
06-12 1256
Layui基础，Layui绑定后台数据，支持翻页，支持新增数据，支持编辑数据，支持删除数据，包含父子窗体
LayUI项目
weixin_66202611的博客
07-21 1092
1.为了更好的展现前台效果，我们需要借助工具类formSelectshttps下载地址https怎么下载formSelects点击以上提供的网址里的dist,开元的源码都在里面dist里都是需要导入的插件点击code即可下载下载完毕之后导入项目中导入完毕后，下一步就是引入，引入代码如下，切记引入代码时注意路径问题,还有就是注意导入顺序的问题，先引入fromSelects在引入JavaScript...
layui 项目实战.md
03-26
一个又一个夜晚，踩过 layui 一个又一个坑，特此纪念
layui - - - 创建项目（图书管理系统）
最新发布
weixin_41485756的博客
08-02 36
1.创建项目 在左侧项目管理器中右键，新建->项目。 选择“普通项目”，选择“基本HTML项目”，输入项目名，“浏览”选择项目路径，最后点“创建”。 一个空项目就创建完成了。 2.下载 layui js 文件 进入 layui 官网：https://layui.dev/docs/2/，下载引用获取 layui...
layui案例
Zhangrunhong的博客
07-10 1386
文章目录1.导入相关依赖2.dao层去访问数据3.web层去调用dao层给前台返回数据4.在struts_sy.xml进行配置5.js界面6.写jsp 1.导入相关依赖 前言：这个案例写了一个用户表，和角色表，根据用户的所拥有权限展示菜单 用户的权限通过该用户所绑定的角色获得 角色绑定权限，用户通过角色间接获得权限 记住按钮和菜单同属于一张表所以要用 type做区分 自定义标签依赖：代码如下 &l...
Layui项目实战干货总结
我是一只蘑菇17的博客
10-22 448
layer弹出层显示在top顶层
Tp5+Layui项目实战
Valhalla_God的博客
12-02 597
这里写自定义目录标题踩坑新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 踩坑 引入TP5静态文件的时候如果入口文件和static文件夹同级不能/public要/static 调试页面的时候F12不要在左右打开 layui-
springboot layui项目实战
03-08
下面是一个简单的Spring Boot和Layui项目实战步骤： 1. 创建Spring Boot项目：使用Spring Initializr创建一个新的Spring Boot项目，选择所需的依赖项，如Spring Web、Spring Data JPA等。 2. 配置数据库：在...
宿舍管理系统（附源码）SpringBoot+Layui+Mybatis完整项目
03-18
关注公众号获取项目sql：javachengshen，回复：宿舍管理系统。 这份资源是一个基于Spring Boot、Layui和MyBatis的宿舍管理系统，它包含了多个模块，涵盖了学生管理、宿舍管理、公告管理、表格统计等多个方面。采用了...
LayUI框架示例整合
06-21
自己写的前端LayUI框架示例整合，适合小白学习（大神勿喷。谢谢）
实战中的Layui
qq_46258819的博客
03-09 222
前言 最近经常遇到需要使用layui的地方，走了些许弯路终于理顺了一点点，写个博客备忘。 Laypage laypage是layui提供的实现分页效果的方法，能够快速而且美观地实现分页，下面是个小示例。 官方文档：https://layui.11dz.cn/demo/laypage.html laypage.render({ elem: 'demo_1',//容器 count: count, //数据总数，从服务端得到 theme: '#1890ff',//主题
layui封装项目
08-23
layui封装layui封装 有任何问题可以和我留言
springboot+layui简单demo实例
04-18
idea开发工具，使用了mybatis generator插件和lombook插件，maven导入依赖后，安装lombook或者自己封装即可。有问题请私信
LayUi基础入门【附有案例从0到1详解】
m0_74315688的博客
07-11 4619
不怎么怎么使用LayUi？一篇文章保姆级教学，让你一秒学会使用LayUi！！
layui组件实例
persistence_PSH的博客
03-30 747
文章目录组件实例1、弹出层1、使用方式2、基础参数3、示例2、日期与时间选择3、分页 组件实例 1、弹出层 1、使用方式 模块加载名称：layer，独立版本：https://layer.layui.com/ 第一种作为独立组件使用，在https://layer.layui.com/下载组件包，在需要使用的页面加载1.8以上的jquery的js和layer.js文件 独立使用需要用到Bootstrap的jquery的js文件 <link rel="stylesheet" type="text/css"
LayUI之项目（下）
weixin_66202611的博客
07-23 439
效果图》加了自定义模板后的数据。
案例layUI
qq_45935397的博客
01-20 688
登录:将layui文件导入到web目录下 编写账户名密码验证码的后台验证 用《a》看不清换一张《/a》标签设置刷新验证码 登录成功-->/home -->home.jsp 更新左上方的用户名 从session域中取出username el表达式在jsp通过key取值； 在域中的取值：先在request域中找；没有则在session中寻找；还是没有则会到ServletContext中找；再没有就是代码写错了 getServletContext()...
Spring mybatis shiro layui项目实战物业管理系统视频讲解
欣茂Java学院技术专栏
04-03 317
SpringMVC、MyBatis、Shiro物业管理系统项目演示
layui项目实战：表格与图片处理技巧
这个资源详细介绍了如何在layui项目中结合SpringBoot处理表格图片显示问题，以及如何实现点击按钮弹窗添加数据的功能。对于正在使用layui进行项目开发的开发者来说，这是一个非常实用的参考资料。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值