这里给出一种可动态增加、删除、修改和保存数据的web表格简易实现。思想很常规，javascript代码在关键地方给出了一些注释。有兴趣的朋友可以把玩一下。转载请注明出处！
先给出三张效果图：
图一：常态
图二：添加行状态
图三：修改列状态
panama_table.jsp
|
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<style type="text/css">
.panama_table
{
font-size:12px;
font-weight:light;
}
.panama_table_row_odd
{
}
.panama_table_row_even
{
background-color:gray;
color: white;
}
.panama_table_cell
{
width:80px;
height:28px;
text-align:center;
cursor: pointer;
}
</style>
<script type="text/javascript" src="../js/net.js"></script>
<script type="text/javascript" src="../js/panama-ajaxtools/panama_table.js"></script>
</head>
<body onload="PanamaTableInit()">
<table cellpadding="2px" cellspacing="0px" style="font-size:12px;font-weight:light">
<tr>
<td><input type="checkbox" onclick="PanamaTableSelAll()" />全选/取消</td>
<td><a href="javascript:PanamaTableAppendRow()">添加行</a></td>
<td><a href="javascript:PanamaTableDeleteRow()">删除行</a></td>
<td><a href="javascript:PanamaTableSave()">保存</a></td>
</tr>
</table>
<div style="width:300px"><hr /></div>
<table cellpadding="4" cellspacing="0" class="panama_table" id="panama_table" >
<tr><td><input type="checkbox" /></td><td>郭佳</td><td>陈珩</td><td>王赢</td></tr>
<tr><td><input type="checkbox" /></td><td>蔡一</td><td>覃晖</td><td>彭杉</td></tr>
<tr><td><input type="checkbox" /></td><td>杨莉</td><td>李英海</td><td>杜宽</td></tr>
</table>
</body>
</html>
|
panama_table.js
|
/**
* Panama-ajaxtools: panama_table
* @version: 0.1 beta 1
* @date: Oct 5th 2008
* @author: yunyuaner
* @contact: yunyuaner@gmail.com
*/
function SwitchToEditMode()
{
var value = this.innerHTML;
if (this.__mode == "plain")
{
this.__mode = "edit";
var input = document.createElement("input");
input.id = "__curr";
input.type = "text";
input.value = value;
input.style.width = 60;
input.style.height = 20;
input.onblur = SwitchToPlainMode;
this.replaceChild(input, this.firstChild);
input.focus();
}
}
function SwitchToPlainMode()
{
var parent = this.parentNode;
parent.innerHTML = this.value;
parent.__mode = "plain";
}
function PanamaTableInit()
{
PanamaTableInvalidate();
}
function PanamaTableInvalidate()
{
var pTable = document.getElementById("panama_table");
var pTableRows = pTable.getElementsByTagName("tr");
for (var i = 0; i < pTableRows.length; i++)
{
pTableCells = pTableRows[i].getElementsByTagName("td");
pTableRows[i].className = i % 2 ? "panama_table_row_odd" : "panama_table_row_even";
for (var j = 1; j < pTableCells.length; j++)
{
pTableCells[j].className = "panama_table_cell";
pTableCells[j].onclick = SwitchToEditMode;
if (pTableCells[j].__mode == null)
pTableCells[j].__mode = "plain";
}
}
/* Exclusive of checkbox filed */
pTable.__cellsPerRow = 3;
}
function PanamaTableGetRowNodeFromCellElem(e)
{
return e.parentNode.parentNode;
}
function PanamaTableDeleteRow()
{
var pTable = document.getElementById("panama_table");
var rowsToDel = new Array();
var chkboxFileds_NoFiltered = pTable.getElementsByTagName("input");
/* Select the rows to be delete */
for (var i = 0, j = 0; i < chkboxFileds_NoFiltered.length; i++)
{
if (chkboxFileds_NoFiltered[i].type == "checkbox" && chkboxFileds_NoFiltered[i].checked)
{
rowsToDel[j++] = PanamaTableGetRowNodeFromCellElem(chkboxFileds_NoFiltered[i]);
}
}
for (var k = 0; k < rowsToDel.length; k++)
{
/* Note: pTable.firstChild of pTable is tbody */
pTable.firstChild.removeChild(rowsToDel[k]);
}
PanamaTableInvalidate();
}
function PanamaTableAppendRow()
{
var pTable = document.getElementById("panama_table");
var newRow = document.createElement("tr");
var newCells = new Array();
var cellInputs = new Array();
var chkboxFiledContainer = document.createElement("td");
var chkboxFiled = document.createElement("input");
chkboxFiled.type = "checkbox";
chkboxFiledContainer.appendChild(chkboxFiled);
newRow.appendChild(chkboxFiledContainer);
chkboxFiled.focus();
for (var i = 0; i < pTable.__cellsPerRow; i++)
{
newCells[i] = document.createElement("td");
newCells[i].__mode = "edit";
cellInputs[i] = document.createElement("input");
cellInputs[i].type = "text";
cellInputs[i].style.width = 60;
cellInputs[i].style.height = 20;
newCells[i].appendChild(cellInputs[i]);
newRow.appendChild(newCells[i]);
}
/* Note: pTable.firstChild of pTable is tbody */
pTable.firstChild.appendChild(newRow);
/* Rebuild table to set table style */
PanamaTableInvalidate();
}
function PanamaTableSelAll()
{
var cbList = document.getElementById("panama_table").getElementsByTagName("input");
var status = this.checked ? false : true;
for (var i = 0; i < cbList.length; i++)
cbList[i].checked = status;
this.checked = status;
}
function PanamaTableSave()
{
var pTable = document.getElementById("panama_table");
var rows = pTable.getElementsByTagName("tr");
/* Change new row from edit mode to plain mode */
for (var i = 0; i < rows.length; i++)
{
cells = rows[i].getElementsByTagName("td");
/* Skip the chkbox filed */
for (var j = 1; j < cells.length; j++)
{
if (cells[j].firstChild.nodeName.toLowerCase() == "input")
{
/* FIXME: value may be null */
cells[j].innerHTML = cells[j].firstChild.value;
cells[j].__mode = "plain";
}
}
}
/* Parse data in table */
var tableTextList = new Array();
for (i = 0; i < rows.length; i++)
{
var rowTextList = new Array();
var cells = rows[i].getElementsByTagName("td");
for (j = 1; j < cells.length; j++)
rowTextList[j-1] = cells[j].innerHTML;
tableTextList[i] = rowTextList;
}
var xmlDoc = "";
xmlDoc += "";
for (var m = 0; m < tableTextList.length; m++)
{
xmlDoc += ""
for (var n = 0; n < tableTextList[m].length; n++)
{
xmlDoc += "" + tableTextList[m][n] + "";
}
xmlDoc += ""
}
xmlDoc += "";
xmlDoc += "";
/* Note: Encode string from iso-8859-1 to uri */
xmlDoc = encodeURIComponent(xmlDoc);
/* Post data to hidden iframe */
var hiddenIframe = document.createElement("iframe");
hiddenIframe.style.display = "none";
hiddenIframe.src = "about:blank";
hiddenIframe.id = "hiddenIframe"
document.body.appendChild(hiddenIframe);
var hiddenIframe = document.getElementById("hiddenIframe");
var hiddenDocument = hiddenIframe.contentWindow.document;
var hiddenSrc = "";
hiddenDocument.open();
hiddenDocument.write(hiddenSrc);
hiddenDocument.close();
var hiddenForm = hiddenDocument.getElementById("hiddenForm");
var hiddenXMLTmpBox = hiddenDocument.getElementById("hiddenXMLTmpBox");
hiddenXMLTmpBox.value = xmlDoc;
hiddenForm.action = "";
hiddenForm.submit();
}
|
AutoSync.java
|
package biobase.experi;
import java.io.*;
import java.nio.*;
import java.nio.charset.*;
import java.nio.channels.*;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.Map;
import java.net.*;
import com.opensymphony.xwork2.ActionContext;
import com.opensymphony.xwork2.ActionSupport;
@SuppressWarnings("serial")
public class AutoSync extends ActionSupport {
private InputStream inputStream;
private String hiddenXMLTmpBox;
public InputStream getInputStream() {
return inputStream;
}
public String getHiddenXMLTmpBox() {
return hiddenXMLTmpBox;
}
public void setHiddenXMLTmpBox(String tmpBox) {
hiddenXMLTmpBox = tmpBox;
}
public void setInputStream(InputStream inputStream) {
this.inputStream = inputStream;
}
public String execute()
{
try {
/* TODO: Parse dirtyTableXML and save */
String dirtyTableXML = URLDecoder.decode(hiddenXMLTmpBox, "UTF-8");
System.out.println(dirtyTableXML);
} catch (UnsupportedEncodingException e) {
e.printStackTrace();
}
StringBuilder xmlText = new StringBuilder();
xmlText.append("");
xmlText.append("");
xmlText.append("");
String strXMLText = xmlText.toString();
Charset cset = Charset.forName("utf-8");
ByteBuffer b = cset.encode(strXMLText);
this.inputStream = new ByteArrayInputStream(b.array());
return SUCCESS;
}
}
|
struts.xml
|
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"">
<struts>
<package name="biobase-experi" extends="struts-default" namespace="/experi">
<action name="autosync" class="biobase.experi.AutoSync">
</action>
</package>
</struts>
|
