如何增强GridView中的向下搜索功能

本文关键字：搜索 功能 GridView 何增强 增强 | 更新日期: 2023-09-27 18:19:28

我是一名新的ASP.NET开发人员，正在尝试开发一个具有向下搜索功能的GridView。我正在代码项目中遵循以下帖子中的步骤，但我失败了，我不知道如何修复它。

就我而言，我有两张表：

课程表：CourseID、CourseName、GroupID

组表：GroupID GroupName

（每个表中的第一个属性是主键）

我想在GridView中显示第二个表，当用户单击搜索图标图像时，将显示第一个表中的信息。那么如何做到这一点呢？

我的ASP.NET：

<div align="center">

                <asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False" 
                    DataKeyNames="CourseID" DataSourceID="SqlDataSource1">
                    <Columns>
                        <asp:TemplateField HeaderText="Item Details">
                            <ItemTemplate>
                                <table>
                                    <tr>
                                        <td>
                                            <img src="images/system-search-md.png" alt="click here to see details" 
                                                 onclick='ToggleDisplay(<%# Eval("GroupID") %>);' style="cursor:pointer; height:15px; width:15px" />
                                        </td>
                                        <td<>
                                            <p><%# Eval("CourseID") %></p>
                                        </td>
                                        <td>
                                            <a href="Group.aspx?id=<%# Eval("CourseID") %>"><%# Eval("CourseName") %> </a>
                                        </td>
                                        <td>
                                            <%# Eval("CourseName") %>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="4">
                                            <div id'coldiv<%# Eval("GroupID") %>' style="display:none;">
                                                <asp:Literal runnat="server" ID="ltrl" Text='<%# Eval("GroupName") %>'></asp:Literal>
                                            </div>
                                        </td>
                                    </tr>
                                </table>
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                </asp:GridView>
                <script language="JavaScript">
                    function ToggleDisplay(id) {
                        var elem = document.getElementById('coldiv' + id);
                        if (elem) {
                            if (elem.style.display != 'block') {
                                elem.style.display = 'block';
                                elem.style.visibility = 'visible';
                            }
                            else {
                                elem.style.display = 'none';
                                elem.style.visibility = 'hidden';
                            }
                        }
                    }
</script>
                <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
                    ConnectionString="<%$ ConnectionStrings:testConnectionString %>" 
                    SelectCommand="SELECT     dbo.groups.*, dbo.courses.*
                                    FROM         dbo.courses INNER JOIN
                                    dbo.groups ON dbo.courses.GroupID = dbo.groups.ID"></asp:SqlDataSource>
            </div>

如何增强GridView中的向下搜索功能

您的方法似乎是合理的。我会确保你的ToggleDisplay功能正常工作，你还需要修复你的标记错误：

<td<> = <td>
<div id'coldiv<%# Eval("GroupID") %>' = <div id='coldiv<%# Eval("GroupID") %>'
<asp:Literal runnat="server" =  <asp:Literal runat="server"
相关文章：