您的位置：首页 > Web前端 > JavaScript

用jsp+servlet写一个类似于excel表格的网页表单

2010-11-07 16:35 357 查看
再DreamweaverCS5下要看到这样的效果：





需要编写jsp网页如下，这里使用了同一个表单，多个submit的分发的方法，具体可以看里面的js函数：

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="java.util.*"%>
<%@ page import="com.waleking.property.db.*" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<mce:script type="text/javascript"><!--
//同一个表单，多个submit的js分发
function deleteSubmit(form){
form.submitType.value="delete";
}
//同一个表单，多个submit的js分发
function updateSubmit(form){
form.submitType.value="update";
}
//同一个表单，多个submit的js分发
function addSubmit(form){
form.submitType.value="add";
}

// --></mce:script>

<table border="1">
<tr>
<td>SearcherIP</td>
<td>TopNum</td>
<td>IndexerPort</td>
<td>Operation</td>
</tr>
<%
List<Searcher_PropertyVO> lSearcher=Searcher_PropertyDAO.queryAll();

for(int i=0;i<lSearcher.size();i++){
Searcher_PropertyVO property=lSearcher.get(i);

%>
<tr>
<form action="SearcherSheetServlet" method="post">
<td>
<%=property.getSearcherIP() %>
</td>
<td>
<input type="text" name="topNum" value="<%=property.getTopNum() %>"/>
</td>
<td>
<input type="text" name="indexerPort" value="<%=property.getIndexerPort() %>"/>
</td>
<td>
<table>
<tr>
<td>
<input type="hidden" name="submitType"/>
<input type="hidden" name="searcherIP" value="<%=property.getSearcherIP()%>"></input>
</td>
<td><input type="submit" value="delete" onclick="deleteSubmit(form)"></input></td>
<td><input type="submit" value="update" onclick="updateSubmit(form)"></input></td>
</tr>
</table>
</td>
</form>
</tr>
<%
}
%>
<tr>
<form action="SearcherSheetServlet" method="post">
<td>
<input type="text" name="searcherIP"/>
</td>
<td>
<input type="text" name="topNum"/>
</td>
<td>
<input type="text" name="indexerPort"/>
</td>
<td>

<table>
<tr>
<td>
<input type="hidden" name="submitType"/>
</td>
<td><input type="submit" value="add" onclick="addSubmit(form)"></input></td>
</tr>
</table>

</td>
</form>
</tr>
</table>
</body>
</html>


用servlet来处理请求，因为是用post方法发送的参数，所以在doPost里面修改：

package com.waleking.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.waleking.property.db.Searcher_PropertyDAO;
import com.waleking.property.db.Searcher_PropertyVO;
/**
* Servlet implementation class SearcherSheet
*/
public class SearcherSheetServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
private Searcher_PropertyDAO searcherDAO = new Searcher_PropertyDAO();
private Searcher_PropertyVO searcherProperty = new Searcher_PropertyVO();
/**
* Default constructor.
*/
public SearcherSheetServlet() {
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
*      response)
*/
protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
System.out.println("ok");
String searcherIP = request.getParameter("searcherIP");
String topNum = request.getParameter("topNum");
System.out.println(topNum);
String indexerPort = request.getParameter("indexerPort");
System.out.println(indexerPort);
searcherProperty.setSearcherIP(searcherIP);
searcherProperty.setTopNum(Integer.parseInt(topNum));
searcherProperty.setIndexerPort(Integer.parseInt(indexerPort));
System.out.println(searcherProperty);
searcherDAO.insert(searcherProperty);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
*      response)
*/
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub

//String s=request.getParameter("ip");
String submitType=request.getParameter("submitType");
System.out.println(submitType);
if(submitType.equals("add")){//添加
String searcherIP = request.getParameter("searcherIP");
String topNum = request.getParameter("topNum");
String indexerPort = request.getParameter("indexerPort");
searcherProperty.setSearcherIP(searcherIP);
searcherProperty.setTopNum(Integer.parseInt(topNum));
searcherProperty.setIndexerPort(Integer.parseInt(indexerPort));
System.out.println(searcherProperty);
searcherDAO.insert(searcherProperty);

response.sendRedirect("index.jsp");
}else if(submitType.equals("update")){//修改
String searcherIP = request.getParameter("searcherIP");
String topNum = request.getParameter("topNum");
String indexerPort = request.getParameter("indexerPort");
searcherProperty.setSearcherIP(searcherIP);
searcherProperty.setTopNum(Integer.parseInt(topNum));
searcherProperty.setIndexerPort(Integer.parseInt(indexerPort));
searcherDAO.update(searcherProperty);

response.sendRedirect("index.jsp");
}else if(submitType.equals("delete")){//删除
String searcherIP = request.getParameter("searcherIP");
searcherDAO.deleteByKey(searcherIP);

response.sendRedirect("index.jsp");
}
}
}


关于web.xml的编写可以参看上一篇servlet的编写。

可以看到最终的效果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航