本文介绍了一款学院信息维护系统的界面设计，包括顶部的模糊搜索与操作按钮，以及使用layui实现的表格展示和新增学院的Modal模态框。重点在于用户交互和数据检索功能的演示。
页面：
@{
Layout = null;
}
<!DOCTYPEhtml>
<html>
<head>
<metaname="viewport"content="width=device-width"/>
<title>学院信息维护(Index)</title>
<linkhref="~/Content/bootstrap-4.5.3-dist/css/bootstrap.min.css"rel="stylesheet"/>
<linkhref="~/Content/layui/css/layui.css"rel="stylesheet"/>
</head>
<body>
<!-- Container容器是窗口布局的最基本元素，我们推荐所有样式都定义在.container或.container-fluid容器之中 -->
<divclass="container">
<!-- 顶部搜索和操作区域 -->
<divclass="rowmt-3">
<!-- 使用.ml-auto与.mr-auto来强制隔离两边的距离 -->
<divclass="col-auto mr-auto">
<formid="formSearch"class="form-inline"autocomplete="off">
<!--重置表单-->
<inputtype="reset"hidden/>
<divclass="form-group">
<labelclass="form-check-labelmr-3"for="searchText">模糊搜索:</label>
<inputtype="text"class="form-control"id="searchText"placeholder="模糊搜索学院名称和编号"oninput="">
</div>
</form>
</div>
<divclass="col-auto">
<buttonclass="btnbtn-outline-info"type="button"onclick="seachAcademe()">查询</button>
<buttonclass="btnbtn-outline-primary"type="button">新增</button>
</div>
</div>
<!-- 表格部分 -->
<divclass="row">
<divclass="col">
@* Layui表格 *@
<tableid="tabAcademe"lay-filter="tbAcademe"></table>
</div>
</div>
</div>
<!-- 新增学院模态框（Modal） -->
<divclass="modal fade"id="insertModal">
<divclass="modal-dialog">
<divclass="modal-content">
<divclass="modal-header">
<h4class="modal-titlefont-weight-bolder">新增学院</h4>
<buttontype="button"class="close"data-dismiss="modal">×</button>
</div>
<divclass="modal-body">
<formid="frAcademeInsert">
<divclass="form-grouprow">
<labelfor="academeNameI"class="col-3col-form-label text-right">学院名称</label>
<divclass="col-9">
<inputtype="text"class="form-control"id="academeNameI"name="academeName">
</div>
</div>
<divclass="form-grouprow">
<labelfor="academeCodeI"class="col-3col-form-label text-right">学院编号</label>
<divclass="col-9">
<inputtype="text"class="form-control"id="academeCodeI"name="academeCode"placeholder="请输入2位数的编号！">
</div>
</div>
</form>
</div>
<divclass="modal-footer">
<buttontype="button"class="btnbtn-secondary"data-dismiss="modal">取消</button>
<buttontype="button"class="btnbtn-primary">保存</button>
</div>
</div><!--/.modal-content -->
</div><!--/.modal-dialog -->
</div>
扫一扫
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
