頁(yè)面部分有幾個(gè)重要的文件：
login.jsp -- 登陸畫(huà)面
showtable.jsp -- 顯示table的畫(huà)面
showtable.js -- 顯示table頁(yè)用到的javascript
下面是login.jsp
<body>
<!--
下面是要用到了js，UserLogic.js是自己的，是有dwr根據(jù)你編寫(xiě)的dwr.xml文件的內(nèi)容生成的
另外兩個(gè)是dwr自帶的。
-->
<script type='text/javascript' src='dwr/interface/UserLogic.js'></script>
<script type='text/javascript' src='dwr/engine.js'></script>
<script type='text/javascript' src='dwr/util.js'></script>
<script type='text/javascript'>
function init() {
DWRUtil.useLoadingMessage();
}
<!--
在按鈕提交時(shí)調(diào)用這個(gè)方法。注意這里的username,password,loginBean在這個(gè)jsp頁(yè)面中
是沒(méi)有顯示的寫(xiě)出來(lái)的。這三個(gè)東西是Username輸入框，Password輸入框和Form。
他們的名字是Struts自己生成的，所以你必須知道struts生成html的命名規(guī)則
-->
function sumbit(){
return UserLogic.validate(show,$("username").value,$("password").value);
}
function show(flag){
if(flag==false){
alert("Invalid Username and Password!");
} else {
$("loginBean").submit();
}
}
</script>
<html:form action="/login">
<table border="0" width="100%" id="table1" cellspacing="0" cellpadding="0">
<tr>
<td align="right">Username:</td>
<td><html:text property="username" size="30"/></td>
</tr>
<tr>
<td align="right">Password:</td>
<td><html:password property="password" value="password" size="30"/></td>
</tr>
</table>
<div align="center">
<input type="button" value="Submit" name="button1" onclick="sumbit()">
</div>
</html:form>
</body>
下面是showtable.jsp
<body onload="init()">
<script type='text/javascript' src='dwr/interface/TableModel.js'></script>
<script type='text/javascript' src='dwr/engine.js'></script>
<script type='text/javascript' src='dwr/util.js'></script>
<script type='text/javascript' src='showtable.js'></script>
<script type='text/javascript' src='mm_script.js'></script>
<script type='text/javascript' src='wz_tooltip.js'></script>
<!--這是顯示表格的層-->
<div align="center" id="base" class="base">
<table width="80%" cellspacing="0" cellpadding="0" border="1"
bordercolor="#6699FF" class="body">
<tr>
<th class="header1"><a href="#" onclick="sort(0)" > column1 </a><span id="arrow0" class="arrow"></span></th>
<th class="header1"><a href="#" onclick="sort(1)" > column2 </a><span id="arrow1" class="arrow"></span></th>
<th class="header1"><a href="#" onclick="sort(2)" > column3 </a><span id="arrow2" class="arrow"></span></th>
<th class="header1">Operation</th>
</tr>
<tbody id="rows">
<logic:iterate id="row" name="tableRows">
<tr>
<td><p align="center"><bean:write name="row" property="col1Value" /></td>
<td><p align="center"><bean:write name="row" property="col2Value" /></td>
<td><p align="center"><bean:write name="row" property="col3Value" /></td>
<td><p align="center">
<a href="#" onclick="showUpdateLayer(<bean:write name="row" property="col1Value" />)">
<img src="edit.gif" border="0"/>
</a>
|
<a href="#" onclick="deleteRow(<bean:write name="row" property="col1Value" />)">
<img src="remove.gif" border="0"/>
</a>
</td>
</tr>
</logic:iterate>
</tbody>
</table>
<table>
<tr>
<td id="addbutton">
<a href="#" onclick="showAddLayer()"><img src="add.gif" border="0" /></a>
</td>
<td id="pager">
<!--這是分頁(yè)-->
<table>
<tr>
<td>[</td>
<logic:iterate id="pager" name="pagers">
<td><a href="#" onclick="changePage(<bean:write name="pager" />)"><bean:write name="pager" /></a></td>
</logic:iterate>
<td>]</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--這是顯示更改記錄的對(duì)話框的層-->
<div align="center" id="dialog" class="dialog">
<form name="addForm">
<table border="0" width="100%" height="100%" cellspacing="0" cellpadding="0">
<tr>
<td align="right" height="25" background="header.gif" colspan="2">
<img border="0" src="close.gif" width="14" height="15" onmouseover="this.src='close_over.gif'" onmouseout="this.src='close.gif'" onclick="showBase()"
onMouseDown="MM_dragLayer('dialog','',0,0,0,0,true,false,-1,-1,-1,-1,545,105,100,'',false,'')">
</td>
</tr>
<tr>
<td align="right" width="70">PK:</td>
<td><span id="col1Value" class="pk"></span></td>
</tr>
<tr>
<td align="right">Col2:</td>
<td><input type="text" name="col2Value" size="20" class="text"></td>
</tr>
<tr>
<td align="right">Col3:</td>
<td><input type="text" name="col3Value" size="20" class="text"></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" value="save" name="addButton" class="button" onclick="saveRow()">
<input type="button" class="button" value="cancel" name="kickAddButton" onclick="showBase()">
</td>
</tr>
</table>
</form>
</div>
<!--這是顯示等待loading的層-->
<div id="loading" class="loading">
<table border="0" width="100%" height="100%" cellspacing="0" cellpadding="0">
<tr>
<td class="loading">Loading
</td>
</tr>
</table>
</div>
</body>
我這里用了另外兩個(gè)js庫(kù)，一個(gè)是mm_script.js：Macromedia的拖動(dòng)層功能。另一個(gè)是wz_tooltip.js：toolTip庫(kù)。不過(guò)這兩個(gè)庫(kù)在我的程序中不起作用。我也不知道怎么回事。
至于showtable.js。太長(zhǎng)了，不貼在這里了。在原程序中有的。我也寫(xiě)了不少注釋。
對(duì)了別忘了下載源程序。為了減少體積，我把Struts的jar都拿走了，這個(gè)東西大家一般都有。現(xiàn)在里面都dwr和jdts的jar包。所以你要想運(yùn)行的話需要把struts的jar包放到WEB-INF\lib下。
ant和db的東西也都有。需要在ModelOneDAO.java中把jdbc的url，user ，password改一下。
我這個(gè)程序還有一些bug，但是現(xiàn)在我沒(méi)有時(shí)間改了。大家將就一下吧。
http://www.tkk7.com/Files/mstar/StrutsAjax-min.rar