自制一个学院信息管理系统（3）

最新推荐文章于 2023-02-27 19:35:49 发布

码外狂徒——张三

最新推荐文章于 2023-02-27 19:35:49 发布

阅读量406

点赞数

分类专栏：个人学习总结文章标签： mvc

本文链接：https://blog.csdn.net/weixin_57726512/article/details/118538716

版权

上一次我们布置了五个分区，并分别给了五个视图，今天我们将制作第一个分区。也就是学院信息管理。

首先我们在学院信息管理系统的视图中先做好基本的布局。布局时我们需要使用到bootstrap插件，jQuery插件，layui插件。

    <!-- Container容器是窗口布局的最基本元素，我们推荐所有样式都定义在.container或.container-fluid容器之中 -->
    <div class="container">
        <!-- 顶部搜索和操作区域 -->
        <div class="row justify-content-between mt-3">
            <!-- 使用.ml-auto与.mr-auto来强制隔离两边的距离 -->
            <div class="col-auto mr-auto">
                <form id="formSearch" class="form-inline" autocomplete="off">
                    <!--重置表单-->
                    <input type="reset" hidden />
                    @*<button type="reset"></button>*@
                    <div class="form-group">
                        <label class="form-check-label mr-3" for="searchText">模糊搜索:</label>
                        <input type="text" class="form-control" id="searchText" placeholder="模糊搜索学院名称和编号" oninput="tabSearchAcademe()">
                    </div>
                </form>
            </div>
            <div class="col-auto">
                <button class="btn btn-outline-primary" type="button" onclick="openInsertModal()">新增</button>
            </div>
        </div>
        <!-- 表格部分 -->
        <div class="row">
            <div class="col">
                @* Layui表格 *@
                <table id="tabAcademe" lay-filter="tbAcademe"></table>
            </div>
        </div>
    </div>

    <!-- 新增学院 模态框 -->
    <div class="modal fade" id="insertModal" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- 顶部 标题 关闭按钮 -->
                <div class="modal-header">
                    <!--标题-->
                    <h5 class="modal-title">新增学院</h5>
                    <!--关闭按钮-->
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <!-- 内容部分 表单-->
                <div class="modal-body">
                    <form id="formInsert">
                        <div class="form-group row">
                            <label for="academeNameI" class="col-3 col-form-label">学院名称</label>
                            <div class="col-9">
                                <input type="text" class="form-control" id="academeNameI">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="academeCodeI" class="col-3 col-form-label">学院编码</label>
                            <div class="col-9">
                                <input type="text" class="form-control" id="academeCodeI">
                            </div>
                        </div>
                    </form>
                </div>
                <!-- 底部 按钮 取消 确定 -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="InsertSaveAcademe()">保存</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 修改的模态框 -->
    <div class="modal fade" id="updateModal" data-backdrop="static" data-keyboard="false">