浏览 4097 次
|
锁定老帖子 主题：基于displaytag的可编辑的表格
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2009-02-11
最后修改：2009-02-12
这是我去年自己做的一个项目里的代码的一部分，把它提出来整理整理。 效果如下：
主要代码： editTable.jsp <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://displaytag.sf.net" prefix="display" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<jsp:directive.page import="com.example.Song" />
<%@page import="java.util.ArrayList"%>
<html>
<head>
<style type="text/css" media="all">
@import url("css/screen.css");
</style>
<jsp:scriptlet>
Song song0=new Song(1,"Losing Grip",1);
Song song1=new Song(2,"Complicated",2);
Song song2=new Song(3,"Sk8er Boi",3);
Song song3=new Song(4,"Im With You",4);
Song song4=new Song(5,"Mobile",5);
ArrayList songValuesList = new ArrayList();
songValuesList.add(song0);
songValuesList.add(song1);
songValuesList.add(song2);
songValuesList.add(song3);
songValuesList.add(song4);
request.setAttribute("songValuesList", songValuesList );
</jsp:scriptlet>
<script type="text/javascript">
function performChange(inputObj){
var count = 0;
if(inputObj.parentNode.parentNode.childNodes[count].nodeName=="#text")
count++;
inputObj.parentNode.parentNode.childNodes[count].innerHTML=inputObj.value;
}
function onCheckRows(checkBoxObj){
var rowObj = checkBoxObj.parentNode.parentNode;
if(checkBoxObj.checked==true){
rowCheck(rowObj,"edit");
}else{
rowCheck(rowObj,"view");
}
}
function rowCheck(rowObj,value){
var j = 0;
var count = 1;
for(var i = 1 ; i<=2; i++){
if(rowObj.cells[i].childNodes[j].nodeName=="#text")
{
j++;
count++;
}if(value=="edit"){
rowObj.cells[i].childNodes[j].style.display = "none";
rowObj.cells[i].childNodes[j+count].style.display = "";
}
else{
rowObj.cells[i].childNodes[j].style.display = "";
rowObj.cells[i].childNodes[j+count].style.display = "none";
}
}
}
var preNum=new Array();
var i=0;
function deleteSong(num){
var count=0;
if(i==0){
document.getElementById('resList').deleteRow(num);
preNum[i++]=num;
count++;
}else{
for(var j=0;j<i;j++){
if(preNum[j]<num){
count++;
}
}
document.getElementById('resList').deleteRow(num-count);
preNum[i++]=num;
}
}
function invertSelected(){
var handleEl = document.getElementById("Handler");
var els = document.getElementsByName("checkEdit");
for(i=0;i<els.length;i++){
els[i].checked=handleEl.checked;
onCheckRows(els[i]);
}
}
var newRecordCnt = 0;
function addRow(){
var tabel=document.getElementById('resList');
var rowCount=tabel.rows.length;
if(tabel==null){
alert("tabel==null");
}
var tableRowTmp = tabel.insertRow(-1);
addRowStyle(tableRowTmp);
var newRowTmp = tableRowTmp.insertCell(-1);//
var objString = '<input name="checkEdit" onclick="onCheckRows(this);" type="checkbox" checked="true">';
var obj = document.createElement(objString);
newRowTmp.appendChild(obj);
tableRowTmp.appendChild(newRowTmp);
var size5 = new Array(1,20,15);
for(i = 0; i < size5.length; i++){
newRowTmp = tableRowTmp.insertCell(-1);
//first div for display
objString = '<div style="display:none;"></div>';
obj = document.createElement(objString);
if(i==0||i==2){
obj.innerHTML='';
}
newRowTmp.appendChild(obj);
objString = '<div></div>';
obj = document.createElement(objString);
if(i==0){
objString = "<input onchange='performChange(this)' type='text'"
+ "name='newSongValuesList[" + newRecordCnt + "].sequenceNumber"
+ "' value='' size='" + size5[i]+"' maxlength='40' />";
inputObj = document.createElement(objString);
obj.appendChild(inputObj);
}else if(i==1){
objString = "<input onchange='performChange(this)' type='text'"
+ "name='newSongValuesList[" + newRecordCnt + "].name"
+ "' value='' size='" + size5[i]+"' maxlength='40' />";
inputObj = document.createElement(objString);
obj.appendChild(inputObj);
}
else if(i==2){
var objString = "<a href='javascript:deleteSong(" + rowCount + ");'"
+ "></a>";
inputObj = document.createElement(objString);
inputObj.innerHTML="delete";
obj.appendChild(inputObj);
}
newRowTmp.appendChild(obj);
tableRowTmp.appendChild(newRowTmp);
}
newRecordCnt++;
}
function addRowStyle(rowObj){
if(rowObj.rowIndex % 2 == 1){
rowObj.setAttribute("className", "");
}else{
rowObj.setAttribute("className", "even");
}
}
</script>
</head>
<body>
<display:table pagesize="" requestURI=""
class="its" name="songValuesList" sort="page" id="resList" >
<display:column title="" style="width:2%;" >
<input onclick="onCheckRows(this);" type="checkbox" name="checkEdit"
value="${songValuesList[resList_rowNum - 1].sequenceNumber}"/>
<input type="hidden" name="songValuesList[${resList_rowNum - 1}].id"
value="${songValuesList[resList_rowNum - 1].id}"/>
</display:column>
<display:column style="width:8%;" title="Sequence" headerClass="sortable">
<div>${songValuesList[resList_rowNum - 1].sequenceNumber}</div>
<div style="display:none;">
<input onchange="performChange(this)" type="text" name="songValuesList[${resList_rowNum - 1}].sequenceNumber"
size="1" value="${songValuesList[resList_rowNum - 1].sequenceNumber}">
</div>
</display:column>
<display:column title="Song Name" style="width:20%;" headerClass="sortable">
<div>${songValuesList[resList_rowNum - 1].name}</div>
<div style="display:none;">
<input onchange="performChange(this)" type="text" name='songValuesList[${resList_rowNum - 1}].name'
value="${songValuesList[resList_rowNum - 1].name}" maxlength="50"/>
</div>
</display:column>
<display:column title="delete" style="width:20%">
<div><a href="javascript:deleteSong(${songValuesList[resList_rowNum - 1].sequenceNumber});">delete</a></div>
</display:column>
</display:table>
<input type="checkbox" id="Handler" onclick="javascript:invertSelected()"/>Select All
<br/>
<input type="button" value="add new song" onclick="javascript:addRow()"/>
</body>
</html>
其他的代码见附件！代码不免会有一些瑕疵，希望与大家一起探讨！
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2009-04-01
下载下来试用了下蛮不错的，解了我的燃眉之急，多谢楼主分享！
|
| 返回顶楼 | |
|
发表时间：2009-07-25
很好的代码 。可惜 displaytag不更新了。估计是受到extjs的冲击。
|
| 返回顶楼 | |
