如何让表单中的第一行菜单变为动态

此贴为记录贴,是关于如何让菜单栏目变成动态主题的总结
以前在写表单的时候总是把表单的第一行主题给写死,比如像下面图片这样
如何让表单中的第一行菜单变为动态
当时没想那么多,只顾着完成当前的功能,但是后期在维护的时候真的是血亏
就比如说如果需求要让我们再加一个科目“化学”,那么我们有得重新打开编译器,找到所对应的前端代码,然后把这个页面再一次写死改好,如果是一个页面还好说,但这显然是不可能的。

那么这么做无疑是徒劳的,所以我们必须开发出一种解决方案来解决这个问题,那么下面我就来分享我的解决方案

解决方案

说到动态我们第一时间会想到用一个list+数据库把这些头部信息储存起来对吧,那么问题来了,我们是用一个字段存储还是多个呢,那么答案已经很明显了,如果咱们是多字段储存,那么在主题个数未知的情况下我们怎么知道该设计多少字段呢,所以我们必需得用一个字段来存储所有主体
那么,我们可以将主题转换为json字符串,然后把该字符串存到一个字段中,在读取的时候我们只需要将该字符串读取到String中,然后直接把这个字符串返回给前端页面即可

那下面的一串json打个比方

[{"sName":"语文"},{"sName":"数学"},{"sName":"英语"},{"sName":"物理"},{"sName":"化学"},{"sName":"历史"}]

将这一串字符储存在数据库中,然后我们从数据库中查询到该字段并且返回(我这里为了方便测试直接用的servlet,框架同理)

			Course course = courseService.getCourseByTerm("1");
			response.setContentType("text/html; charset=utf-8");		
			String s = course.getSubject();
			response.getWriter().print(s);

然后在前端页面我们这么写,我用的是DOM
这是表单

	<table border="1px" id ="showAllInfo_table">
		<thead>
		
		</thead>
		
		<tbody>
			
		</tbody>
	
	</table>

这是JS

	<script>	
		$.ajax({
			url:"${path}/getCourseByTerm",
			success:function(result){
				var n = 0;
				var subjectArray = [];
				var info =JSON.parse(result);
				var tr = $("<tr></tr>");
				var td = null;	
				$.each(info,function(index,item){
					td = $("<td></td>")
					td.append(item.sName);
					tr.append(td);
				});
				tr.appendTo($("#showAllInfo_table thead"));
			}
		});
	</script>

这样我们就能达到动态改变主题的目的

如何让表单中的第一行菜单变为动态

如何让表单中的第一行菜单变为动态如何让表单中的第一行菜单变为动态 qq_43049583 发布了21 篇原创文章 · 获赞 7 · 访问量 7169 私信 关注
上一篇:java——Hibernate


下一篇:数据库关系概念作业