jeefast框架：实现成绩新增单个成绩信息和导入数据功能

平平常常一般牛

于 2020-11-13 20:30:10 发布

阅读量232

点赞数

分类专栏： jeefast框架文章标签： java jquery

折扇戏美人

本文链接：https://blog.csdn.net/CSDN_java1005/article/details/109681900

版权

jeefast框架专栏收录该内容

6 篇文章 0 订阅

订阅专栏

jeefast成绩新增单个成绩信息

HTML文件中

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<title>系统通知</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="stylesheet" href="../../css/bootstrap.min.css">
<link rel="stylesheet" href="../../css/font-awesome.min.css">
<link rel="stylesheet" href="../../plugins/jqgrid/ui.jqgrid-bootstrap.css">
<link rel="stylesheet" href="../../plugins/ztree/css/metroStyle/metroStyle.css">
<link rel="stylesheet" href="../../css/main.css">
<script src="../../libs/jquery.min.js"></script>
<script src="../../plugins/layer/layer.js"></script>
<script src="../../libs/bootstrap.min.js"></script>
<script src="../../libs/vue.min.js"></script>
<script src="../../plugins/jqgrid/grid.locale-cn.js"></script>
<script src="../../plugins/jqgrid/jquery.jqGrid.min.js"></script>
<script src="../../plugins/ztree/jquery.ztree.all.min.js"></script>
<script src="../../plugins/wangEditor/wangEditor.js"></script>
<script src="../../js/common.js"></script>
</head>
<body>
<div id="jeefastapp" v-cloak>
	<div v-show="showList">
		<div class="grid-btn">
			<div class="form-group col-sm-2">
				<input type="text" class="form-control" v-model="q.name" @keyup.enter="query" placeholder="客户姓名">
			</div>
			<a class="btn btn-default" @click="query">查询</a>
			<div class="btn-group" role="group" aria-label="...">
				<a v-if="hasPermission('platform:score:save')" class="btn btn-primary btn-sm" @click="add"><i class="fa fa-plus"></i>&nbsp;新增</a>
				<a v-if="hasPermission('platform:score:update')" class="btn btn-primary btn-sm" @click="update"><i class="fa fa-pencil-square-o"></i>&nbsp;修改</a>
				<a v-if="hasPermission('platform:score:delete')" class="btn btn-primary btn-sm" @click="del"><i class="fa fa-trash-o"></i>&nbsp;删除</a>
			
			</div>
		</div>
	    <table id="jqGrid"></table>
	    <div id="jqGridPager"></div>
    </div>
    
    <div v-show="!showList" class="panel panel-default">
		<div class="panel-heading">{{title}}</div>
		<form class="form-horizontal">
			<div class="form-group" v-show="!showLead">
				<div class="col-sm-2 control-label">年级</div>
				<div class="col-sm-10">
					<select class="form-control" v-model="score.gid" @change="getClass()" id="gradeId">
						<option :value="0">--请选择年级--</option>
						<option v-for="(v,index) in grade" :value="v.gid">{{v.gname}}</option>
					</select>
				</div>
			</div>
			<div class="form-group" v-show="!showLead">
				<div class="col-sm-2 control-label">班级</div>
				<div class="col-sm-10">
					<select class="form-control" v-model="score.cid" @change="getStudent()" id="classId">
						<option :value="0">--请选择班级--</option>
						<option v-for="(v,index) in classes" :value="v.cid">{{v.cname}}</option>
					</select>
				</div>
			</div>
			<div class="form-group" v-show="!showLead">
				<div class="col-sm-2 control-label">学生姓名</div>
				<div class="col-sm-10">
					<select class="form-control" v-model="score.id" id="studentId">
						<option :value="0">--请选择学生--</option>
						<option v-for="(v,index) in student" :value="v.id">{{v.name}}</option>
					</select>
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-2 control-label">科目</div>
				<div class="col-sm-10">
					<select class="form-control" v-model="score.coid" >
						<option v-for="(v,index) in course" :value="v.coid">{{v.cname}}</option>
					</select>
				</div>
			</div>
			<div class="form-group" v-show="!showLead">
				<div class="col-sm-2 control-label">成绩</div>
				<div class="col-sm-10">
					<input type="text" class="form-control" v-model="score.sname" placeholder="请输入学生的成绩"/>
				</div>
			</div>
			<div class="form-group">
			   	<div class="col-sm-2 control-label">导入文件</div>
			   	<div class="col-sm-10">
					<a class="btn btn-primary btn-sm" v-on:click="dr()"><i class="fa fa-plus"></i>&nbsp;导入</a>
					<input type="file" name="file1" id="file1" style="display:none" v-on:change="doimportExcel()"/>
			    </div>
			</div>

			<div class="form-group" v-show="!showLead">
				<div class="col-sm-2 control-label"></div> 
				<input type="button" class="btn btn-primary" @click="saveOrUpdate()" value="确定"/>
				&nbsp;&nbsp;<input type="button" class="btn btn-warning" @click="reload" value="返回"/>
			</div>
		</form>
	</div>
</div>

<script src="../../js/modules/platform/score.js"></script>
</body>
</html>

js 中

$(function () {
    $("#jqGrid").jqGrid({
        url: baseURL + 'platform/score/list',
        datatype: "json",
        colModel: [
			{ label: '学生姓名', name: 'pf_student.name', width: 20},
			{ label: '所在班级', name: 'pf_class.cname', width: 20},
			{ label: 'Java', name: 'domain', width: 20},
			{ label: 'PHP', name: 'skill', width: 20},
			{ label: 'ui', name: 'politics', width: 20},
			{ label: 'python', name: 'quality', width: 20},
			{ label: '大数据和云计算', name: 'practice', width: 20},
        ],
		viewrecords: true,
        height: 385,
        rowNum: 10,
		rowList : [10,30,50],
        rownumbers: true, 
        rownumWidth: 25, 
        autowidth: true,
        multiselect: true,
        pager: "#jqGridPager",
        jsonReader : {
        	root: "page.records",
            page: "page.current",
            total: "page.pages",
            records: "page.total"
        },
        prmNames : {
            page:"page", 
            rows:"limit", 
            order: "order"
        },
        gridComplete:function(){
        	//隐藏grid底部滚动条
        	$("#jqGrid").closest(".ui-jqgrid-bdiv").css({ "overflow-x" : "hidden" }); 
        }
    });
});
//导入
function dr(){
	$("#file1").click();
}


var vm = new Vue({
	el:'#jeefastapp',
	data:{
		q:{
			sname: null
		},
		showList: true,
		showLead:true,
		title: null,
		score:{
			type: 1
		},

		course:[],
		grade:{},
		classes:{},
		student:{},
	},
	methods: {
		query: function () {
			vm.reload();
		},
		add: function(){
			vm.showLead=false;
			vm.showList = false;
			vm.title = "新增";
			vm.score = {type:1};
			this.getCourse();
			this.getGrade();
		},
		update: function () {
			var scoreId = getSelectedRow();
			if(scoreId == null){
				return ;
			}
			vm.showList = false;
			vm.title = "修改";
			vm.getscore(scoreId);
		},

		lead:function(){
			vm.showList=false;
			vm.showLead=true;
			vm.title = "导入数据";
			vm.score = {type:1};
			this.getCourse();
		},
		//导入
		 doimportExcel:function(){
			var coid =vm.score.coid;
			console.log(coid);
			var form = new FormData();
			form.append("file1", document.getElementById("file1").files[0]);
			$.ajax({
				// url: baseURL + 'platform/score/excelImport?coid='+coid,        //后台url
				url: baseURL + 'platform/score/excelImport',
				data:{
					form,
					coid:coid,
				} ,
				cache: false,
				async: false,
				type: "POST",                   //类型，POST或者GET
				dataType: 'json',              //数据返回类型，可以是xml、json等
				processData: false,
				contentType: false,
				success: function (data) {      //成功，回调函数
					if(data=1){
						alert("导入成功");
						vm.reload();
					}else{
						alert("导入失败");
					}
				},
				error: function (data) {      	//失败，回调函数
					if(data=2){
						alert("导入的文件没有值");
					}
				}
			});
         },
		del: function () {
			var scoreIds = getSelectedRows();
			if(scoreIds == null){
				return ;
			}
			
			confirm('确定要删除选中的记录？', function(){
				$.ajax({
					type: "POST",
				    url: baseURL + "platform/score/delete",
                    contentType: "application/json",
				    data: JSON.stringify(scoreIds),
				    success: function(r){
						if(r.code == 0){
							alert('操作成功', function(){
                                vm.reload();
							});
						}else{
							alert(r.msg);
						}
					}
				});
			});
		},
		/*班级*/
		getClass: function () {
			var classesId = vm.score.gid;
			// var classesId=$("#selected").val();
			// alert(classesId);
			$.ajax({
				type: 'post',
				url: baseURL + "platform/class/findByIdAll/" + classesId,
				contentType: "application/json",
				async:false,
				success: function (result) {
					if (result.code == 0) {
						vm.classes = result.classes;
					}
				}
			});
		},
		/*年级*/
		getGrade: function () {
			$.ajax({
				type: 'post',
				url:baseURL + "platform/grade/findAll/",
				contentType: "application/json",
				success: function (result) {
					if (result.code == 0) {
						vm.grade = result.grade;
					}
				}
			});
		},
		/*学生*/
		getStudent: function () {
			// var studentId=$("#classId").val();
			var studentId = vm.score.cid;
			$.ajax({
				type: 'post',
				url: baseURL + "platform/student/findByIdAll/" + studentId,
				contentType: "application/json",
				async:false,
				success: function (result) {
					if (result.code == 0) {
						vm.student = result.student;
					}
				}
			});
		},
		saveOrUpdate: function () {
			// var url = vm.score.id == null ? "platform/score/save" : "platform/score/update";
			$.ajax({
				type: "POST",
			    url: baseURL +  "platform/score/save",
                contentType: "application/json",
			    data: JSON.stringify(vm.score),
			    success: function(r){
			    	if(r.code === 0){
						alert('操作成功', function(){
							vm.reload();
						});
					}else{
						alert(r.msg);
					}
				}
			});
		},
		/*成绩*/
		getscore: function(scoreId){
			$.ajax({
				type: 'post',
				url:baseURL + "platform/score/info/"+scoreId,
				contentType: "application/json",
				async:false,
				success: function (result) {
					alert(JSON.stringify(result))
					if (result.code == 0) {
						vm.score = result.score;
					}
				}
			});
		},
		/*科目*/
		getCourse: function(){
			$.get(baseURL + "platform/course/findCourse/", function(r){
				vm.course = r.course;
			});
		},
		reload: function () {
			vm.showList = true;
			var page = $("#jqGrid").jqGrid('getGridParam','page');
			$("#jqGrid").jqGrid('setGridParam',{ 
                postData:{'sname': vm.q.sname},
                page:page
            }).trigger("reloadGrid");
		}
	}
});

导入数据功能的实现

在首页加入【导入】功能按钮

		<a class="btn btn-primary btn-sm" v-on:click="dr()"><i class="fa fa-plus"></i>&nbsp;数据导入</a>
		<input type="file" name="file1" id="file1" style="display:none" v-on:change="doimportExcel()"/>

当我们点击【数据导入】功能按钮的时候，就会触发 dr() 这个方法，这个方法我在js中定义的。

//导入
function dr(){
	$("#file1").click();
}
function doimportExcel(){
	var form = new FormData();
	form.append("file1", document.getElementById("file1").files[0]);
	$.ajax({
		url: baseURL + 'platform/student/excelImport',        //后台url
		data: form,
		cache: false,
		async: false,
		type: "POST",                   //类型，POST或者GET
		dataType: 'json',              //数据返回类型，可以是xml、json等
		processData: false,
		contentType: false,
		success: function (data) {      //成功，回调函数
			if(data=1){
				alert("导入成功");
			}else{
				alert("导入失败");
			}
		},
		error: function (data) {      	//失败，回调函数
			if(data=2){
				alert("导入的文件没有值");
			}
		}
	});
};

后端Controller 控制层

//导入
@RequestMapping(value = "/excelImport")
	public String uploadImg1(@RequestParam("file1") MultipartFile file1, @RequestParam("coid")int coid, HttpServletRequest request) {
		try {
			//根据路径获取这个操作excel的实例
			HSSFWorkbook wb = new HSSFWorkbook(file1.getInputStream());            //根据页面index 获取sheet页
			HSSFSheet sheet = wb.getSheetAt(0);
			//如果表格一行没有就为空
			if (sheet.getPhysicalNumberOfRows() == 0) {//2
				return "文件为空！";
			}
			//实体类集合
			List<Score> scoreList = new ArrayList<Score>();
			HSSFRow row = null;
			Score data = new Score();
			System.out.println(coid+"aaaaa");
			for (int i = 1; i < sheet.getPhysicalNumberOfRows(); i++) {
				row = sheet.getRow(i);
				row.getCell(2).setCellType(CellType.STRING);
				data.setCoid(Integer.parseInt(row.getCell(2).getStringCellValue())+coid);
			}
//			System.out.println(sheet.getPhysicalNumberOfRows());//总行数
			for (int i = 1; i < sheet.getPhysicalNumberOfRows(); i++) {
				row = sheet.getRow(i);
				/*学生ID*/
				row.getCell(0).setCellType(CellType.STRING);
				data.setId(Integer.parseInt( row.getCell(0).getStringCellValue()) );
//				row.getCell(2).setCellType(CellType.STRING);
//				data.setCoid(Integer.parseInt(row.getCell(2).getStringCellValue()+coid));
				/*学生的成绩*/
				row.getCell(3).setCellType(CellType.STRING);
				data.setSname(Integer.parseInt(row.getCell(3).getStringCellValue()));
//				data.setSname((int) row.getCell(4).getNumericCellValue());
				System.out.println(data.toString());
				scoreService.insert(data);
			}
		} catch (Exception e) {
			e.printStackTrace();
		}
		return "1";
	}