最近需要做一个申请单调度，查询出申请单列表，勾选一个或多个申请单
同步上传至上文，如果勾选错了，需要同步的删除。即用不刷新的技术上传一行或多行的数据，可以选择AJAX或者iframe。学校学的是AJAX，也比较繁琐，同事提醒我使用iframe（数据比较多）会相对简单，于是开始学习这个新的东西，为了模拟这个功能，以下是之前新建一的个信息的demo，先准备两个页面xinxiIframe.jsp（
主界面）exportForDetail.jsp（用于嵌入的页面），有点冗长，其实内容很简单。
xinxiIframe.jsp代码如下：
class="java"> function sud(){ //页面复选数据回显
var ExOrImData = "<s:property value="ExOrImData"/>";
var id = document.getElementsByName("id");
var strs = new Array();
strs = ExOrImData.split(",");
for ( var j = 0; j < id.length; j++) {
for (i=0;i<strs.length ;i++ )
{
if(strs[i]==id[j].value){
id[j].checked=true;
}
}
addCheckedData(); //数据列显示
}
function addCheckedData(){
var $j = jQuery.noConflict();
var id=document.getElementsByName("id");
var ExOrImData = $j("#ExOrImData").val();
var delData = "";
for ( var j = 0; j < id.length; j++) {
if(id[j].checked==true){
ExOrImData+=id[j].value+",";//ExOrImData增加id
}else{
delData+=id[j].value+",";//delData增加删除的id
}
}
$j("#ExOrImData").attr("value",ExOrImData);
var url="iframeById.action?ExOrImData="+ExOrImData+"&delData="+delData;
frames["mscform"].location=url;
}///////////////////////////////////////////////////////////////
<body onload="sud()">
<iframe id="mscform" style="width:100%;height:180" marginheight="1" iframemarginwidth="1" frameborder="no" border="0" scrolling="yes"></iframe>//嵌入iframe
<s:form name="tcForm" enctype="multipart/form-data">
<table width="98%" align="center">
<tr>
<td align="center">
<input type="submit" name="btn1" class="btn4" value="查 询" onclick="search()">
<input type="button" name="btn2" class="btn4" value="重 置" onclick="clearFormInput()">
</td>
</tr>
</table>
<table border=0 cellpadding=1 cellspacing=1 class="query_table" width="98%" align="center">
<tr>
<th colspan="28" nowrap>
<div align="left">iframe测试查询列表</div>
</th>
</tr>
<tr>
<th nowrap>选择</th>
<th nowrap>工资/th>
<th nowrap>性别</th>
<th nowrap>住址</th>
<s:iterator value="page.results" status="stat" id="result">
<tr>
<td nowrap>
<input type="checkbox" onclick="addCheckedData()" name="id" value="<s:property value="id"/>" selectValue='<s:property value="id"/>' />//点击复选框触发事件
</td>
<td nowrap><s:property value="sal"/></td>
<td nowrap><s:property value="sex"/></td>
<td nowrap><s:property value="adr"/></td>
</tr>
</s:iterator>
<p:pageTag name="page" emptyTip="未查询到数据。"/>
</table>
<input type="hidden" value="<s:property value='ExOrImData'/>" name="ExOrImData" id="ExOrImData">//作为一个中间量
</s:form>
</body>
exportForDetail.jsp
<body leftmargin="1" topmargin="0" marginwidth="0">
<s:form name="tcShowForm" >
<table border=0 cellpadding=1 cellspacing=1 class="query_table" width="98%" align="center">
<tr>
<th colspan="28" nowrap>
<div align="left">iframe嵌入的页面</div>
</th>
</tr>
<tr>
<th nowrap style="display:none">选择</th>
<th nowrap>id</th>
<th nowrap>工资</th>
<th nowrap>性别</th>
<th nowrap>地址</th>
</tr>
<s:iterator value="showList" status="stat" id="result">
<tr>
<td nowrap style="display:none">
<input type="checkbox" name="hiddenId" id="hiddenId" value="<s:property value="id"/>" selectValue='<s:property value="id"/>' />
</td>
<td nowrap><s:property value='#stat.index+1'/></td>
<td nowrap><s:property value="sal"/></td>
<td nowrap><s:property value="sex"/></td>
<td nowrap><s:property value="adr"/></td>
</tr>
</s:iterator>
</table>
</s:form>
</body>
action的代码如下：
public String findIframe() {
int bianhao = 0;
List xinxi = null;
showList = new ArrayList();
String excelData[] = null;
if(null!=ExOrImData&&!("").equals(ExOrImData)){
//去重元素
excelData = XxCon.StrToAry(ExOrImData);//解析字符串，去除,变为数组
excelData = XxCon.getNewStr(excelData);
//删除元素
if(null!=delData&&!delData.equals("")){
String delDataFor[] = XxCon.StrToAry(delData);
excelData = XxCon.HadValue(delDataFor,excelData);//倘若excelData有delDataFor，则删除，即取消勾选
}
try {
for(int i=0;i<excelData.length;i++){
bianhao = Integer.parseInt(excelData[i]);
ExOrImData = ExOrImData + excelData[i] + ",";
xinxi = xinxiService.findByIdframe(bianhao);//根据id查询
if(null!=xinxi){
showList.add(xinxi.get(0));
}
}
}
catch (Exception e) {
e.printStackTrace();
}
}
return "showList";
}
不足之处在于没有为同步的信息提供分页（后面在
研究），倘若是
大型网站会有很多的申请单，而且没有用ajax，毕竟ajax是主流。
使用ie测试，简易的界面图片如下
http://my.iteye.com/admin/picture/131127
相关文章
