摘要：
Javascript：1。想象一下一页和两个表单，表单1和表单2。
javascript：
1、思路一个页面两个form表单form1,form2。
2、利用Ajax进行查询。
3、重点是有一个页面form3表单与前面表单的form2相同 但查询出来的内容form3表单替换前面form2表单实现无刷新动态查询。
dictionary_index.jsp页面：
html：
<div class="container-fluid main"> <ul class="breadcrumb"> <li><h2> <i class="i_icon icon-dictionary"></i> 字典管理 </h2></li> <li> » </li> <li><a href="plane_findAllPlane.action">首页</a> <span class="divider">/</span></li> <li class="active">字典管理</li> <a onclick="insertRows()" class="btn btn-success pull-right bottom_125"><i class="icon-plus icon-white"></i> 添加选项</a> </ul> <div class="search"> <form name="Form1" id="Form1" method="post" style="margin:0px;"> <table cellSpacing="1" cellPadding="0" width="90%" align="center" bgColor="#f5fafe" border="0"> <tbody> <tr> <td class="ta_01" align="right" valign="middle" width="35%">类型列表：</td> <td class="ta_01" align="left" width="30%" height="25px;"> <s:select list="%{#request.dictionaryFormList}" name="type" cssClass="bg" cssStyle="bg" onchange="changetype()" listKey="type" listValue="type" value="#session.typename"></s:select> </td> <td class="ta_01" align="right" width="35%"></td> </tr> <tr height=10> <td colspan=3 align="right"></td> </tr> </tbody> </table> </form> </div> <form name="Form2" id="Form2" method="post" style="margin:0px;"> <table cellSpacing="1" cellPadding="0" width="100%" align="center" bgColor="#f5fafe" border="0"> <tr> <td> <table class="table table-hover table-striped table-bordered table_middle" id="dictTbl"> <thead class="table_head"> <tr> <th class="center_th" width="20%">编号</th> <th class="center_th" width="60%">名称</th> </tr> </thead> <tbody id="show"> <tr> <td class="center_td" width="20%">1</td> <td class="center_td" width="60%"><input name="itemname" type="text" maxlength="25" style="margin-bottom:0px;"></input> </td> </tr> </tbody> </table> </td> </tr> <tr> <td></td> </tr> <tr height=10> <td colspan=3></td> </tr> <tr> <td align="center" colspan=3></td> </tr> <input type="hidden" name="typename"> </table> <div class="control-group"> <button class="btn pull-right bottom" type="button">取消，返回</button> <button class="btn btn-primary pull-right bottom" type="button" onClick="return saveDict();">保存</button> </div> </form> </div>
javaScript：
<script type="text/javascript"> $(document).ready(function() { changetype(); });
/**
使用Ajax框架进行异步操作：
* 使用ajax引擎的send方法发送数据，发送的是Form1表单中的属性值做为参数
* 通过system/elecSystemDDlAction_edit.do链接访问后台数据，
获取到的查询结果放到dictionaryEdit.jsp中，用dictionaryEdit.jsp的内容替换到
dictionaryIndex.jsp中Form2中
*/ function changetype() { if (document.Form1.type.value == "jerrynew") { window.location.reload(); return; } else { var textStr = ""; Pub.submitActionWithForm('Form2', 'page/dictionaryAction_edit.action', 'Form1'); } } function saveDict() { if (document.Form1.type.value == "jerrynew") { alert("请选择类型！"); return false; } else { document.Form2.typename.value = document.Form1.type.value; } var tbl = document.getElementById("dictTbl"); for (i = 1; i < tbl.rows.length; i++) { var name = tbl.rows[i].cells[1].children.item(0).value; if (Trim(name) == "") { alert("名称不能为空！"); return false; } } for (k = 1; k <= tbl.rows.length - 2; k++) { for (m = k + 1; m <= tbl.rows.length - 1; m++) { var name1 = tbl.rows[k].cells[1].children.item(0).value; var name2 = tbl.rows[m].cells[1].children.item(0).value; if (name1 == name2) { alert("名称不能相同！"); return false; } } } document.Form2.action = "dictionaryAction_save.action"; document.Form2.submit(); }
function insertRows() { var tempRow = 0; var tbl = document.getElementById("dictTbl"); tempRow = tbl.rows.length; var msg = "<tr><td width="20%">" + tempRow + "</td>"; msg = msg + "<td width="60%"><input name="itemname" type="text" id=""+tempRow+"" maxlength=25 style="margin-bottom:0px;"></td>"; $("#show").append(msg); } function insertRows2() { var tempRow = 0; var tbl = document.getElementById("dictTbl"); tempRow = tbl.rows.length; var Rows = tbl.rows;//类似数组的Rows var newRow = tbl.insertRow(tbl.rows.length);//插入新的一行 var Cells = newRow.cells;//类似数组的Cells for (i = 0; i < 3; i++)//每行的3列数据 { var newCell = Rows[newRow.rowIndex].insertCell(Cells.length); switch (i) { case 0: newCell.append("<td width="20%">" + tempRow + "</td>"); break; case 1: newCell.innerHTML = "<td width="60%"><input name="itemname" type="text" id=""+tempRow+"" maxlength=25 style="margin-bottom:0px;"></td>"; break; case 2: newCell.innerHTML = "<td width="20%"><a href='javascript:delTableRow("" + tempRow + "")'><img src=${pageContext.request.contextPath }/page/img/delete.gif width=15 height=14 border=0 style=CURSOR:hand></a></td>"; break; } } } function delTableRow(rowNum) { if (window.confirm('您确定要删除该条记录吗？')) { var typename = document.Form1.type.value; if (typename == "jerrynew") { var tbl = document.getElementById("dictTbl"); if (tbl.rows.length > rowNum) { tbl.deleteRow(rowNum); for (i = rowNum; i < tbl.rows.length; i++) { tbl.rows[i].cells[0].innerText = i; tbl.rows[i].cells[2].innerHTML = "<a href='javascript:delTableRow("" + i + "")'><img src=${pageContext.request.contextPath }/page/img/delete.gif width=15 height=14 border=0 style=CURSOR:hand></a>"; } } } else { $ .ajax({ url : "dictionaryAction_delByTypeAndCode.action", data : { "code" : rowNum, "type" : typename }, type : "POST", dataType : "json", success : function(data) { if (data.success) { var tbl = document .getElementById("dictTbl"); if (tbl.rows.length > rowNum) { tbl.deleteRow(rowNum); for (i = rowNum; i < tbl.rows.length; i++) { tbl.rows[i].cells[0].innerText = i; tbl.rows[i].cells[2].innerHTML = "<a href='javascript:delTableRow("" + i + "")'><img src=${pageContext.request.contextPath }/page/img/delete.gif width=15 height=14 border=0 style=CURSOR:hand></a>"; } } } else { alert("删除失败！"); } } }); } } } </script>
dictionary_edit.jsp页面:
<%@ page language="java" pageEncoding="UTF-8"%> <%@ taglib uri="/struts-tags" prefix="s"%> <table cellSpacing="1" cellPadding="0" width="100%" align="center" bgColor="#f5fafe" border="0"> <tr> <td> <table class="table table-hover table-striped table-bordered table_middle" id="dictTbl"> <thead class="table_head"> <tr> <th class="center_th" width="20%">编号</th> <th class="center_th" width="60%">名称</th> </tr> </thead> <tbody id="show"> <s:if test="#request.dictionaryFormList!=null && #request.dictionaryFormList.size()>0"> <s:iterator value="%{#request.dictionaryFormList}" var="dictionary"> <tr> <td class="center_td" width="20%"><s:property value="%{#dictionary.code}" /> </td> <td class="center_td" width="60%"><input name="itemname" type="text" value="${dictionary.value}" maxlength="25" style="margin-bottom:0px;"></input> </tr> </s:iterator> </s:if> <s:else> <tr> <td class="ta_01" align="center" width="20%">1</td> <td class="ta_01" align="center" width="60%"><input name="itemname" type="text" size="45" maxlength="25" style="height: 12px;"></td> </tr> </s:else> </tbody> </table> </td> </tr> <tr> <td></td> </tr> <tr height=10> <td colspan=3></td> </tr> <tr> <td align="center" colspan=3></td> </tr> <input type="hidden" name="typename"> </table> <div class="control-group"> <button class="btn pull-right bottom" type="button">取消，返回</button> <button class="btn btn-primary pull-right bottom" type="button" onClick="return saveDict();">保存</button> </div>
struts2.xml：
<!-- 字典管理 --> <action name="dictionaryAction_*" class="dictionaryAction" method="{1}"> <result name="home">/page/dictionary_index.jsp</result> <result name="edit">/page/dictionary_edit.jsp</result> <result name="save" type="redirectAction"> <!--<param name="namespace">page</param> --> <param name="actionName">dictionaryAction_home</param> </result> </action>
action：
//查找所有数据类型，去重复 public String home(){ List<DictionaryForm> dictionaryFormList = new ArrayList<DictionaryForm>(); DictionaryForm dictionaryForm1 = new DictionaryForm(); dictionaryForm1.setType("**"); DictionaryForm dictionaryForm2 = new DictionaryForm(); dictionaryForm2.setType("**"); DictionaryForm dictionaryForm3 = new DictionaryForm(); dictionaryForm3.setType("**"); DictionaryForm dictionaryForm4 = new DictionaryForm(); dictionaryForm4.setType("**"); DictionaryForm dictionaryForm5 = new DictionaryForm(); dictionaryForm5.setType("**"); DictionaryForm dictionaryForm6 = new DictionaryForm(); dictionaryForm6.setType("**"); dictionaryFormList.add(dictionaryForm1); dictionaryFormList.add(dictionaryForm2); dictionaryFormList.add(dictionaryForm3); dictionaryFormList.add(dictionaryForm4); dictionaryFormList.add(dictionaryForm5); dictionaryFormList.add(dictionaryForm6); request.setAttribute("dictionaryFormList", dictionaryFormList); return "home"; } public String edit(){ String dictionaryType = dictionary.getType(); List<DictionaryForm> dictionaryFormList = dictionaryService.getDictionaryFormListByType(dictionaryType); request.setAttribute("dictionaryFormList", dictionaryFormList); return "edit"; } public String save(){ dictionaryService.saveDictionary(dictionary); ServletActionContext.getRequest().getSession().setAttribute("typename", dictionary.getTypename()); return "save"; }
参考文章：http://bbs.csdn.net/topics/390442975