如何在 Asp.net 中将 rowheadercolumn（左侧箭头）添加到 Gridview？答案

【问题标题】：How to add rowheadercolumn (arrow on left) to Gridview In Asp.net?如何在 Asp.net 中将 rowheadercolumn（左侧箭头）添加到 Gridview？
【发布时间】：2014-04-13 21:55:15
【问题描述】：

我正在为 Visual Studio 2010 中的 asp.net webforms 应用程序使用 gridview 控件。我需要在左侧添加带有小箭头“>”的列，以选择一行。这是一张图片：

http://www.codeproject.com/KB/grid/Paging_DataGridView/PagingDataGridView_scr.jpg

我到处找了，都找不到。我已经看到使用 datagridview 控件对此的帮助，但该控件仅适用于 winforms 而不适用于 webforms。我有一个使用数据网格而不是网格视图的另一个程序的副本，它有这个“左侧的箭头来选择行功能”，但我找不到如何打开或关闭它。

我也应该使用数据网格或网格视图。我的印象是网格视图更现代，应该尽可能使用。

谢谢！

【问题讨论】：

设置DataGridView.RowHeadersVisible = true;
为选定行显示箭头在 Web 应用程序中并不常见虽然在 Win From 中很常见。如果您愿意，CheckBox 可能有点用户友好。
这不是 DataGridView 它是 GridView，没有 RowHeadersVisible 选项。谢谢！我想我必须接受提供的按钮。

标签： asp.net gridview datagridview datagrid

【解决方案1】：

我将在我的示例中使用Bootstrap 和 jQuery 3.1.1

但在此示例中，您将仅使用 font-awesome css
（我使用这个引导主题发现了这个 font-awesome

您可以更改 <i></i> 元素上的图标，将 'fa fa-chevron-right' 上的 'chevron-right' 更改为您选择的其他图标 '右箭头' 例如。查看 'font-awesome/less/icons.less' 文件以选择适合您的图标。

您可以在 VS 上使用 Pack Manage Concole 将 jQuery 添加到您的项目中：
Install-Package jQuery -ProjectName SubjectC

ASPX

<head>
    <link href="../font-awesome/css/font-awesome.min.css" rel="stylesheet" />
</head>
.
.
.
<asp:GridView
    ID="gvPerson" runat="server"
    DataSourceID="ObjectDataSource1"
    ItemType="MyObject"
    AutoGenerateColumns="false">
    <EditRowStyle CssClass="selectable-row" />
    <RowStyle CssClass="selectable-row" />
    <Columns>
        <asp:TemplateField HeaderText="">
            <ItemTemplate>
                <div style="width> 30px;">
                    <i></i>
                </div>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField HeaderText="RecordID" DataField="RecordID" SortExpression="RecordID" />
        <asp:BoundField HeaderText="Fname" DataField="NameFirst" SortExpression="NameFirst" />
        <asp:BoundField HeaderText="LName" DataField="LName" SortExpression="LName" />
    </Columns>
</asp:GridView>
.
.
.
<script>
    $(function () {
        $("tr.selectable-row").on("click", function (event) {
            $('tr > td > div > i.fa').removeClass('fa-chevron-right');
            $(this).children('td')
                .first().children('div')
                .first().children('i')
                .first().addClass('fa fa-chevron-right');
        });
    });
</script>

【讨论】：