Question

我正在尝试做到这一点，因此我可以通过使用JQuery在行的任何位置单击来从asp：GridView元素中选择一行。

当前，我的代码如下：

asp：GridView

<asp:GridView Width="100%" ID="gvQuickPhrases" CssClass="quickphrases-table" AutoGenerateColumns="false" runat="server" DataKeyNames="ID" AutoGenerateSelectButton="true" OnSelectedIndexChanged="gvQuickPhrases_SelectedIndexChanged">
    <Columns>
        <asp:BoundField DataField="Text" HeaderText="Quick Phrases" />
    </Columns>
    <AlternatingRowStyle CssClass="qp-table-alternate-row" />
    <HeaderStyle CssClass="qp-table-header-style" />
    <PagerSettings Visible="False" />
    <RowStyle CssClass="qp-table-row-style" />
    <SelectedRowStyle CssClass="qp-selected-table-row-style" />
</asp:GridView>

JavaScript：

$('tr.qp-table-alternate-row').click(function () {
    $('tr.qp-table-row-style').removeClass('qp-selected-table-row-style');
    $('tr.qp-table-alternate-row').removeClass('qp-selected-table-row-style');
    $(this).addClass('qp-selected-table-row-style');
});
$('tr.qp-table-row-style').click(function () {
    $('tr.qp-table-alternate-row').removeClass('qp-selected-table-row-style');
    $('tr.qp-table-row-style').removeClass('qp-selected-table-row-style');
    $(this).addClass('qp-selected-table-row-style');
});

后面：

protected void gvQuickPhrases_SelectedIndexChanged(object sender, EventArgs e)
{
    var qf = AdminDatabroker.GetQuickPhrase(Convert.ToInt32(gvQuickPhrases.SelectedDataKey.Value));

    txtPhrase.Value = qf.Text;
    lblHeadingPhrase.Text = "Edit Phrase";
    hQuickPhraseID.Value = qf.ID.ToString();
    hQuickPhraseSelectedText.Value = qf.Text;

    btnTrash.Enabled = true;
    btnEdit.Enabled = true;
}

现在，这在应用选定的行样式方面有效，但是，实际上并未选择该行。例如，如果我随后去编辑该行，它的行为就好像没有实际选择任何内容。

Answer 1

将类添加到GridView行不会触发SelectedIndexChanged，因为这需要PostBack。如果您希望整个行都可单击，则最简单的方法是将href从Select按钮复制到tr

<script type="text/javascript">
    $('#<%= gvQuickPhrases.ClientID %> a').each(function () {
        $(this).closest('tr').attr('onclick', $(this).prop('href'));
    });
</script>

用jQuery选择asp：GridView行

1 个答案: