实习日记（4-27）

小记

昨天的实现datagrid可编辑的问题解决了。
当时报错：

ScoreList.jsp:84 Uncaught TypeError: $(...).edatagrid is not a function

解决：
没有引入edatagrid所用到的js扩展文件。
下载地址：http://www.jeasyui.com/extension/downloads/jquery-easyui-edatagrid.zip

我在替换CSS样式表的时候发现，如果引入了重复的样式表，后来引入的会覆盖掉之前的。

走了一一点小弯路，就是datagrid对于后台的提交是一条一条提交的，当我修改了表格中的一条数据，点到下一条的时候它就会自动向后台提交了。

下面梳理一下edatagrid的逻辑流程：
首先我们添加HTML代码：
HTML：

			<div id="toolbar">
				<a href="javascript:void(0)" class="easyui-linkbutton"
					iconCls="icon-save" plain="true"
					onclick="$('#main').edatagrid('saveRow')">保存</a>
			</div>
			<table id="main">
			</table>

JS：

	  $("#main").edatagrid({
		columns:[[
		{
			title:"班级名称",
			field:"className",
			width:"33%",
			
		},
		{
			title:"姓名",
			field:"name",
			width:"33%",
			
		},
		{
			title:"分数",
			field:"score",
			width:"33%",
			editor:"numberbox"
		}]],
	  	url:"<%=request.getContextPath()%>/score?operateFlag=init&id="+id,
	  	updateUrl:"<%=request.getContextPath()%>

后端的Action代码：

			List list = new ArrayList();
			String student_id = super.getRequest().getParameter("student_id");
			String subject_id = super.getRequest().getParameter("subject_id");
			String score = super.getRequest().getParameter("score");
			try {
				dao.updateScore(subject_id,student_id,score);
				this.returnMap.put("message", "success");
			} catch (Exception e) {
				this.returnMap.put("msg", "更新失败！");
				this.returnMap.put("message", "error");
				e.printStackTrace();
			}

页面效果：