因为做系统需要设计excel批量导入按钮,这里放一个我写批量导入时看的博客:
html实现弹出from窗口
参照html实现悬浮窗口这个博客,改了悬浮窗口的内容,调整了一下窗口大小。
自己实现了一个from表单。进行上传excel文件。
我改后的悬浮窗口部分代码:
<div class="dataTables_length" id="batchAddStu">
<label>
<a class="btn btn-primary" href = "JavaScript:void(0)" onclick = "openDialog()">批量添加学生</a>
<div id="light" class="white_content">
<span>excel格式:</span><br/>
<span>第一行为标题(顺序为):学号,姓名,性别,出生日期,家庭住址,电话号码,邮箱,班级编号,专业编码</span><br/>
<span>所有数据需要为文本格式</span><br/><br/>
<form role="form" th:action="@{/admin/batchAddStudent(aid=${admin.aid})}" method="post" enctype="multipart/form-data">
<div class="form-group center-block" >
<input type="file" name="uploadExcelFile">
</div>
<br/>
<button type="submit" class="btn btn-primary" >提交</button>
<button type="reset" class="btn btn-default" >重置</button>
</form>
<br/>
<button class="btn btn-danger" style="float: right" href= "javascript:void(0)" onclick = "closeDialog()">关闭</button>
</div>
</label>
</div>
样式:
点击:
弹出:
批量导入后台实现
我写的时候参照的是
- springboot-MyBatis使用excel批量录入,插入他表数据 用这个博客实现的读取excel内容的功能。
- mybatis foreach标签的使用 用这个实现的mapper文件中批量insert数据的功能。