| Blog信息 |
|
blog名称:
日志总数:1304
评论数量:2242
留言数量:5
访问次数:7596868
建立时间:2006年5月29日 |
| |
|
 [DWR(Ajax)]dwr简介--一个例子(续二)
软件技术, 电脑与网络
lhwork 发表于 2006/7/10 10:26:59 |
| 页面部分有几个重要的文件：login.jsp -- 登陆画面showtable.jsp -- 显示table的画面showtable.js -- 显示table页用到的javascript下面是login.jsp<body><!-- 下面是要用到了js，UserLogic.js是自己的，是有dwr根据你编写的dwr.xml文件的内容生成的 另外两个是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();}<!-- 在按钮提交时调用这个方法。注意这里的username,password,loginBean在这个jsp页面中 是没有显示的写出来的。这三个东西是Username输入框，Password输入框和Form。 他们的名字是Struts自己生成的，所以你必须知道struts生成html的命名规则 -->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"> <!--这是分页--> <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><!--这是显示更改记录的对话框的层--><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>我这里用了另外两个js库，一个是mm_script.js：Macromedia的拖动层功能。另一个是wz_tooltip.js：toolTip库。不过这两个库在我的程序中不起作用。我也不知道怎么回事。至于showtable.js。太长了，不贴在这里了。在原程序中有的。我也写了不少注释。对了别忘了下载源程序。为了减少体积，我把Struts的jar都拿走了，这个东西大家一般都有。现在里面都dwr和jdts的jar包。所以你要想运行的话需要把struts的jar包放到WEB-INF\lib下。ant和db的东西也都有。需要在ModelOneDAO.java中把jdbc的url，user ，password改一下。我这个程序还有一些bug，但是现在我没有时间改了。大家将就一下吧。http://www.blogjava.net/Files/mstar/StrutsAjax-min.rar |
|
|