使用 jQuery 在网格视图中查找选中行的值

Find values of checked rows in gridview using jQuery

本文关键字：查找 使用 网格 视图 jQuery      更新时间：2023-09-26

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

<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（） 上，它为所选行返回未定义。这里需要更改什么，以便它可以从带有选中复选框的行中获取 hfId 值？

您需要

选择隐藏控件和复选框所在的父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代码是否正常工作。

看起来您缺少字段中的值。呈现 html 复选框时，它将如下所示：

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

无论是否选中，$('#checkbox').val()都将返回 1。如果没有值，它将返回未定义 - 无论是否选中它。

使用 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 中。

相关文章：