<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/bootstrap-table.css">
<link rel="stylesheet" href="css/fileinput.min.css" />
<style type="text/css">
td, th {
text-align: center;
}
td{
width:100px;
overflow:hidden;
}
a {
text-decoration: none;
cursor: pointer;
}
th {
background-color: #459DF5;
color: white;
}
ul {
list-style-type: none;
}
h3 {
color: #000000;
}
</style>
</head>
<body>
<script type="text/javascript" src="js/jquery.min.1.12.4.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap-table.js"></script>
<script type="text/javascript" src="js/bootstrap-table-zh-CN.js"></script>
<script type="text/javascript" src="js/fileinput.min.js"></script>
<script type="text/javascript" src="js/xlsx.core.min.js"></script>
<script type="text/javascript" src="js/tableExport.js"></script>
<table id="tab" class="table table-bordered" style="width: 90%;" align="center">
<caption>
<h3>材料管理</h3>
<h4>
<button type="button" id="put" class="btn btn-sm"
style="background-color: #459DF5; color: white;"
data-toggle="modal" data-target="#lead">导入</button>
<button type="button" id="download" class="btn btn-sm"
style="background-color: #459DF5; color: white;">导出</button>
<button type="button" id="" onclick="appen()" class="btn btn-sm"
style="background-color: #459DF5; color: white;">添加</button>
<button type="button" id="" onclick="save()" class="btn btn-sm"
style="background-color: #459DF5; color: white;">保存</button>
</h4>
</caption>
<thead>
<tr>
<th>名称</th>
<th>规格</th>
<th>单位</th>
<th>数量</th>
<th>购入单价</th>
<th>存放位置</th>
<th>保管人</th>
<th>使用状态</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- <tr>
<td><input type="text" id="" class="form-control" /></td>
<td><input type="text" id="" class="form-control" /></td>
<td><input type="text" id="" class="form-control" /></td>
<td><input type="text" id="" class="form-control" /></td>
<td><input type="text" id="" class="form-control" /></td>
<td><input type="text" id="" class="form-control" /></td>
<td><input type="text" id="" class="form-control" /></td>
<td><input type="text" id="" class="form-control" /></td>
</tr> -->
</tbody>
</table>
<!-- 模态窗口 -->
<div class="modal fade" id="lead" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Excel导入</h4>
</div>
<div class="modal-body">
<div class="row" style="margin-left: 0px; margin-right: 5px;">
<div class="file-container"
style="display: inline-block; position: relative; overflow: hidden; vertical-align: middle">
<button class="btn btn-mini btn-success fileinput-button" type="button">导入材料</button>
<input type="file" id="excel" onchange="loadFile(this.files[0])" style="position: absolute; top: 0; left: 0; opacity: 0">
<span id="filename" style="vertical-align: middle">未上传文件</span>
</div>
<div>
</div>
</div>
</div>
<div class="modal-footer"></div>
</div>
</div>
</div>
<script type="text/javascript">
//保存表格所有数据
function save(){
var obje =new Array();
$("#tab tbody tr").each(function(){
//console.log($(this).children().eq(0).children().val());
//console.log($(this).children().eq(1).children().val());
var mname=$(this).children().eq(0).children().val();
var mspe=$(this).children().eq(1).children().val();
var munit=$(this).children().eq(2).children().val();
var msum=$(this).children().eq(3).children().val();
var mprice=$(this).children().eq(4).children().val();
var mstorage=$(this).children().eq(5).children().val();
var mpreserver=$(this).children().eq(6).children().val();
var mstatic=$(this).children().eq(7).children().val();
var obj={
'mname':mname,
'mspecification':mspe,
'munit':munit,
'msum':msum,
'mprice':mprice,
'mstorage':mstorage,
'mpreserver':mpreserver,
'mstatic':mstatic
}
//console.log(obj);
obje.push(obj);
});
$.ajax({
url:'/addmaterials',
type:'post',
contentType:"application/json; charset=UTF-8",
data:JSON.stringify(obje),
success:function(retu){
alert(retu);
}
});
}
function loadFile(file){
$("#filename").html(file.name);
}
//追加表单
function appen(){
$("#tab tbody").append('<tr>'+
'<td><input type="text" id="matename" name="matename" class="form-control" /></td>'+
'<td><input type="text" id="specification" name="specification" class="form-control" /></td>'+
'<td><input type="text" id="monad" name="monad" class="form-control" /></td>'+
'<td><input type="text" id="sum" name="sum" class="form-control" /></td>'+
'<td><input type="text" id="price" name="price" class="form-control" /></td>'+
'<td><select id="storage" name="storage" class="form-control" ><option checked>--请选择--</option></select></td>'+
'<td><input type="text" id="preserver" name="preserver" class="form-control" /></td>'+
'<td><select id="state" name="state" class="form-control" ><option checked>--请选择--</option></select></td>'+
'<td><a class="btn btn-danger" onclick="del(this)">删除</a></td>'+
'</tr>');
aja();
}
//初始化下拉框
function aja(){
$.ajax({
url:'/selectPlace',
type:'post',
async:false,
success:function(list){
//console.log(list);
for (var i = 0; i < list.length; i++) {
//console.log(list[i].pname);
$("select[name=storage]:last").append("<option value="+list[i].pid+">"+list[i].pname+"</option>");
}
}
});
$.ajax({
url:'/slelectUsemole',
type:'post',
async:false,
success:function(list){
for (var i = 0; i < list.length; i++) {
$("select[name=state]:last").append("<option value="+list[i].uid+">"+list[i].uname+"</option>");
}
}
});
}
function del(even){
$(even).parent().parent().remove();
}
//文件导入,捕捉文件组件更改事件, 如果文件发生改变, 就获取文件内容
$("#excel").change(function(e) {
var files = e.target.files;
var fileReader = new FileReader();
fileReader.onload = function(ev) {
try {
var data = ev.target.result,
workbook = XLSX.read(data, {
type: 'binary'
}), // 以二进制流方式读取得到整份excel表格对象
rows = []; // 存储获取到的数据
} catch (e) {
console.log('文件类型不正确' + e);
bootbox.alert('文件类型不正确');
return;
}
// 表格的表格范围，可用于判断表头是否数量是否正确
var fromTo = '';
// 遍历每张表读取
for (var sheet in workbook.Sheets) {
if (workbook.Sheets.hasOwnProperty(sheet)) {
fromTo = workbook.Sheets[sheet]['!ref'];
rows = rows.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
console.log(rows);
break; // 如果只取第一张表，就取消注释这行
}
}
for(var i=0; i<rows.length; i++) {
console.log(rows[i].名称);
console.log(rows[i].规格);
appen();//追加表单
/*$("#matename").val(rows[i].名称);
$("#specification").val(rows[i].规格);
$("#monad").val(rows[i].单位);
$("#sum").val(rows[i].数量);
$("#price").val(rows[i].购入单价);
$("#storage").val(rows[i].存放位置);
$("#preserver").val(rows[i].保管人);
$("#state").val(rows[i].使用状态); */
//为表单赋值
document.getElementsByName("matename")[i].value=rows[i].名称;
document.getElementsByName("specification")[i].value=rows[i].规格;
document.getElementsByName("monad")[i].value=rows[i].单位;
document.getElementsByName("sum")[i].value=rows[i].数量;
document.getElementsByName("price")[i].value=rows[i].购入单价;
document.getElementsByName("storage")[i].value=rows[i].存放位置;
document.getElementsByName("preserver")[i].value=rows[i].保管人;
document.getElementsByName("state")[i].value=rows[i].使用状态;
}
//关闭模态窗
$("#lead").modal('hide');
};
// 以二进制方式打开文件
fileReader.readAsBinaryString(files[0]);
});
$("#download").click(function() {
$('#tab').tableExport({
type: 'excel',
escape: 'false',
fileName: '我的材料',//导出文件名称
ignoreColumn: [8],//要屏蔽列索引
});
});
</script>
</body>
</html>后台接受
@RequestMapping("/addmaterials")
public @ResponseBody String addMaterials(@RequestBody List<Materials> show){
for (Materials materials : show) {
this.ms.insertMaterials(materials);
}
return "录入成功";
}