gridview点击后如何知道点击了哪个单元格

Question

我有一个 PROJECT_EFFORT 表。

ProjectId, Year, Month, Effort

1, 2022, 12, 10

2, 2022, 12, 20

2, 2023, 1, 100

2, 2023, 2, 50

2, 2023, 3, 30

3, 2023, 3, 40

3, 2023, 4, 10

3, 2023, 5, 120

4, 2024, 1, 50

...

在网络表单中，有 4 个下拉列表开始月份、开始年份、结束月份、结束年份。

选择开始和结束 - 月份和年份后，我创建数据表并将其显示在网格视图（自动生成的列）上。

例如；

-----------------

Start month: 1 

Start year: 2023

End month: 3

End year: 2023


2023.01, 2023.02, 2023.03       

100, 50, 70     

代码隐藏如下；

（其实代码里的逻辑有点复杂，我正在简化。 列名称不会按如下方式添加硬编码，而是根据所选值使用循环创建。）

...

DataTable dtProjectEffort = new DataTable();

dtProjectEffort.Columns.Add("2023.01");

dtProjectEffort.Columns.Add("2023.02");

dtProjectEffort.Columns.Add("2023.03");

...

//some codes for set values 

...

dtProjectEffort.AcceptChanges();

gvList.DataSource = dtProjectEffort;

gvList.DataBind();

到目前为止我没有任何问题。

如何在 gridview 中单击某个值时显示详细信息。

例如点击70后（2023.03下）我想显示；

Project, Effort

2, 30

3, 40

我需要知道单击了哪个单元格并获取其年份和月份值。

Answer 1

您没有提及 GridView 是否具有自动生成的列，或者列是固定的还是模板化的。

上述细节很有帮助，因为如果列是固定的或临时的，那么您可以简单地向每个控件添加单击事件。

但是，我们假设列是自动分类的，并且我们不知道显示的列数。

所以，这里有很多选择。最简单的就是“处理”item数据绑定事件上的一行，并添加一个获取点击的行和列的点击事件。

从单击的行/列中，我们可以获取/抓取 GridView 行，然后是列值（单元格集合），这样我们就有了可以做任何我们想做的事情的信息。

所以，说出这个简单的标记：

        <asp:GridView ID="GridView1" runat="server"
            CssClass="table table-hover"
            width="40%" OnRowDataBound="GridView1_RowDataBound"  >
        </asp:GridView>

        <asp:HiddenField ID="MyClickValue" runat="server" ClientIDMode="Static" />
        <asp:Button ID="cmdGridClick" runat="server" Text="GridClick"
            OnClick="cmdGridClick_Click" Style="display:none" />
        <script>
            function myclick(sV) {
                $('#MyClickValue').val(sV)
                $('#cmdGridClick').click()
            }
        </script>

注意我如何添加一个隐藏字段（用于保存 x,y 单击值）和一个小的 JavaScript 例程。这允许我们在 GridView 的客户端单击事件运行后运行服务器端单击事件。

我们的服务器端代码是这样的：

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
            LoadGrid();
    }

    void LoadGrid()
    {
        string strSQL =
            @"SELECT FirstName, LastName, City, HotelName, Description
            FROM tblHotelsA
            ORDER BY HotelName";

        GridView1.DataSource = General.MyRst(strSQL);
        GridView1.DataBind();   

    }

    protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow) 
        {
            int RowIX = e.Row.RowIndex;
            int i = 0;
            foreach(TableCell OneCell in e.Row.Cells)
            {
                OneCell.Attributes.Add("OnClick", $"myclick('{RowIX},{i}')");
                i++;
            }
        }
    }

    protected void cmdGridClick_Click(object sender, EventArgs e)
    {
        Debug.Print("Row x, y click = " + MyClickValue.Value);
        string[] xy = MyClickValue.Value.Split(',');            // get actual cell value
        int rowIX = Convert.ToInt32(xy[0]);
        int colIX = Convert.ToInt32(xy[1]);
        GridViewRow gRow = GridView1.Rows[rowIX];
        string MyCellValue = gRow.Cells[colIX].Text;
        Debug.Print("Grid x,y click value = " + MyCellValue);
        Label1.Text = "Value of cell click = " + MyCellValue;
    }
}

因此结果是这样的：

所以，你可以通过上面的网格得到x,y值。

请注意，您也可以将其转换为“自定义”标题，该标题看起来代表网格的 y 轴值。 GridView 标题值可以通过列值拉取：

             GridView1.HeaderRow.Cells[colIX].Text;