使用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()中，选定行返回未定义。需要更改什么以便它可以从已选复选框的行中拾取hfId值？

- user4075691

---

jQuery获取Asp.net Gridview中复选框选择的行值 或者 使用jQuery与CheckBox和ASP.NET GridView 我认为其中一个肯定适合你。 - Manish Goswami

@ManishGoswami，不幸的是，这对我似乎没有用。我只能看到在next()中使用名称代替id作为与上述不同之处。已尝试但无济于事。 - user4075691

Answer 1

看起来您在字段中缺少一个值。当渲染HTML复选框时，它会呈现如下：

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

无论是否选中，$('#checkbox').val()都将返回1。如果没有值，则会返回undefined - 无论是否选中。

- DAB

---

我不确定你的意思，我正在尝试获取隐藏标签hfId的值，而不是复选框本身的值。 - user4075691

Answer 2

你需要选择包含隐藏控件和复选框的父级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 代码可以正常工作。

- Rahul Singh

---

修改后，它将提取唯一行，工作方式如下：var Parenttd = $(this).parents('td')[0]; var HiddenValue = $('input[name$=hfId]', Parenttd).val(); - user4075691

@user4075691 - 好的，谢谢 :) - Rahul Singh

Answer 3

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

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

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

- RGS

---

我明白你的想法，但不幸的是它没有起作用。我相信这是因为问题现在出在 [id$=hfId] 上。我现在将尝试你的编辑。 - user4075691

设置CSS没有起作用，我也将其删除以使其可见，但仍然没有起作用。 - user4075691