asp.net gridview 根据下拉列表选择每条记录显示一或两行

Question

我有一个 asp.net gridview，它为每条记录显示两行，使用下面的代码（示例）。

但是使用页面顶部的下拉列表，根据其选择（1 或 2），我希望 gridview 通过以下方式自行更新：

选项 1 = 每条记录显示两行。

选项 2 = 每条记录仅显示一行（下面代码中显示的第二个表格行我不希望在选择选项 2 时显示它。

更新： 选择下拉列表选项并使其工作很好，我在那里没有问题，但我需要知道如何操作 gridview 以每条记录显示一两行。所以基本上我如何（使用代码）将gridview的格式从1行更改为2行。 显然可以选择使用两个网格视图并根据您的选择显示所需的一个，但我更喜欢只使用一个网格视图（如果可能的话）。

 <HeaderTemplate>
           <asp:LinkButton ID="lbPN" runat="server" Text="Project Name" style "color:white;" CommandName="Sort" CommandArgument="PN"  tabindex="1000" ></asp:LinkButton><br />
           <asp:TextBox runat="server" ID="S_PN" CssClass="FilterField" ></asp:TextBox>
  </HeaderTemplate>
  <ItemTemplate>
           <table  >
              <tr>
                 <td class="STD_normal" style="width:150px; font-weight:bold"><%#Eval("PN")%>
                    </td>                                                    
              </tr>
              <tr>
                 <td class="STD_Normal_Grey" style="width:150px"><%#Eval("DD", "{0:dd-MMM-yyyy}")%> </td>
              </tr>
          </table>                                              
       </ItemTemplate>                                                              
      <HeaderStyle HorizontalAlign="Left"/>
      </asp:TemplateField>

Answer 1

有基于我的一个数据库的代码，只需更改参数（这是服务器端示例，其他人在此处提供客户端示例）：

aspx：

<asp:DropDownList runat="server" ID="ddlChoice" AutoPostBack="true">
       <asp:ListItem Text="One row"></asp:ListItem>
       <asp:ListItem Text="Two rows"></asp:ListItem>
      </asp:DropDownList>
      <br /><br />
      <asp:GridView runat="server" ID="grdInfo" DataSourceID="sqlInfo">
       <Columns>
        <asp:TemplateField>
         <HeaderTemplate>
           <asp:LinkButton ID="lbPN" runat="server" Text="Project Name" style="color:white;" CommandName="Sort" CommandArgument="PN"  tabindex="1000" ></asp:LinkButton><br />
           <asp:TextBox runat="server" ID="S_PN" CssClass="FilterField" ></asp:TextBox>
         </HeaderTemplate>
         <ItemTemplate>
          <table>
           <tr><td runat="server" id="tdFirst" class="STD_normal" style="width:150px; display:block; font-weight:bold"><%# Eval("PNaziv")%></td></tr>
           <tr><td runat="server" id="tdSecond" class="STD_Normal_Grey" style="width:150px; display:none;"><%#Eval("PMesto")%></td></tr>
          </table>
         </ItemTemplate>
        </asp:TemplateField>
       </Columns>
      </asp:GridView>
      <asp:SqlDataSource ID="sqlInfo" runat="server" ConnectionString="<%$ ConnectionStrings:MDFConnection %>" SelectCommand="SELECT PNaziv,PMesto FROM Partneri ORDER BY PNaziv;" ></asp:SqlDataSource>

背后的代码（vb.net）

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    End Sub

    Private Sub ddlChoice_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles ddlChoice.SelectedIndexChanged
        grdInfo.DataBind()
    End Sub

    Private Sub grdInfo_RowCreated(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles grdInfo.RowCreated
        If e.Row.RowType = DataControlRowType.DataRow Then
            Dim td As HtmlTableCell = e.Row.Cells(0).FindControl("tdSecond")
            If ddlChoice.SelectedIndex = 0 Then td.Style("display") = "none" Else td.Style("display") = "block"
        End If
    End Sub

就像我在评论中写的那样，我设置为每个 td id 和 runat="server"。下拉列表必须有AutoPostBack="true"。

现在，在每个SelectedIndexChanged 上必须绑定您的网格并在每个创建的行上找到HtmlTableCell，现在，控制（它是td）并根据选定的索引显示或隐藏第二个td。但是，在每个td 的style 下，我将display:block/none; 依赖于行。

当您启动 webapp 时，只有一行可见，之后，取决于下拉列表的选择。

在此示例中，表位于第一列 (Dim td As HtmlTableCell = e.Row.Cells(0).FindControl("tdSecond"))...您必须更改 .e.Row.Cells(x)...;其中 x 是您的列索引。

更新：您没有定义 prog.language，所以下面的代码在 c# 中（使用在线转换工具从 vb.net 转换，抱歉我在 vb.net 中编程）

private void ddlChoice_SelectedIndexChanged(object sender, System.EventArgs e)
{
    grdInfo.DataBind();
}

private void grdInfo_RowCreated(object sender, System.Web.UI.WebControls.GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow) {
        HtmlTableCell td = e.Row.Cells[0].FindControl("tdSecond");
        if (ddlChoice.SelectedIndex == 0)
            td.Style("display") = "none";
        else
            td.Style("display") = "block";
    }
}

Answer 2

客户端

一种方法是使用 JavaScript 或 jQuery 显示/隐藏第二行。为此，我建议用<div>'s 替换表并将类添加到div 标签而不是td 标签，或者拆分表，如服务器端示例所示。

这是一个 jQuery 示例：

$("#ddl").change(function() {
    if($('#ddl option:selected').val() == 1) {
        $('STD_Normal_Grey').show();
    } else {
        $('STD_Normal_Grey').hide();
    }
}

服务器端

这是另一个显示服务器端选项的示例，以及如何拆分表格以更轻松地控制显示：

<table>
    <tr>
        <td class="STD_normal" style="width:150px; font-weight:bold">  
            <%#Eval("PN")%>
        </td>                                                    
     </tr>
 </table>
 <table style="display:<%# DdlVal == "1" ? "inline-block" : "none" %>;">
     <tr>
         <td class="STD_Normal_Grey" style="width:150px">
             <%#Eval("DD", "{0:dd-MMM-yyyy}")%>
         </td>
     </tr>
 </table> 

然后，在你的代码后面：

protected string DdlVal
{
    get { return ddl.SelectedValue; }
}

这将需要 DropDownList 回发，而客户端解决方案不需要，从而使客户端解决方案更快。

Answer 3

通过下拉列表，您可以使用 OnSelectedIndexChanged 函数。像这样：

<asp:DropDownList runat="server" ID="ddlDemo" on SelectedIndexChanged="ddlDemo_SelectedIndexChanged">
<asp:ListItem Value="1">one</asp:ListItem><asp:ListItem Value="2">tow</asp:ListItem>
    </asp:DropDownList>

在代码中你可以使用它：

    Protected Sub ddlDemo_SelectedIndexChanged(sender As Object, e As EventArgs)

        Dim selectedValue As Integer = ddlDemo.SelectedValue

        If ddlDemo.SelectedValue = 1 Then

            ' do something

        End If


    End Sub