基于displaytag的可编辑的表格

fyydkdk

浏览: 3963 次
性别:
来自: 上海

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

JavaScript CSS JSP J#Mobile

这是我去年自己做的一个项目里的代码的一部分，把它提出来整理整理。效果如下：

主要代码：

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>

其他的代码见附件！代码不免会有一些瑕疵，希望与大家一起探讨！