web页面之列表复选框选择功能

古城微笑少年丶 2022-09-17 14:26 432阅读 0赞

## 功能概述 ##

web页面中，常见先查询取得数据列表，然后选择数据列表中的数据记录，对这些数据记录进行相关的业务逻辑处理。处理思路是这样的，每条数据记录都有一个唯一标识，我们把每条数据记录的标识放置在选择框checkbox控件中，选中选择框后把这些数据记录标识累积赋值到一个输入域中，再将这个输入域传递给后台业务逻辑处理即可。

## 页面效果 ##

![Center][]

## 源码构件 ##

1.引用js库：

2.页面中的表弟的表格如下：

<table> 
 <tbody> 
 <tr> 
 <td>&lt;table&gt; &lt;s:iterator value="#request.orderDatafPage" var="orderDataNoDetailPage" status="stat"&gt; &lt;tr id="&lt;s:property value="#orderDataNoDetailPage.fid"/&gt;" dataid="&lt;s:property value="#orderDataNoDetailPage.fid"/&gt;" imgsrcdesplay="&lt;s:property value="#orderDataNoDetailPage.simpleimg"/&gt;" geomdata="&lt;s:property value="#orderDataNoDetailPage.fgeometryText"/&gt;"&gt; &lt;td&gt;&lt;input type="checkbox" class="noDetail" value="&lt;s:property value &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;='#orderDataNoDetailPage.fid'/&gt;" /&gt; &lt;/td&gt; &lt;td&gt;&lt;img src="" alt="" width="30" height="25" /&gt; &lt;/td&gt; &lt;!-- &lt;s:property value='request.orderDataNoDetailPage[#stat.index].thumbimg'/&gt; --&gt; &lt;td&gt;&lt;s:property value='#orderDataNoDetailPage.satellite' /&gt; &lt;/td&gt; &lt;td&gt;&lt;s:property value="#orderDataNoDetailPage.sensor" /&gt; &lt;/td&gt; &lt;td&gt;&lt;s:property value="%{getText('{0,date,yyyy-MM-dd }',{#orderDataNoDetailPage.productdate})}" /&gt; &lt;/td&gt; &lt;td&gt;&lt;img src="&lt;%=path%&gt;/oms/images/magnifier.png" style="cursor: pointer; width: 16px; height: 16px;" οnclick="showDiv(1,'&lt;s:property value="#orderDataNoDetailPage.fid"/&gt;');" title="详细信息" /&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/s:iterator&gt; &lt;/table&gt;</td> 
 </tr> 
 </tbody> 
</table>

3.页面脚本

<table> 
 <tbody> 
 <tr> 
 <td>&lt;script type="text/javascript"&gt; //交付订单-确定 function doDeliverOrder(){ var nofids=""; $(".noDetail").each(function(){ if($(this).is(":checked")){ nofids += $(this).val()+","; } }); if(nofids==""){ alert("请选择未交付数据！"); return; } &nbsp; //传递组合后的记录标识id组成的字符串给后台业务继续处理 .... } &lt;/script&gt;</td> 
 </tr> 
 </tbody> 
</table>

[Center]: /images/20220828/67f77a672e1842bb97f47a70b8a779e8.png