版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u010309756/article/details/82917296
实现功能：数据的套打功能
前期工作：已经将要套打的样式按照固定位置，在HTML页面完全固定好，将数据传入就可以准确套打。
具体需求：将数据以excel文件上传，上传成功先进行数据的展示，然后再存入数据库中，接着进行数据的管理，包括：增删改查以及打印。
所用技术：SpringBoot+MyBatis+Mysql
开发工具：eclipse
实现过程：
1、按照需求进行前端页面的设计，总共有上传、编辑、修改、管理以及打印五个主要页面。
2、分工进行完成具体功能的实现。
3、测试功能。
详细过程：
1、上传信息
这是最终的效果，选择文件上传，提交后，经过后台的处理，按照json格式将excel文件的信息数据传到数据展示的区域，以供检查数据是否正确，正确的话提交，否则就再次上传文件。
这里前端用到了ajax进行数据交互
<script type="text/javascript">
$("#submit").click(function () {//提交事件触发该操作
var formData = new FormData($("#fileForm")[0]);//表单id
$.ajax({
type:"post",
data:formData,
url: "/HR/Excel",//后台处理上传excel数据的接口
processData:false,
contentType:false,
success:function(data){
$("#showContent").html("");//在id=showContent的标签下进行数据的展示
//var json = JSON.parse(data);
for(var i=0;i<data.length;i++)
{
$("#showContent").append('<tr class="text-center">'+'<td><input type="hidden" name="zhrtZjps['+i+'].zygxm" value="'+data[i].zygxm+'">'+data[i].zygxm+'</td>'+'<td><input type="hidden" name="zhrtZjps['+i+'].zygxb" value="'+data[i].zygxb+'">'+data[i].zygxb+'</td>'+'<td><input type="hidden" name="zhrtZjps['+i+'].zcsny" value="'+data[i].zcsny+'">'+data[i].zcsny+'</td>'+'<td><input type="hidden" name="zhrtZjps['+i+'].zgzdw" value="'+data[i].zgzdw+'">'+data[i].zgzdw+'</td>'+'<td><input type="hidden" name="zhrtZjps['+i+'].zwhcd" value="'+data[i].zwhcd+'">'+data[i].zwhcd+'</td>'+'<td><input type="hidden" name="zhrtZjps['+i+'].zcszy" value="'+data[i].zcszy+'">'+data[i].zcszy+'</td>'+'<td><input type="hidden" name="zhrtZjps['+i+'].zyzzg" value="'+data[i].zyzzg+'">'+data[i].zyzzg+'</td>'+'<td><input type="hidden" name="zhrtZjps['+i+'].zxzzg" value="'+data[i].zxzzg+'">'+data[i].zxzzg+'</td>'+'<td><input type="hidden" name="zhrtZjps['+i+'].zzzbh" value="'+data[i].zzzbh+'">'+data[i].zzzbh+'</td>'+'<td><input type="hidden" name="zhrtZjps['+i+'].zzjpw" value="'+data[i].zzjpw+'">'+data[i].zzjpw+'</td>'+'<td><input type="hidden" name="zhrtZjps['+i+'].zrdnd" value="'+data[i].zrdnd+'">'+data[i].zrdnd+'</td>'+'<td><input type="hidden" name="zhrtZjps['+i+'].zpsnd" value="'+data[i].zpsnd+'">'+data[i].zpsnd+'</td>'+'<td><input type="hidden" name="zhrtZjps['+i+'].zgbwh" value="'+data[i].zgbwh+'">'+data[i].zgbwh+'</td></tr>')
}
alert("请求成功");
},
error:function(e){
alert("请求失败");
console.log(e);
}
});
});
</script>
数据正确提交后，存入数据库，并且进入到数据管理功能。
在该页面可以进行数据的所有操作，包括增删改查和打印，点击状态，选择可以按照数据状态进行展示。
<!-- 处理状态下拉框事件，显示当前选择的状态的数据 -->
<script type="text/javascript">
function selectCType(){
//选择每一个该class的span标签进行处理
$("span[class='label label-danger']").each(function(){
if($("#selectType").val() == $(this).text()){
//是选中
//如果当前span中内容的值和下拉框选择的内容一样
//则选择显示该行的内容
//也就是当前span的父标签的父标签的样式display改为显示样式
//本文标签的等级:table->tr->td->span
$(this).parent().parent().css("display","table-row");
}else{
//否则，就让该行不显示
$(this).parent().parent().css("display","none");
}
});
}
</script>
批量选择input标签进行提交的js：
<!-- 批量处理下发数据js，被选中的数据进行提交，为被选中的数据将name属性去掉，就不能传值了 -->
<script type="text/javascript">
function xiafa(){
//复选框的name，选择每一个复选框进行处理
$("input[name='checkItem']").each(function(){
if($(this).prop("checked")){
//是选中，如果当前的复选框是选中状态，则进行以下操作
$("input[name='checkItem']").removeAttr("name");
$("input[name='checkAll']").removeAttr("name");
}else{
//如果当前复选框状态是未选中，则将该行中所有的input标签的name属性移除
//这样就不会提交该行的数据了,选择上上级标签，通过find找到该上上级标签
//下的所有input标签进行移除name属性的操作
$(this).parent().parent().find("input").removeAttr("name");
}
});
}
</script>
点击打印按钮，弹出窗口进行打印js：
<script type="text/javascript">
function openWin(url) {
var u = url;
window.open(u, 'newwindow', 'height=600, width=800, top=30%,left=30%, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no');
}
//当页面滚动高度大于100时显示出盒子
$(function() {
$(window).scroll(function() {
var top = $(window).scrollTop();
if (top > 100) {
$('.myside').fadeIn(800);
} else {
$('.myside').fadeOut(800);
}
});
})
</script>
检测表单提交的input信息是否为空js：
<!-- 检测表单提交是否为空js-->
<script type="text/javascript">
function myCheck()
{
//form1为form表单的name值，检测表单中每一个提交的数据是否包含值
for(var i=0;i<document.form1.elements.length-1;i++)
{
if(document.form1.elements[i].value=="")
{
alert("当前表单不能有空项");
document.form1.elements[i].focus();
return false;
}
}
return true;
}
</script>
复选框js：
<script>
$(function(){
function initTableCheckbox() {
var $thr = $('table thead tr');
var $checkAllTh = $('<th width="30px"><input type="checkbox" id="checkAll" name="checkAll" /></th>');
/*将全选/反选复选框添加到表头最前，即增加一列*/
$thr.prepend($checkAllTh);
/*“全选/反选”复选框*/
var $checkAll = $thr.find('input');
$checkAll.click(function(event){
/*将所有行的选中状态设成全选框的选中状态*/
$tbr.find('input').prop('checked',$(this).prop('checked'));
/*并调整所有选中行的CSS样式*/
if ($(this).prop('checked')) {
$tbr.find('input').parent().parent().addClass('warning');
} else{
$tbr.find('input').parent().parent().removeClass('warning');
}
/*阻止向上冒泡，以防再次触发点击操作*/
event.stopPropagation();
});
/*点击全选框所在单元格时也触发全选框的点击操作*/
$checkAllTh.click(function(){
$(this).find('input').click();
});
var $tbr = $('table tbody tr');
var $checkItemTd = $('<td width="30px"><input type="checkbox" name="checkItem" /></td>');
/*每一行都在最前面插入一个选中复选框的单元格*/
$tbr.prepend($checkItemTd);
/*点击每一行的选中复选框时*/
$tbr.find('input').click(function(event){
/*调整选中行的CSS样式*/
$(this).parent().parent().toggleClass('warning');
/*如果已经被选中行的行数等于表格的数据行数，将全选框设为选中状态，否则设为未选中状态*/
$checkAll.prop('checked',$tbr.find('input:checked').length == $tbr.length ? true : false);
/*阻止向上冒泡，以防再次触发点击操作*/
event.stopPropagation();
});
/*点击每一行时也触发该行的选中操作*/
$tbr.click(function(){
$(this).find('input').click();
});
}
initTableCheckbox();
});
</script>
前端差不多重要的内容就这些，后端的处理都是用的封装好的方法，这里就不再进行讲述了。