介绍:List页面:带有搜索条件的页面。
SelectList页面:实际显示的由List所设的搜索条件所产生的数据结果。
由于我们的数据列表显示采用2个部分,1:搜索页面部分List页面。2:数据页面部分SelectList页面。
从逆向思维的角度去列出该功能的实现过程:
1:在数据页面(SelectList页面)中的每一条记录去添加一个隐藏域数据,为其在选择后,读取该隐藏域中的值。
例:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![ExpandedBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<
input
type
="checkbox"
name
="key"
id
="<c:out value="
${vo.checkMissionId}"
/>
" value="
<
c:out
value
="${vo.checkMissionId}"
/>
" onClick="setCheckValue('
<
c:out
value
="${vo.checkMissionId}"
/>
','
<
c:out
value
="${vo.checkMissionId}"
/>
')">
< input type ="hidden" id ="td_<c:out value=" ${vo.checkMissionId}" /> " value=" < c:out value ="${vo.checkMissionId}" /> ">
< input type ="hidden" id ="td_<c:out value=" ${vo.checkMissionId}" /> " value=" < c:out value ="${vo.checkMissionId}" /> ">
2:在数据页面(SelectList页面)中添加“获得这些被选择的数据”的方法。
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![ExpandedBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
function
getResultInfo(){
var flag = false ;
var values = "" ;
var results = "" ;
var name = ' td_ ' ;
var checkboxs = document.getElementsByName( " key " );
for ( var i = 0 ;i < checkboxs.length;i ++ ){
if (checkboxs[i].checked){
flag = true ;
name = name + checkboxs[i].value;
name = jtrim(name);
values = document.getElementById(name).value;
if (i > 0 )
{
results = results + ' , ' + values;
} else {results = values;}
name = " td_ " ;
}
}
if (flag)
return results;
else
return false ;
}
var flag = false ;
var values = "" ;
var results = "" ;
var name = ' td_ ' ;
var checkboxs = document.getElementsByName( " key " );
for ( var i = 0 ;i < checkboxs.length;i ++ ){
if (checkboxs[i].checked){
flag = true ;
name = name + checkboxs[i].value;
name = jtrim(name);
values = document.getElementById(name).value;
if (i > 0 )
{
results = results + ' , ' + values;
} else {results = values;}
name = " td_ " ;
}
}
if (flag)
return results;
else
return false ;
}
3:在List页面中添加调用获取数据,并返回调用页面的方法:
function
addSelectedMission()
{
var Results = result.window.getResultInfo();
if (Results){
parent.window.returnValue = Results;
parent.window.close();
}
else alert( ' 请选择任务! ' );
}
{
var Results = result.window.getResultInfo();
if (Results){
parent.window.returnValue = Results;
parent.window.close();
}
else alert( ' 请选择任务! ' );
}
解释:这里的result对象就是SelectList页面。result.window.getResultInfo();就是调用SelectList页面中的获取数据的方法。
其中,这个SelectList是用Frame嵌入到List页面的。其代码如下:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![ExpandedBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<
tr
>
< td > <!-- UI Structure Begin "信息列表滚动区" -->
< div class ="contentDiv" >
<!-- UI Structure Begin "信息列表表格" -->
< iframe name ="result" id ="result" scrolling ="yes" width ="100%" height ="100%" src ='/techtask/missionInfo-result.do?method=missionInfoSelectList&vo.workType=<bean:write name ="missionInfoForm" property ="vo.workType" /> ' frameborder=0> </ iframe >
<!-- UI Structure End "信息列表表格" -->
</ div >
<!-- UI Structure End "信息列表滚动区" --> </ td >
</ tr >
< td > <!-- UI Structure Begin "信息列表滚动区" -->
< div class ="contentDiv" >
<!-- UI Structure Begin "信息列表表格" -->
< iframe name ="result" id ="result" scrolling ="yes" width ="100%" height ="100%" src ='/techtask/missionInfo-result.do?method=missionInfoSelectList&vo.workType=<bean:write name ="missionInfoForm" property ="vo.workType" /> ' frameborder=0> </ iframe >
<!-- UI Structure End "信息列表表格" -->
</ div >
<!-- UI Structure End "信息列表滚动区" --> </ td >
</ tr >
4:在List页面中添加个按钮去触发这个addSelectedMission()的方法。
<
td
class
="btnMain"
onClick
="addSelectedMission()"
>
添加选中的企业
</
td
>
5:在调用的页面添加方法,去调用这个List页面。并对返回的结果进行处理
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![ExpandedBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
function
selectMission(){
var url,ops;
url = " /techtask/missionInfo-result.do?method=missionInfoList&SelectType=1 " ;
ops = " dialogHeight:600px;dialogWidth:800px;center:yes;resizable:yes;status:yes; " ;
var a = window.showModalDialog(url, "" ,ops);
document.getElementById( " vo.checkMissionIds " ).value = a; // 对返回的结果进行处理。
}
var url,ops;
url = " /techtask/missionInfo-result.do?method=missionInfoList&SelectType=1 " ;
ops = " dialogHeight:600px;dialogWidth:800px;center:yes;resizable:yes;status:yes; " ;
var a = window.showModalDialog(url, "" ,ops);
document.getElementById( " vo.checkMissionIds " ).value = a; // 对返回的结果进行处理。
}
6:在调用的页面中添加按钮去触发这个事件:
<
td
class
="btnMain"
onClick
="selectMission()"
>
选择行政任务
</
td
>