使用jQuery在gridview中查找已检查行的值

时间:2014-11-22 03:03:40

标签: javascript jquery asp.net gridview webforms

我有一个如下所示的gridview:

<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值?

3 个答案:

答案 0 :(得分:1)

看起来你错过了该字段的值。呈现html复选框时,它将如下所示:

<input type="checkbox" value="1" id="checkbox">
无论是否检查,

$('#checkbox').val()都会返回1。如果没有值,它将返回undefined - 无论是否已检查。

答案 1 :(得分: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代码是否正常工作。

答案 2 :(得分:0)

使用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。< / p>