嵌套网格视图显示加号/减号，仅当子网格有数据时才展开

本文关键字：网格 数据 显示 视图 嵌套 减号 | 更新日期: 2023-09-27 18:25:35

我使用这个经典脚本来显示加号/减号图标以展开子网格。因为上下文中并不是所有的行都有数据，所以我只想显示子网格中有数据的行的加号/减号。

这是我的脚本：

 <script type="text/javascript">
        $("[src*=plus]").live("click", function () {
            $(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>")
            $(this).attr("src", "images/minus.png");
        });
        $("[src*=minus]").live("click", function () {
            $(this).attr("src", "images/plus.png");
            $(this).closest("tr").next().remove();
        });
    </script>

我用来加载数据的方法是启动数据集"GetData（）"的OnRowDataBound。

if (e.Row.RowType == DataControlRowType.DataRow)
    {
        string code = zeroLevelGrid.DataKeys[e.Row.RowIndex].Value.ToString();
        GridView firstLevelGrid = e.Row.FindControl("firstLevelGrid") as GridView;
        firstLevelGrid.DataSource = GetData(string.Format("thestring...", code));
        firstLevelGrid.DataBind();
    }

更新这是它的html面：

<asp:GridView ID="zeroLevelGrid" runat="server" AutoGenerateColumns="false" CssClass="Grid"
            DataKeyNames="Code" OnRowDataBound="OnRowDataBoundZeroLevel">
            <Columns>
                <asp:BoundField ItemStyle-Width="35px" DataField="Id" HeaderText="Id" />
                <asp:BoundField ItemStyle-Width="50px" DataField="Code" HeaderText="Code" />
                <asp:BoundField ItemStyle-Width="150px" DataField="Description" HeaderText="Description" />
                <asp:BoundField ItemStyle-Width="50px" DataField="Quantity" HeaderText="Quantity" />
                <asp:TemplateField>
                    <ItemTemplate>
                        <img alt="" style="cursor: pointer" src="images/plus.png" />
                        <asp:Panel ID="firstLevelPanel" runat="server" Style="display: none">
                            <asp:GridView ID="firstLevelGrid" runat="server" AutoGenerateColumns="false" CssClass="ChildGrid" DataKeyNames="Code" OnRowDataBound="firstLevelGrid_OnRowDataBound">
                                <Columns>
                                    <asp:BoundField ItemStyle-Width="35px" DataField="Id" HeaderText="Id" />
                                    <asp:BoundField ItemStyle-Width="50px" DataField="Code" HeaderText="Code" />
                                    <asp:BoundField ItemStyle-Width="150px" DataField="Description" HeaderText="Description" />
                                    <asp:BoundField ItemStyle-Width="50px" DataField="Quantity" HeaderText="Quantity" />
                                    <asp:TemplateField>
                                        <ItemTemplate>
                                          ...................

如何实现只显示具有子网格的行的pus/minus？

嵌套网格视图显示加号/减号，仅当子网格有数据时才展开

您可以将其隐藏在绑定内部网格的位置
将网格图像设为runat=server，并在绑定内部网格视图的位置检查查询中的行数（如果为零）。

 var dataSource=GetData(string.Format("thestring...", code));
 //check number of rows here using count
 var count=dataSource.Count();
 if(count>0)
 {
     firstLevelGrid.DataSource = GetData(string.Format("thestring...", code));
     firstLevelGrid.DataBind();
 }
 else
 {
    //find you image and hide it
     var element = e.Row.FindControl("imageid");
    //hide it
 }

编辑1

使图像runat='server'

  <img alt="" style="cursor: pointer" src="images/plus.png" runat="server" id="img_expand" />

在后面的代码中

Image img=(Image)e.Row.FindControl("img_expand");
img.visisbility=fasle;
相关文章：