基于ssm easyUI的学生信息管理系统

最新推荐文章于 2022-06-11 07:39:15 发布

@LitterFisher

最新推荐文章于 2022-06-11 07:39:15 发布

阅读量232

点赞数

分类专栏： easyUI Spring笔记文章标签： easyui

本文链接：https://blog.csdn.net/weixin_44002250/article/details/118727104

版权

Spring笔记同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

easyUI

4 篇文章 1 订阅

订阅专栏

所需 easyui 官网下即可

https://www.jeasyui.cn/document/index/index.html
中文文档api非常详细了

admin端最终效果
项目搭建
ssm搭建
搭建好后把下好的easyui放在web 文件夹下
前端还需两个easyui的插件（官网有）

实现编辑行更新到数据库:edatagrid.js
导出到excell 或者pdf:datagrid-export.js

布局基本布局

 <div class="easyui-layout" style="width:700px;height:350px;">
        <div data-options="region:'north'" style="height:50px"></div>
        <div data-options="region:'south',split:true" style="height:50px;"></div>
        <div data-options="region:'east',split:true" title="East" style="width:100px;"></div>
        <div data-options="region:'west',split:true" title="West" style="width:100px;"></div>
        <div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'">
        </div>
    </div>
 
</body>

<%--
  Created by IntelliJ IDEA.
  User: 22531
  Date: 2021/6/2
  Time: 15:56
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css">
    <script type="text/javascript" src="/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="/js/jquery.edatagrid.js"></script>
    <script src="/easyui/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
<div class="easyui-panel" data-options="fit:true,border:false">
    <table id="dg2"></table>
</div>
<script type="text/javascript">
    $(function () {
        $('#dg2').edatagrid({
            url: '/admin/getAllStuInfo',
            saveUrl: '/admin/adAddStu',
            updateUrl: '/admin/adUpStu',
            destroyUrl: '/admin/adDelStu',
            columns:[[
                {field:"id",align:"center",title:'学生ID'},
                {field:"sno",align:"center",title:'学号',editor:{type:'textbox',options:{required:true}}},
                {field:"name",align:"center" ,title:'姓名',editor:{type:'textbox',options:{required:true}}},
                {field:"password", align:"center",title:"密码",editor:{type:'textbox',options:{required:true}}},
                {field:"clazzName",width:150 ,align:"center",title:"班级",editor:{type:'combobox',
                        options: {
                            valueField:'name',
                            textField:'name',
                            method:'get',
                            url:'/admin/getAllClazz',
                            required:true,
                            editable:false,
                        }
                    }},
                {field:"dept", align:"center",title:'学院'},
                {field:"sex",width:60,align:"center",title:'性别',editor:{type:'combobox',
                        options:{
                            valueField: 'label',
                            textField: 'value',
                            data: [{
                                label: '男',
                                value: '男'
                            },{
                                label: '女',
                                value: '女'
                            }],
                            required:true,
                            editable:false,
                        }
                    }},
                {field:"address" ,width:100,align:"center",title:'地址',editor:{type:'textbox',options:{required:true}}},
                {field:"age", align:"center",title:'年龄',editor:{type:'numberbox',options:{required:true}}},
                {field:"phone" ,align:"center",title:'电话',editor:{type:'textbox',options:{required:true}}},
                {field:"dormitory", align:"center",title:'宿舍',editor:{type:'textbox',options:{required:true}}},
                {field:"native_place" ,align:"center",title:'籍贯',editor:{type:'textbox',options:{required:true}}},
            ]],
            iconCls: 'icon-sum',
            title:'增删改学生信息',
            singleSelect: true,
            method: 'get',
            rownumbers:true,
            pagination: true,
            pageSize:10,
            pageList:[10,20,30,40,50],
            idField:'id',
            toolbar: [{
                iconCls: 'icon-reload',
                text:'刷新',
                handler: function(){
                    $('#dg2').edatagrid('reload');
                }
            },'-',{
                iconCls: 'icon-add',
                text: '新增学生',
                handler: function () {
                    $('#dg2').edatagrid('addRow');
                },
            },'-',{
                iconCls: 'icon-remove',
                text: '删除学生',
                handler: function (){
                    $('#dg2').edatagrid('destroyRow');
                },
            },'-',{
                iconCls: 'icon-save',
                text: '保存修改或新增操作',
                handler: function () {
                    $('#dg2').edatagrid('saveRow');
                },
            },'-',{
                iconCls: 'icon-undo',
                text: '取消',
                handler: function () {
                    $('#dg2').edatagrid('cancelRow');
                },
            }],
            onSuccess:function (index,row){
                if(row.msg){
                    $.messager.alert('操作结果','操作成功!','info');
                    $('#dg2').edatagrid('reload');
                }
                else {
                    $.messager.alert('操作结果','操作失败!'+row.error,'warning');
                    $('#dg2').edatagrid('reload');
                }
            },
            onError:function (index,row){
                $.messager.alert('操作结果','服务器错误!','warning');
                $('#dg2').edatagrid('reload');
            },
            onDestroy:function (index,row){
                if(row.msg){
                    $.messager.alert('操作结果','操作成功!','info');
                    $('#dg2').edatagrid('reload');
                }
                else {
                    $.messager.alert('操作结果','操作失败!'+row.error,'warning');
                    $('#dg2').edatagrid('reload');
                }
            },
        })
    })
</script>


</body>
</html>

columns说明尽量字段名不一样，不一样的话麻烦，可以通过loadFilter或者formatter解决。
url说明

url: ‘/admin/getAllStuInfo’, 获取后端传来的学生json数据字段名需要一致
saveUrl: ‘/admin/adAddStu’,把新增的行传到后端

    @RequestMapping("/adAddStu")
    @ResponseBody
    public MyJson adAddStu(Student student){//
        student.stuToClazz_Info();
        return adminService.adAddStu(student );
    }

updateUrl: ‘/admin/adUpStu’,把修改的行传到后端
destroyUrl: ‘/admin/adDelStu’,把删除的行id传到后端（注意：idField:‘id’ 需要这个属性）

后端操作后返回说明：

onSuccess:function (index,row) row新增或者修改结果
onError:function (index,row)
onDestroy:function (index,row) row 删除行结果

bug还是有的
尤其是学生表和学生基础信息表两表联合没弄好，mapper写得不规范
git:https://gitee.com/yu_sheng_sheng/ssm-student-info-system

@LitterFisher

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
基于ssm easyUI的学生信息管理系统

所需 easyui 官网下即可https://www.jeasyui.cn/document/index/index.html中文文档api非常详细了admin端最终效果项目搭建ssm搭建搭建好后把下好的easyui放在web 文件夹下前端还需两个easyui的插件（官网有）实现编辑行更新到数据库:edatagrid.js导出到excell 或者pdf:datagrid-export.js布局基本布局 <div class="easyui-la.
复制链接

扫一扫

专栏目录