Question

我有一个包含行数据的表。每行都有一个复选框，用于标记该行以进行处理。该表由DisplayTemplate填充，如下面的代码所示。当用户单击“处理”按钮时，代码应迭代表并将所有选定的行添加到将发送到Web服务的数组中。我认为找到一个例子是一件简单的事情，但事实并非如此。

这是表格：

<table id="hes" class="table-striped table-condensed table-bordered">
        <thead>
            <tr>
                <th></th>
                <th>Detail Id</th>
                <th>Detail Reason Code</th>
                <th>Detail Status Code</th>
            </tr>
        </thead>
        <tbody>
            @if (Model.HesViewModels != null)
            {
                @Html.DisplayFor(i => i.HesViewModels)
            }
        </tbody>

我正在使用这个JQuery代码来获取所选行，并且无法弄清楚如何将行及其相应的值放入数组中。

$('#process').click(function () {
            var x = $('#hes tr').find('input[type="checkbox"]:checked').each(function () {
               // GET THE VALUES OF THE TDs ON THIS ROW AND STICK IN AN ARRAY
            });
        });

编辑 - 以下是每行的渲染源：

<tr>
    <td><input data-val="true" data-val-required="The Process field is required." id="HesViewModels_0__Process" name="HesViewModels[0].Process" type="checkbox" value="true" /><input name="HesViewModels[0].Process" type="hidden" value="false" /></td>
    <td>500116</td>
    <td>0</td>
    <td>1</td>
</tr>

Answer 1

$(function(){

  $("#process").click(function(e){
     e.preventDefault();

      var idArray=[]; 

     $("#hes").find('input[type="checkbox"]:checked').each(function (i,k) {

         var item =$(this);       

         //Read the Id of the selected checkbox item.

         idArray.push(item.attr("id"));

     }); 
     console.log(idArray);
     //idArray is an array which has the Id of the checked checkboxes
     //now you can send the idArray to your web service endpoint

  });

});

如果您想获得id以外的任何其他属性值，您可以使用自定义属性名称替换表达式item.attr("id")。

Here是一个有效的jsbin样本。

修改：根据评论，您希望发送更多数据。发送html行的标记不是一个好主意（就像你在评论中提到的那样）。最好获得所需的数据，并以Web服务可以轻松理解的格式发送。拥有一个接受HTML字符串并为某些数据解析它的Web服务端点是个坏主意！

因此，我建议您在HTML 5数据属性中保留要发送的数据。您可以更新您的剃刀代码，如

<tbody>
@if (Model.HesViewModels != null)
{
    foreach (var item in Model.HesViewModels)
    {
        <tr>
            <td>
                @Html.CheckBoxFor(s => item.Process, 
                                  new {data_detailid = item.DetailId,
                                       data_reasoncode = item.DetailRasonCode})
            </td>
            <td>@item.DetailId</td>
            <td>@item.DetailRasonCode</td>
        </tr>
    }
}
</tbody>

这将呈现包含2个数据属性的复选框项，detailid和reasoncode

因此，在我们的jQuery代码中，我们只需要读取所选复选框的数据属性值。

$(function () {

    $("#yourProcessBtnId").click(function (e) {
        e.preventDefault();

        var itemsArray = [];     
        $("#hes").find('input[type="checkbox"]:checked').each(function (i, k) {

          var item = $(this);                     
          var row = { detailId:item.data("detailid"), reasonCode: item.data("reasoncode")} 
          itemsArray.push(row);

        });
        //you can send itemsArray now.
        console.log(itemsArray);

    });
});

itemsArray将是一个对象数组，其属性为detailId和reasonCode

Answer 2

您正在遍历复选框，因此您可以使用.parents（）函数（在.find（）和.each（），https://api.jquery.com/parents/之间）来选择包含的trs，然后迭代它们。类似的东西：

$('#process').click(function () {

    $('#hes tr').find('input[type="checkbox"]:checked').parent('tr').each(function () {
    // GET THE VALUES OF THE TDs ON THIS ROW AND STICK IN AN ARRAY
    });
});

或者，您可以这样做：

$('#process').click(function () {
    $('#hes tbody tr').each(function () {
        var $self = $(this);
        if ($self.find(':checkbox').is(':checked'))
        {
            // Here you must look for values within the row (give your tds different ids, or class names to be able to select them 

            var someValue = $self.find('td.someValue').text();
            // use the value to stick it into the array

        }
    });
});

您可以像@ Shyju的回答一样将值粘贴到数组中。

JQuery和MVC：Get Row（值）基于CheckBox Selected

2 个答案: