在日常开发的过程中，会涉及到后台对数据库的增删该查，一般都需要将结果动态显示在页面上。
在后端涉及到集合封装类
而前端涉及到C标签库
以下是我的代码
这是和数据库一一对应的信息类
package cn.com.gj;
public class Person_info {
private String name;
private String num;
private String part;
private String kinds;
private String duty;
private String state;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getNum() {
return num;
}
public void setNum(String num) {
this.num = num;
}
public String getPart() {
return part;
}
public void setPart(String part) {
this.part = part;
}
public String getKinds() {
return kinds;
}
public void setKinds(String kinds) {
this.kinds = kinds;
}
public String getDuty() {
return duty;
}
public void setDuty(String duty) {
this.duty = duty;
}
public String getState() {
return state;
}
public void setState(String state) {
this.state = state;
}
@Override
public String toString() {
return "Person_info [name=" + name + ", num=" + num + ", part=" + part
+ ", kinds=" + kinds + ", duty=" + duty + ", state=" + state + "]";
}
public Person_info(String name, String num, String part, String kinds,
String duty, String state) {
super();
this.name = name;
this.num = num;
this.part = part;
this.kinds = kinds;
this.duty = duty;
this.state = state;
}
public Person_info(){
}
}
这是servlet代码
package cn.com.servlet;
import java.io.IOException;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import cn.com.gj.Person_info;
import cn.com.lf.JdbcUtils;
public class Personnel_definition extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//这个代码是查询数据库里面的person_info，然后循环遍历显示在页面上
String sql="select * from person_info";
ResultSet rs=JdbcUtils.select(sql, null);
ArrayList<Person_info> list=new ArrayList<Person_info>();
try {
while(rs.next()){
//把获取的值放在pi里面，再把pi放在集合里面
Person_info pi=new Person_info(rs.getString(1), rs.getString(2), rs.getString(3), rs.getString(4), rs.getString(5), rs.getString(6));
list.add(pi);
}
request.setAttribute("list", list);
request.getRequestDispatcher("Personnel_definition.jsp").forward(request, response);
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
这是jsp页面
<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8" pageEncoding="utf-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>华金矿业-人员定义界面</title>
<!-- 首页 -->
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" type="text/css" href="css/Personnel_definition.css">
<script type="text/javascript">
function hide(){
var id=document.getElementById("center_img");
var name=id.getAttribute("name");
var left=document.getElementById("center-left");
if(name=="block"){
left.setAttribute("style", "display:none;");
id.setAttribute("name", "none");
}if(name=="none"){
left.setAttribute("style", "display:block;");
id.setAttribute("name", "block");
}
}
function display(a){
var elements=[];
//获得所有的li标签
var list=document.getElementsByTagName("li");
var len=list.length;//获得长度
//把class=sub-menu的li都放在集合里面
for(var i=0;i<len;i++){
if(list[i].className== "sub-menu"){
elements[elements.length]=list[i];
}
}
/*把所有的隐藏 */
for(var i=0;i<elements.length;i++){
//获得下面的ul
var ul=elements[i].childNodes[3];
/* 设置属性为隐藏 */
ul.setAttribute("style","display:none");
/* 点击当前元素的Ul设置可见 */
}
/* 对所有的input背景颜色设置 */
var tree=document.getElementsByName("tree");
for(var i=0;i<tree.length;i++){
tree[i].setAttribute("style", "background-color:#E1F1FD;");
}
var input=document.getElementById(a);
input.setAttribute("style", "background-color:#5094D6;");
var ula=input.parentNode;
var lla=ula.childNodes;
for(var i=0;i<lla.length;i++){
if(lla[i].nodeName=='UL'){
lla[i].setAttribute("style","display:block");
}
}
}
/*获取当前的日期和时间 */
function tm(){
var today = new Date();
var year=today.getFullYear();
var month=today.getMonth()+1;
var day=today.getDay();
var tm=year+"年"+month+"月"+day+"日"+" "+today.getHours() + ":"
+ today.getMinutes() + ":" + today.getSeconds(); ;
var rq=document.getElementById("rq");
rq.innerHTML=tm;
}
</script>
</head>
<body onload="tm();">
<!-- 上 -->
<div id="up">
<div id="up_left">
<ul>
<li style="font-size:12px;">铜陵华金矿业有限责任公司</li>
<li>井下综合监管系统</li>
</ul>
</div>
<table id="up_right">
<tr>
<td class="prompt">您好！<%=request.getParameter("username") %></td>
<td class="prompt">[华金矿业]:</td>
<td class="prompt" id="rq"></td>
</tr>
<tr>
<td class="prompt">密码</td>
<td class="prompt">桌面</td>
<td class="prompt">注销</td>
</tr>
</table>
</div>
<div style="width:102%;height: 50px;background-color: #4891C6;position: relative;margin-top: -14px;margin-left: -7px;"></div>
<!--中 -->
<div id="centers">
<div id="center-left">
<input type="button" value="功能菜单" class="view">
<ul id="all">
<!-- 第一个菜单 -->
<li class="sub-menu">
<input type="button" value="图形展现" class="button" name="tree" id="jpg" onclick="display(this.id);">
<ul style="display: none;">
<li><a href="total_picture.jsp">实时总图</a></li>
<li><a href="role_position.jsp" >轨迹定位</a></li>
</ul>
</li>
<!-- 第二个菜单 -->
<li class="sub-menu">
<input type="button" value="人员定位" class="button" name="tree" id="people" onclick="display(this.id);">
<ul style="display: none;">
<li>井下人员状况</li>
<li>LED通知管理</li>
<li>LED显示管理</li>
<li>大屏幕输出</li>
<li>人员定位搜索</li>
<li>人员考勤搜索</li>
<li>调度统计</li>
</ul>
</li>
<!-- 第三个菜单 -->
<li class="sub-menu">
<input type="button" value="环境监测" class="button" name="tree" id="supervise" onclick="display(this.id);">
<ul style="display: none;">
<li>环境测试总图</li>
<li>环境监测数据查询</li>
<li>环境报警数据查询</li>
</ul>
</li>
<!-- 第四个菜单 -->
<li class="sub-menu">
<input type="button" value="查询统计" class="button" name="tree" id="select" onclick="display(this.id);">
<ul style="display: none;">
<li>人员报警查询</li>
<li>超时人员查询</li>
<li>设备工作状况</li>
<li>设备工作状态查询</li>
</ul>
</li>
<!-- 第五个菜单 -->
<li class="sub-menu">
<input type="button" value="基础信息管理" class="button" name="tree" id="information" onclick="display(this.id);">
<ul style="display: none;">
<li>基站定义</li>
<li>采集基站定义</li>
<li>采集设备定义</li>
<li><a href="/Socket/Personnel_definition">人员定义</a></li>
<li>工种定义</li>
<li>职务定义</li>
<li>带班领导定义</li>
</ul>
</li>
<!-- 第六个菜单 -->
<li class="sub-menu">
<input type="button" value="系统管理" class="button" name="tree" id="system" onclick="display(this.id)">
<ul style="display: none;">
<li>机构定义</li>
<li>用户定义</li>
</ul>
</li>
</ul>
<!--隐藏下面的具体字节 -->
</div>
<div id="center-right">
<!-- 人员信息界面-->
<form action="/Socket/SearchCondition" method="post">
<div id="peo_head">人员信息管理</div>
<span class="peo_left">人员名称:<input type="text" name="name"/></span>
<span class="peo_left" style="margin-left: 117px;">人员编号:<input type="text" name="num"/></span><br>
<span class="peo_left">所属机构:<input type="text"/><input type="button" name="part" value="请选择" class="select"/></span>
<span class="peo_left">所属工种:<input type="text"/><input type="button" name="kinds" value="请选择" class="select"/></span><br>
<span class="peo_left">所属职务:<input type="text"/><input type="button" name="duty" value="请选择" class="select"/></span>
<span class="peo_left">启用状态:
<select name="state">
<option>全部</option>
<option>启用</option>
</select>
</span>
<span id="button">
<input type="submit" value="查询" class="select"/>
<input type="button" value="重置" class="select"/>
<input type="button" value="人员报表" class="select"/>
</span>
</form>
<br>
<div id="peo_info">
<table style="width: 99%;">
<tr><td>人员名称</td><td>人员编号</td><td>所属部门</td><td>所属工种</td><td>职务</td><td>启用状态</td><td><a href="Personnel_add.jsp">【添 加】</a></td></tr>
<c:forEach items="${list}" var="i" varStatus="status">
<c:if test="${status.index % 2 == 0}">
<tr style="background-color: white"><td class="list_p">${i.name}</td><td class="list_p">${i.num}</td><td class="list_p">${i.part}</td><td class="list_p">${i.kinds}</td><td class="list_p">${i.duty}</td><td class="list_p">${i.state}</td><td class="list_p"><a href="/Socket/Person_edit?name=${i.name}&&num=${i.num}">【编辑</a>|<a href="/Socket/Person_delete?name=${i.name}&&num=${i.num}">删除</a>】</td></tr>
</c:if>
<c:if test="${status.index % 2 == 1}">
<tr style="background-color: #f2f7fa"><td class="list_p">${i.name}</td><td class="list_p">${i.num}</td><td class="list_p">${i.part}</td><td class="list_p">${i.kinds}</td><td class="list_p">${i.duty}</td><td class="list_p">${i.state}</td><td class="list_p"><a href="/Socket/Person_edit?name=${i.name}&&num=${i.num}">【编辑</a>|<a href="/Socket/Person_delete?name=${i.name}&&num=${i.num}">删除</a>】</td></tr>
</c:if>
</c:forEach>
</table>
</div>
</div>
<!-- 遍历数据库里面的集合-->
</div>
<!--下 -->
<div id="bottom">
诚信安天下-------铜陵力凡有限责任公司
</div>
</body>
</html>
