ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 编程语言> 文章详细

基于javaweb+jsp的企业行政信息管理系统

2022-02-25 20:33:28  阅读：191  来源： 互联网

标签：function layer javaweb form layui let 信息管理系统 jsp layedit


基于javaweb+jsp的企业行政信息管理系统

JavaWeb JavaBean JSP MVC MySQL Tomcat JavaScript Layui Ajax

基础JSP+Servlet或JSP+SSM(Spring、SpringMVC、MyBatis)框架或JSP+SSM+Maven(pom.xml)框架或SpringBoot…均可

开发工具：idea或eclipse或myeclipse

部分代码实现JSP

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>企业行政信息管理系统</title>
    <link rel="stylesheet" href="js/layui/css/layui.css">
    <script src="js/jquery.js"></script>
    <script src="js/layer.js"></script>
</head>
<body class="layui-layout-body">

</form>
<script src="js/layui/layui.js" charset="utf-8"></script>
<script>
    layui.use(['form', 'layedit', 'laydate'], function () {
        let form = layui.form, layer = layui.layer, layedit = layui.layedit;
        //创建一个编辑器
        let editIndex = layedit.build('LAY_demo_editor');
        //自定义验证规则
        form.verify({
            content: function (value) {
                layedit.sync(editIndex);
            }
        });

        //监听提交
        form.on('submit(submit-button)', function (data) {
            $.post("PeiServlet?action=add&", data.field, function () {
                let index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引

                });
                obj.update({});//同步更新缓存对应的值
            } else if (layEvent === 'LAYTABLE_TIPS') {
                layer.alert('Hi，头部工具栏扩展的右侧图标。');
            }
        });
        //头工具栏事件
        table.on('toolbar(myTable)', function (obj) {
            if ('add' == obj.event) {
                layer.msg('添加');
                layer.open({
                    type: 2,
                    area: ['800px', '550px'],

</body>
</html>

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>培训详情</title>
    <script src="js/jquery.js"></script>
    <link rel="stylesheet" href="js/layui/css/layui.css">
</head>
<body style="padding: 20px">
<form class="layui-form" action="">
    <div class="layui-form-item">

        let editIndex = layedit.build('LAY_demo_editor');
    });
</script>
</body>

    <div class="layui-header">
        <div class="layui-logo" style="font-weight: bold;font-size: 19px">企业行政信息管理系统</div>
        <ul class="layui-nav layui-layout-left"></ul>
        <c:if test="${loginUser==null}">
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item"><a href="login.jsp">请登录</a></li>
            </ul>
        </c:if>
        <c:if test="${loginUser!=null}">
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item"><a>${loginUser.username}</a></li>
                <li class="layui-nav-item"><a href="AuthServlet?action=logout">退出登录</a></li>
            </ul>
        </c:if>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">

        let form = layui.form, layer = layui.layer, layedit = layui.layedit;
        //创建一个编辑器
        let editIndex = layedit.build('LAY_demo_editor');
        //自定义验证规则
        form.verify({
            content: function (value) {
                layedit.sync(editIndex);
            }
        });

        //监听提交
        form.on('submit(submit-button)', function (data) {
            $.post("PeiServlet?action=edit&", data.field, function () {
                let index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                parent.layer.close(index); //再执行关闭
                parent.location.reload();//刷新父级页面

            }, "text");//这里用的是post提交，如果不懂可以参考JQuery中ajax提
            return false;
        });
    });

                        curr: 1 //重新从第 1 页开始
                    }
                });
            }
        };
        $('.searchTable .layui-btn').on('click', function () {
            let type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
</script>
</body>
</html>

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加培训</title>
    <script src="js/jquery.js"></script>
    <link rel="stylesheet" href="js/layui/css/layui.css">
</head>
<body style="padding: 20px">
<form class="layui-form" action="">

    <div class="layui-form-item">
        <label class="layui-form-label">主题：</label>
        <div class="layui-input-block">
            <input type="text" name="peiName" lay-verify="required" class="layui-input">
        </div>
    </div>

        <label class="layui-form-label">时间：</label>
        <div class="layui-input-block">
            <input type="text" name="peiDate" lay-verify="required" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">主讲人：</label>
        <div class="layui-input-block">
            <input type="text" name="peiRen" lay-verify="required" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">部门：</label>
        <div class="layui-input-block">
            <input type="text" name="peiDep" lay-verify="required" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">地点：</label>

            <input type="text" name="peiShi" lay-verify="required" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">备注：</label>
        <div class="layui-input-block">
            <textarea type="text" name="peiText" class="layui-input" style="height: 100px;padding-left: 10px;" placeholder="请输入内容......"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="submit-button">添加</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>

        <label class="layui-form-label">时间：</label>
        <div class="layui-input-block">
            <input type="text" name="peiDate" lay-verify="required|peiDate" class="layui-input" value="${vo.peiDate}">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">主讲人：</label>
        <div class="layui-input-block">
            <input type="text" name="peiRen" lay-verify="required|peiRen" class="layui-input" value="${vo.peiRen}">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">部门：</label>
        <div class="layui-input-block">
            <input type="text" name="peiDep" lay-verify="required|peiDep" class="layui-input" value="${vo.peiDep}">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">地点：</label>

                        },
                        {
                            field: 'peiRen',
                            title: '主讲人',
                        },
                        {
                            field: 'peiDep',
                            title: '部门',
                        },
                        {
                            field: 'peiShi',
                            title: '地点',
                        },
                        {
                            field: 'peiText',
                            title: '备注',
                        },
                    {
                        align: 'center',
                        fixed: 'right',
                        title: '操作',

            toolbar: '#myToolbar', //开启头部工具栏，并为其绑定左侧模板
            defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            title: '培训列表',
            cols: [
                [
                        {
                            field: 'peiName',
                            title: '主题',
                            templet: vo => (vo = vo.peiName) ? '<a href="#" style="color: #009688;">' + vo + '</a>' : '',
                            event: 'info',
                        },
                        {
                            field: 'peiDate',

                <button class="layui-btn" data-type="reload">搜索</button>
            </div>
        </div>
        <!-- 内容主体区域 -->
        <table class="layui-hide" id="myData" lay-filter="myTable"></table>
    </div>
</div>
<script src="js/layui/layui.js"/>
<script>
    //JavaScript代码区域
    layui.use('element', function () {
        let element = layui.element;
    });
</script>
<script type="text/html" id="myToolbar">

                <!-- 侧边栏 -->
                <jsp:include page="menu.jsp">
                    <jsp:param value="active" name="Pei_active"/>
                </jsp:include>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <div class="search_style" style="padding-top: 10px;padding-left: 15px;">
            <div class="searchTable">
                搜索：
                <div class="layui-inline">
                    <input class="layui-input" name="search_keyword" id="search_keyword" autocomplete="off" placeholder="主题">
                    <input type="hidden" class="layui-input" name="searchColumn" id="searchColumn" autocomplete="off" value="pei_name">

                    maxmin: true,
                    content: 'pei_add.jsp'
                });
            } else {
                //layer.alert('这是工具栏右侧自定义的一个图标按钮');
            }
        });
        //搜索
        let $ = layui.$, active = {
            reload: function () {
                let url = 'PeiServlet?action=list&keyword=' + $('#search_keyword').val() + '&searchColumn=' + $('#searchColumn').val();
                //执行重载
                table.reload('myTable', {
                    url: url,

        table.render({
            elem: '#myData',
            id: 'myTable',
            url: 'PeiServlet?action=list',
            parseData: function (res) { //res：即为原始返回的数据
                let result = this.page.curr ? res.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr) : res.slice(0, this.limit);
                return {
                    "code": 0, //解析接口状态
                    "msg": '', //解析提示文本
                    "count": res.length, //解析数据长度（集合个数）
                    "data": result //解析数据列表
                };
            },
            page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'], //自定义分页布局
                groups: 1, //只显示 1 个连续页码
                first: false, //不显示首页
                last: false, //不显示尾页

                        templet: vo => {
                            let flag = ${loginUser.userType == '管理员'};
                            return flag ? '<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>' : '';
                        }
                    }
                ]
            ],
        });
        //监听工具条
        table.on('tool(myTable)', function (obj) { //注：tool 是工具条事件名，myTable 是 table 原始容器的属性 lay-filter="对应的值"
            let data = obj.data; //获得当前行数据
            let layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            if (layEvent === 'del') { //删除
                // layer.confirm('删除' + data.peiName + "?", function (index) {

            <input type="text" name="peiShi" lay-verify="required|peiShi" class="layui-input" value="${vo.peiShi}">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">备注：</label>
        <div class="layui-input-block">
            <textarea type="text" name="peiText" class="layui-input" style="height: 100px;padding-left: 10px;" placeholder="请输入内容......">${vo.peiText}</textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="submit-button">保存</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<script src="js/layui/layui.js" charset="utf-8"></script>
<script>

                parent.location.reload();//刷新父级页面

            }, "text");//这里用的是post提交，如果不懂可以参考JQuery中ajax提
            return false;
        });
    });
</script>
</body>
</html>

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

                    type: "GET",
                    dataType: "text",
                    url: "PeiServlet?action=delete&id=" + data.id,
                    success: function () {
                        console.log("已删除！");
                    }
                });
                obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                //parent.location.reload();//刷新父级页面
                // layer.close(index);
                //parent.location.reload();//刷新父级页面
                layer.msg(data.peiName + ' 删除成功！');

        <div class="layui-input-block" style="padding: 9px 15px;">
            ${vo.peiName}
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">时间：</label>
        <div class="layui-input-block" style="padding: 9px 15px;">
            ${vo.peiDate}
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">主讲人：</label>
        <div class="layui-input-block" style="padding: 9px 15px;">
            ${vo.peiRen}
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">部门：</label>
        <div class="layui-input-block" style="padding: 9px 15px;">
            ${vo.peiDep}
        </div>

            } else if (layEvent === 'edit') { //编辑
                layer.open({
                    type: 2,
                    area: ['800px', '550px'],
                    fixed: false, //不固定
                    maxmin: true,
                    content: 'PeiServlet?action=editPre&id=' + data.id
                });
                obj.update({});//同步更新缓存对应的值
            } else if (layEvent === 'info') { //详情
                layer.open({
                    type: 2,
                    area: ['800px', '650px'],
                    fixed: false, //不固定
                    maxmin: true,

        <c:if test="${loginUser.userType == '管理员'}"><button class='layui-btn layui-btn-sm' lay-event='add'>添加</button></c:if>
    </div>
</script>
<script>
    function arrayBufferToBase64(buffer) {
        let binary = '';
        let bytes = new Uint8Array(buffer);
        let len = bytes.byteLength;
        for (let i = 0; i < len; i++) {
            binary += String.fromCharCode(bytes[i]);
        }
        return window.btoa(binary);
    }

    layui.use('table', function () {

    <div class="layui-form-item">
        <label class="layui-form-label">地点：</label>
        <div class="layui-input-block" style="padding: 9px 15px;">
            ${vo.peiShi}
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">备注：</label>
        <div class="layui-input-block">
            <textarea type="text" name="peiText" disabled="disabled" class="layui-input" style="height: 100px;padding-left: 10px;" placeholder="请输入内容......">${vo.peiText}</textarea>
        </div>
    </div>
</form>
<script src="js/layui/layui.js" charset="utf-8"></script>
<script>
    layui.use(['form', 'layedit', 'laydate'], function () {
        let form = layui.form, layer = layui.layer, layedit = layui.layedit;

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修改培训</title>
    <script src="js/jquery.js"></script>
    <link rel="stylesheet" href="js/layui/css/layui.css">
</head>
<body style="padding: 20px">
<form class="layui-form" action="">
    <input type="hidden" name="id" class="layui-input" value="${vo.id}">
    
    <div class="layui-form-item">
        <label class="layui-form-label">主题：</label>
        <div class="layui-input-block">
            <input type="text" name="peiName" lay-verify="required|peiName" class="layui-input" value="${vo.peiName}">
        </div>
    </div>

Java代码：略

运行环境

Java≥6、Tomcat≥7.0、MySQL≥5.5

开发工具

idea/eclipse/MyEclipse

技术框架

JavaWeb JavaBean JSP MVC MySQL Tomcat JavaScript Layui Ajax

基础JSP+Servlet或JSP+SSM(Spring、SpringMVC、MyBatis)框架或JSP+SSM+Maven(pom.xml)框架或SpringBoot…均可

开发工具：idea或eclipse或myeclipse

适用

课程设计，大作业，毕业设计，项目练习，学习演示等

功能说明

登录、注册、退出、用户模块、公告模块、会议模块、培训模块、节假模块的增删改查管理

v.mp4_20211010_005016.061

v.mp4_20211010_005028.965

v.mp4_20211010_005032.701

v.mp4_20211010_005044.054

v.mp4_20211010_005047.181

v.mp4_20211010_005050.957

v.mp4_20211010_005059.725

v.mp4_20211010_005121.485

v.mp4_20211010_005131.693

v.mp4_20211010_005136.893

v.mp4_20211010_005145.357

document

←源码获取见左侧[源码QQ]

标签：function,layer,javaweb,form,layui,let,信息管理系统,jsp,layedit
来源： https://blog.csdn.net/javayms/article/details/123140444

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有