一个小例子

xufei0110

浏览: 110921 次
性别:
来自: 大连

最近访客更多访客>>

pearonly1a1a

我是大头也是小头

zjocole

FarmerZhang

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

CSS JavaScript J#Struts HTML

<%@ page contentType = "text/html;charset=utf-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

	String imagePath = basePath + "public_html/Images/";
%>

<html>
  <head>
    <title>课程维护</title>
    <meta http-equiv = Content-Type content = "text/html; charset=utf-8">
    <link rel = stylesheet href ="<%=basePath%>public_html/css/tdcss.css" type = text/css>
    <link rel = stylesheet href ="<%=basePath%>public_html/css/css.css" type = text/css>
	<script language ="javascript" >
		//当前页号
		var allPageNo = 1;
		//全部学员table的行数
		var allRowLength = 0;
		//学员个数
		var testUserCount = 0;
		//总页数
		var pageNum = 0;
		//每页记录数量
		var pageSize = 0;
		//最后一页记录数量
		var endPageSize = 0;
		//展示全部学员信息的table
		var allTUTable;
		//全部学员的checkbox
		var allTestUserCB;
		var tempTable;
		function init() {
			//展示全部学员信息的table
			allTUTable = window.document.all.allTestUserTable;
			//全部学员的checkbox
			allTestUserCB = window.document.all.allTestUser;
			//临时存储 被选择的学员信息的table
			tempTable = window.document.all.tempTUTable;
			
			
			//翻页用
			allRowLength = allTUTable.rows.length;
			testUserCount = allRowLength - 1;
			pageSize = 5;
			pageNum = Math.round(testUserCount/pageSize);
			endPageSize = testUserCount - ((pageNum - 1) * pageSize);
		}
		//页面初始化时 调用
		function load() {
			init();
			
			if(pageNum == 1){
				window.document.all.next.disabled = true;
				window.document.all.next.href = "#";
			}
			window.document.all.pre.disabled = true;
			window.document.all.pre.href = "#";
			//显示 10条记录， 事实上全部学员都查出来了
			for(var i = 1; i <= pageSize; i++) {
				allTUTable.rows[i].style.display = "";
			}
		}
		
		//为课程选择学员
		function selectTestUser(){
			//已选学员的table的行数
			rowLength = tempTable.rows.length;
			
			//全部学员table的单元格数
			cellsLength = allTUTable.cells.length;
			var seleteTestUser = "";
			for(var i = 0; i < allTestUserCB.length; i++)
	 		{
	 			if(allTestUserCB[i].checked){
		 			allTestUserCB[i].checked = false;
		 			allTestUserCB[i].disabled = true;
	 				//被选中的行
		 			var currentRow = allTUTable.rows[i+1];
		 			currentRow.disabled = true;
					//向已选学员table里添加新记录
	 				addNewRow(currentRow, allTestUserCB[i].value);
	 			}
	 		}
					
		}
		
		//向table里添加新行
		function addNewRow(currentRow, checkBoxValue) {
			newRow = tempTable.insertRow(rowLength);
					
			for(var j = 0; j < (allTUTable.rows[0].cells.length); j++){
				newCell = newRow.insertCell();
				if(j == 0){
					newCell.innerHTML = "<input type='checkbox' id='newCB' name='newCB' checked='true' value='" 
						+ checkBoxValue + "'>" 
						+ currentRow.cells[j].innerText;
				} else {
					newCell.innerHTML = currentRow.cells[j].innerText;
				}
			}
		}
		
		
		//allTestUser 下一页
		function nextAll() {
			window.document.all.pre.disabled = false;
			window.document.all.pre.href = "javascript:preAll()";
			var endIndex;
			var startIndex = getStartIndex(allPageNo);
			endIndex = startIndex + pageSize;
			
			//隐藏当前页
			hiddenPage(startIndex, endIndex);
			allPageNo ++;
			startIndex = getStartIndex(allPageNo);
			
			
			if(allPageNo == pageNum){
				//disabled对超链接不管用 设置了还能点 所以给他设置成#
				window.document.all.next.disabled = true;
				window.document.all.next.href = "#";
				endIndex = endPageSize + startIndex;
			}else {
				endIndex = startIndex + pageSize;
			}
			//显示下一页
			displayPage(startIndex, endIndex);
		}
		
		//allTestUser 上一页
		function preAll() {
			var startIndex = getStartIndex(allPageNo);
			var endIndex;
			if(allPageNo == pageNum){
				endIndex = startIndex + endPageSize;
			}else {
				endIndex = startIndex + pageSize;
			}
			//隐藏当前页
			hiddenPage(startIndex, endIndex);
			
			allPageNo --;
			//设置翻页按钮
			if(allPageNo == 1) {
				window.document.all.pre.disabled = true;
				window.document.all.pre.href = "#";	
			}
			window.document.all.next.disabled = false;
			window.document.all.next.href = "javascript:nextAll()";
			startIndex = getStartIndex(allPageNo);
			endIndex = startIndex + pageSize;
			//显示上一页
			displayPage(startIndex, endIndex);
		}
		
		//隐藏一页
		function hiddenPage(startIndex, endIndex) {
			for(var i = (startIndex + 1); i <= endIndex; i++) {
				allTUTable.rows[i].style.display = "none";
			}
		}
		
		//显示一页
		function displayPage(startIndex, endIndex) {
			for(var i = (startIndex + 1); i <= endIndex; i++) {
				allTUTable.rows[i].style.display = "";
			}
		}
		
		//根据当前页号得到 起始idex
		function getStartIndex(allPageNo) {
			return (allPageNo - 1) * pageSize;
		}
		
		//保存
		function save() {
			var testNewCB = window.document.getElementsByName("newCB");
			for(var i = 0; i< testNewCB.length; i++) {
				alert(testNewCB[i].value);
			}
		}
	</script>
  </head>
  
  <body onload="load()">
  	<div align="center">
    <table width="800" align="center">
    	<tr align="center">
    		<td align="left" width="300">
    			已选的学员
    			<table id="selectedTUTable" border = 1 width="100%" cellspacing = 0 cellpadding = 1 class = commonText>
    				<tr class ="tableTitleText">
						<td width ="30">编号</td>
						<td width ="70">学员id</td>
						<td width ="100">公司id</td>
						<td width="30">&nbsp;</td>
					</tr>
					<s:iterator value="allTestUser" id="testUser" status="st">
						<tr id="<s:property value="#st.getIndex()"/>" >
							<td>
								<input type="checkBox" name="selectedCheckBox" value="<s:property value="#testUser.sid"/>">
								<s:property value="#st.getIndex()"/>
							</td>
							<td><s:property value="#testUser.userID"/></td>
							<td><s:property value="#testUser.companyID"/></td>
							<td>
								<a href="<s:url action="initModifyTestUser.action">
		         						<s:param name="userSID" value="#testUser.sid"></s:param>
		         					</s:url>">编辑</a>
		         			</td>
						</tr>
					</s:iterator>
    			</table>
    			<table id="tempTUTable" border = 1 width="100%" cellspacing = 0 cellpadding = 1 class = commonText>
    			</table>
    		</td>
    		<td width="200" align="center">
    			<input type="button" value="<--选择" onclick="selectTestUser()">
    			<br />
    			<br />
    			<input type="button" value="保  存" onclick="save()">
    		</td>
    		<td align="right" width="300">
    			待选的学员
    			<table id="allTestUserTable" border = 1 width="100%" cellspacing = 0 cellpadding = 1 class = commonText>
    				<tr class ="tableTitleText">
						<td width ="30">编号</td>
						<td width ="70">学员id</td>
						<td width ="100">公司id</td>
						<td width="30">&nbsp;</td>
					</tr>
					<s:iterator value="allTestUser" id="testUser" status="st">
						<tr id="all<s:property value="#st.getIndex()"/>" style="display:none;">
							<td>
								<input type="checkBox" id="allTestUser" name="testUserSIDs" value="<s:property value="#testUser.sid"/>">
								<s:property value="#st.getIndex()"/>
							</td>
							<td><s:property value="#testUser.userID"/></td>
							<td><s:property value="#testUser.companyID"/></td>
							<td>
								<a href="<s:url action="initModifyTestUser.action">
		         						<s:param name="userSID" value="#testUser.sid"></s:param>
		         					</s:url>">编辑</a>
		         			</td>
						</tr>
					</s:iterator>
					
    			</table>
    			<table  id="ss"width="100%" cellspacing = 0 cellpadding = 1 class = commonText>
    				<tr class ="tableTitleText">
						<td width ="30">&nbsp;</td>
						<td width ="70"><a id="pre" href="javascript:preAll()">上一页</a></td>
						<td width ="100"><a id="next" href="javascript:nextAll()">下一页</a></td>
						<td width="30">&nbsp;</td>
					</tr>
    			</table>
    		</td>
    		
    	</tr>
    </table>
    </div>
  </body>
</html>

页面是 struts2做的
[img]

[/img]