使用jQuery在gridview中查找选中行的值

Question

我有一个如下所示的网格视图：

<div id="btnCancel" onclick="cancelize()" class="btn btn-default pull-right ui-colour"><span class="glyphicon glyphicon-remove"></span></div>
    <asp:GridView ID="gv" runat="server" AutoGenerateColumns="False"
        OnPageIndexChanging="gv_PageIndexChanging" Width="90%" PageSize="10" HorizontalAlign="Center" AllowPaging="true" OnRowDataBound="gv_RowDataBound"
        CssClass="table table-bordered ui-state-default table-condensed table-responsive table-hover">
           <Columns>
              <asp:BoundField DataField="id" HeaderText="Nbr." ItemStyle-HorizontalAlign="center" ItemStyle-VerticalAlign="Top" ItemStyle-Wrap="false" />
              <asp:TemplateField ItemStyle-Wrap="false" ItemStyle-VerticalAlign="Top" HeaderText="Options" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center">
                  <ItemTemplate>
                     <div id="btnEdit" onclick="modalize(<%#Eval("id") %>)" class="btn btn-sm btn-default ui-colour"><span class="glyphicon glyphicon-wrench"></span></div>
                  </ItemTemplate>
              </asp:TemplateField>
              <asp:BoundField Visible="true" DataField="status" HeaderText="Status" ItemStyle-HorizontalAlign="center" HeaderStyle-HorizontalAlign="Center" ItemStyle-VerticalAlign="Top" ItemStyle-Wrap="false" />
              <asp:BoundField Visible="true" DataField="amount" HeaderText="Amount" ItemStyle-HorizontalAlign="center" HeaderStyle-HorizontalAlign="Center" ItemStyle-VerticalAlign="Top" ItemStyle-Wrap="false" />
              <asp:BoundField Visible="true" DataField="added" HeaderText="Added" ItemStyle-HorizontalAlign="center" HeaderStyle-HorizontalAlign="Center" ItemStyle-VerticalAlign="Top" ItemStyle-Wrap="false" DataFormatString="{0:d}" />
              <asp:BoundField Visible="true" DataField="nextbilling" HeaderText="Next Billing" ItemStyle-HorizontalAlign="center" HeaderStyle-HorizontalAlign="Center" ItemStyle-VerticalAlign="Top" ItemStyle-Wrap="false" DataFormatString="{0:d}" />
              <asp:BoundField Visible="true" DataField="lastresult" HeaderText="Last Result" ItemStyle-HorizontalAlign="center" HeaderStyle-HorizontalAlign="Center" ItemStyle-VerticalAlign="Top" ItemStyle-Wrap="false" />
              <asp:TemplateField ItemStyle-Wrap="false" ItemStyle-VerticalAlign="Top" HeaderText="Cancel" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center">
                  <ItemTemplate>
                     <asp:Label runat="server" Visible="false" ID="hfId" Text='<%#Eval("id") %>'></asp:Label>
                     <asp:Label runat="server" Visible="false" Text='<%# " - " + Eval("cancel", "{0:d}") %>' ID="lblCancel"></asp:Label>
                     <asp:CheckBox ID="cbCancel" CssClass="cbCancel" runat="server" Visible="false" />
                  </ItemTemplate>
              </asp:TemplateField>
           </Columns>
   </asp:GridView>
 <a id="hlCancel" class="hlCancel" />
 <a id="hlEdit" class="hlEdit" />

调用模态的函数：

             function cancelize() {
        var pId = queryString.pid;
        var ids = "";
        $("input[name$=cbCancel]:checked").each(function () {
            ids += "-" + $(this).next('input:hidden[id$=hfId]').val();//stuck here
        }).get();
        var url = "pageToView.aspx?id=1&pid=" + pId+ "&cids=" + ids;
        $j('#hlCancel').attr('href', url)
        $j('#hlCancel').click();
    }

一切都很好，但是在 cancelize 函数中的 .each() 上，它为选定的行返回 undefined。此处需要更改哪些内容，以便它可以从选中复选框的行中获取 hfId 值？

Answer 1

您需要选择隐藏控件和复选框所在的父td，然后搜索隐藏字段：-

  var Parenttd =  $('input[type="checkbox"]:checked').parents('td')[0];
  var HiddenValue = $(input:hidden,Parenttd).val();

此外，由于您在标签控件中使用了“Visible=false”，因此它不会呈现，而是应该使用隐藏控件：-

<asp:HiddenField ID="hfId" runat="server" Value='<%# Eval("id") %>' />

编辑：
如果您想使用 ID 选择器获取此信息，则需要在复选框和隐藏字段控件中设置 ClientIDMode="Static" 属性，然后您可以像这样简单地使用：-

var parenttd =$('#cbCancel:checked').parents('td')[0];
var yourHiddenVal  $('#hfId',parent).val();

我已经使用了这个隐藏控件并检查了上面的 jQuery 代码工作正常。

Answer 2

您似乎缺少该字段中的值。当一个 html 复选框被渲染时，它将如下所示：

<input type="checkbox" value="1" id="checkbox">

$('#checkbox').val() 将返回 1 而不管它是否被选中。如果没有值，它将返回 undefined - 不管它是否被选中。

Answer 3

使用prev() 获取隐藏标签值。

$("input[name$=cbCancel]:checked").each(function () {
ids += "-" + $(this).parent().find('[id$=hfId]').val();
});

同时使用 style="visibility:hidden" 或 style="display:none" 而不是使用 Visible="false" 作为标签标签，因为 Visible="false" 会阻止控件呈现到 HTML。