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

功能概述

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

页面效果

源码构件

1.引用js库：

<script type="text/javascript" src="<%=path%>/js/jquery.js"></script>

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

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

3.页面脚本

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