jQuery Datatable 的所有记录中的 Struts2 复选框

Question

我正在尝试将复选框实现为 jquery 数据表中的列。当我选择记录时，应该在相应的 Action 类中单独处理这些记录。我创建了一个隐藏变量，并同样在 jQuery 中赋值：

HTML：

<s:iterator value="warehouseBean.pickReqList" status="matStat">
    <s:hidden name="warehouseBean.pickReqList[%{#matStat.index}].grade"></s:hidden>
    <s:hidden name="warehouseBean.pickReqList[%{#matStat.index}].quantity"></s:hidden>
    <s:hidden name="warehouseBean.pickReqList[%{#matStat.index}].action"></s:hidden>
</s:iterator>

<tbody><s:iterator value="warehouseBean.pickReqList" status="matStat">
    <tr>
         <td><s:property value="grade" /></td>
         <td><s:property value="quantity" /></td>
         <td><s:select name="warehouseBean.pickReqList[%{#matStat.index}].pickQuantity" list="pickQuantity"></s:select></td>
         <td><s:checkbox name="chkboxname" cssClass="checkbox pickIndivCheck"></s:checkbox></td>
    </tr>
    </s:iterator>
</tbody>

每当单击复选框时，都会为隐藏变量分配值。

jQuery：

$('.pickIndivCheck').click(function(e){
   var index=$(this).closest('tr').index();
   $('#warehousePick_warehouseBean_pickReqList_'+index+'__action').val(e.target.checked); });

如果我不排序或导航到表格的不同页面，上面的代码可以完美运行。如果我选中数据表第一页上的复选框，则选中的属性将分配给 action 变量，并且同样反映在 Action 类中。

如果我进行排序或分页，则它不起作用。故障排除后，我发现 jQuery 代码正在获取单击复选框的索引并分配值。例如，如果对象中有 20 个元素，则在数据表的两个不同页面中加载。隐藏变量也是这样写的：

<input type="hidden" name="warehouseBean.pickReqList[0].grade" value="BR000-R" id="warehousePick_warehouseBean_pickReqList_0__grade"/>
<input type="hidden" name="warehouseBean.pickReqList[0].quantity" value="1" id="warehousePick_warehouseBean_pickReqList_0__quantity"/>
<input type="hidden" name="warehouseBean.pickReqList[0].action" value="false" id="warehousePick_warehouseBean_pickReqList_0__action"/>

<input type="hidden" name="warehouseBean.pickReqList[1].grade" value="BR001-R" id="warehousePick_warehouseBean_pickReqList_1__grade"/>
<input type="hidden" name="warehouseBean.pickReqList[1].quantity" value="1" id="warehousePick_warehouseBean_pickReqList_1__quantity"/>
<input type="hidden" name="warehouseBean.pickReqList[1].action" value="false" id="warehousePick_warehouseBean_pickReqList_1__action"/>

<input type="hidden" name="warehouseBean.pickReqList[2].grade" value="BR002-R" id="warehousePick_warehouseBean_pickReqList_2__grade"/>
<input type="hidden" name="warehouseBean.pickReqList[2].quantity" value="1" id="warehousePick_warehouseBean_pickReqList_2__quantity"/>
<input type="hidden" name="warehouseBean.pickReqList[2].action" value="false" id="warehousePick_warehouseBean_pickReqList_2__action"/> .........

<input type="hidden" name="warehouseBean.pickReqList[18].grade" value="BR0018-R" id="warehousePick_warehouseBean_pickReqList_18__grade"/>
<input type="hidden" name="warehouseBean.pickReqList[18].quantity" value="1" id="warehousePick_warehouseBean_pickReqList_18__quantity"/>
<input type="hidden" name="warehouseBean.pickReqList[18].action" value="false" id="warehousePick_warehouseBean_pickReqList_18__action"/>

<input type="hidden" name="warehouseBean.pickReqList[19].grade" value="BR0019-R" id="warehousePick_warehouseBean_pickReqList_19__grade"/>
<input type="hidden" name="warehouseBean.pickReqList[19].quantity" value="1" id="warehousePick_warehouseBean_pickReqList_19__quantity"/>
<input type="hidden" name="warehouseBean.pickReqList[19].action" value="false" id="warehousePick_warehouseBean_pickReqList_19__action"/>

这也是它在数据表上的显示方式。如果我对表格进行排序，则最后一条记录出现在表格的第一页。如果我选择第二条记录，jQuery 方法获取当前索引（即 1）分配给隐藏变量

warehousePick_warehouseBean_pickReqList_1__action

而实际变量应该是

warehousePick_warehouseBean_pickReqList_18__action

数据表记录的索引与隐藏对象的索引不同。您能告诉我如何将值分配给不同表格中的行复选框吗？

Answer 1

我创建了一个虚拟变量 temp，然后同样更改了 HTML

<tr>
     <td><s:property value="grade" /></td>
     <td><s:property value="quantity" /></td>
     <td><s:select name="warehouseBean.pickReqList[%{#matStat.index}].pickQuantity" list="pickQuantity"></s:select></td>
     <td><s:checkbox name="warehouseBean.pickReqList[%{#matStat.index}].temp" cssClass="checkbox pickIndivCheck"></s:checkbox></td>
</tr>

更改jQuery获取复选框（被点击）的id，从ID中提取索引，然后在使用索引创建变量后分配给相应的隐藏变量，同样：

$('.pickIndivCheck').click(function(e){
    var clId=this.id;
    var temp=clId.substring(40);
    var n=temp.lastIndexOf('_');
    var index=temp.substring(0,n-1);
    $('#warehousePick_warehouseBean_pickReqList_'+index+'__action').val(e.target.checked);   });