0

我在网上到处寻找我认为会存在的东西，但我找不到它......

我想使用标准的 javascript / JSON / JQuery 类型技术在网页上创建以下内容：

在此处输入图像描述

注意：3 个细节级别，而不仅仅是 2 个

我正在寻找一个可以让我这样做的网格控件-（它不需要管理总计/总计）

任何帮助或指向资源的指针表示赞赏。

4

2 回答 2

1

您可以为此使用 jquery 树表（http://ludo.cubicphuse.nl/jquery-treetable/）

于 2017-07-11T19:17:42.963 回答
0

尝试这个：

.aspx 代码

<asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false" CssClass="Grid"
DataKeyNames="CustomerID">
<Columns>
    <asp:TemplateField>
        <ItemTemplate>
            <asp:ImageButton ID="imgOrdersShow" runat="server" OnClick="Show_Hide_OrdersGrid" ImageUrl="~/images/plus.png"
                CommandArgument="Show" />
            <asp:Panel ID="pnlOrders" runat="server" Visible="false" Style="position: relative">
                <asp:GridView ID="gvOrders" runat="server" AutoGenerateColumns="false" PageSize="5"
                    AllowPaging="true" OnPageIndexChanging="OnOrdersGrid_PageIndexChanging" CssClass="ChildGrid"
                    DataKeyNames="OrderId">
                    <Columns>
                        <asp:TemplateField>
                            <ItemTemplate>
                                <asp:ImageButton ID="imgProductsShow" runat="server" OnClick="Show_Hide_ProductsGrid" ImageUrl="~/images/plus.png"
                                    CommandArgument="Show" />
                                <asp:Panel ID="pnlProducts" runat="server" Visible="false" Style="position: relative">
                                    <asp:GridView ID="gvProducts" runat="server" AutoGenerateColumns="false" PageSize="2"
                                        AllowPaging="true" OnPageIndexChanging="OnProductsGrid_PageIndexChanging" CssClass="Nested_ChildGrid">
                                        <Columns>
                                            <asp:BoundField ItemStyle-Width="150px" DataField="ProductId" HeaderText="Product Id" />
                                            <asp:BoundField ItemStyle-Width="150px" DataField="ProductName" HeaderText="Product Name" />
                                        </Columns>
                                    </asp:GridView>
                                </asp:Panel>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:BoundField ItemStyle-Width="150px" DataField="OrderId" HeaderText="Order Id" />
                        <asp:BoundField ItemStyle-Width="150px" DataField="OrderDate" HeaderText="Date" />
                    </Columns>
                </asp:GridView>
            </asp:Panel>
        </ItemTemplate>
    </asp:TemplateField>
    <asp:BoundField ItemStyle-Width="150px" DataField="ContactName" HeaderText="Contact Name" />
    <asp:BoundField ItemStyle-Width="150px" DataField="City" HeaderText="City" />
</Columns>

.cs 代码：1 级

protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
    gvCustomers.DataSource = GetData("select top 10 * from Customers");
    gvCustomers.DataBind();
}
}

private static DataTable GetData(string query)
{
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
    using (SqlCommand cmd = new SqlCommand())
    {
        cmd.CommandText = query;
        using (SqlDataAdapter sda = new SqlDataAdapter())
        {
            cmd.Connection = con;
            sda.SelectCommand = cmd;
            using (DataSet ds = new DataSet())
            {
                DataTable dt = new DataTable();
                sda.Fill(dt);
                return dt;
            }
        }
    }
}
}

.cs 代码：2 级

protected void Show_Hide_OrdersGrid(object sender, EventArgs e)
{
ImageButton imgShowHide = (sender as ImageButton);
GridViewRow row = (imgShowHide.NamingContainer as GridViewRow);
if (imgShowHide.CommandArgument == "Show")
{
    row.FindControl("pnlOrders").Visible = true;
    imgShowHide.CommandArgument = "Hide";
    imgShowHide.ImageUrl = "~/images/minus.png";
    string customerId = gvCustomers.DataKeys[row.RowIndex].Value.ToString();
    GridView gvOrders = row.FindControl("gvOrders") as GridView;
    BindOrders(customerId, gvOrders);
}
else
{
    row.FindControl("pnlOrders").Visible = false;
    imgShowHide.CommandArgument = "Show";
    imgShowHide.ImageUrl = "~/images/plus.png";
}
}

private void BindOrders(string customerId, GridView gvOrders)
{
gvOrders.ToolTip = customerId;
gvOrders.DataSource = GetData(string.Format("select * from Orders where CustomerId='{0}'", customerId));
gvOrders.DataBind();
}

protected void OnOrdersGrid_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
GridView gvOrders = (sender as GridView);
gvOrders.PageIndex = e.NewPageIndex;
BindOrders(gvOrders.ToolTip, gvOrders);
}

.cs 代码：3 级

protected void Show_Hide_ProductsGrid(object sender, EventArgs e)
{
ImageButton imgShowHide = (sender as ImageButton);
GridViewRow row = (imgShowHide.NamingContainer as GridViewRow);
if (imgShowHide.CommandArgument == "Show")
{
    row.FindControl("pnlProducts").Visible = true;
    imgShowHide.CommandArgument = "Hide";
    imgShowHide.ImageUrl = "~/images/minus.png";
    int orderId = Convert.ToInt32( (row.NamingContainer as GridView).DataKeys[row.RowIndex].Value);
    GridView gvProducts = row.FindControl("gvProducts") as GridView;
    BindProducts(orderId, gvProducts);
}
else
{
    row.FindControl("pnlProducts").Visible = false;
    imgShowHide.CommandArgument = "Show";
    imgShowHide.ImageUrl = "~/images/plus.png";
}
}

private void BindProducts(int orderId, GridView gvProducts)
{
gvProducts.ToolTip = orderId.ToString();
gvProducts.DataSource = GetData(string.Format("SELECT ProductId, ProductName FROM Products WHERE ProductId IN (SELECT ProductId FROM [Order Details] WHERE OrderId = '{0}')", orderId));
gvProducts.DataBind();
}

protected void OnProductsGrid_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
GridView gvProducts = (sender as GridView);
gvProducts.PageIndex = e.NewPageIndex;
BindProducts(int.Parse(gvProducts.ToolTip), gvProducts);
}

使用 jQuery 的脚本：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
    $("[id*=imgOrdersShow]").each(function () {
        if ($(this)[0].src.indexOf("minus") != -1) {
            $(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>");
            $(this).next().remove();
        }
    });
    $("[id*=imgProductsShow]").each(function () {
        if ($(this)[0].src.indexOf("minus") != -1) {
            $(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>");
            $(this).next().remove();
        }
    });
});
</script>

CSS 样式：

<style type="text/css">
.Grid td
{
    background-color: #A1DCF2;
    color: black;
    font-size: 10pt;
    line-height: 200%;
}
.Grid th
{
    background-color: #3AC0F2;
    color: White;
    font-size: 10pt;
    line-height: 200%;
}
.ChildGrid td
{
    background-color: #eee !important;
    color: black;
    font-size: 10pt;
    line-height: 200%;
}
.ChildGrid th
{
    background-color: #6C6C6C !important;
    color: White;
    font-size: 10pt;
    line-height: 200%;
}
.Nested_ChildGrid td
{
    background-color: #fff !important;
    color: black;
    font-size: 10pt;
    line-height: 200%;
}
.Nested_ChildGrid th
{
    background-color: #2B579A !important;
    color: White;
    font-size: 10pt;
    line-height: 200%;
}
</style>

链接1： https ://www.aspsnippets.com/Articles/Multilevel-N-Level-Nested-GridView-GridView-inside-GridView-in-ASPNet-with-Paging.aspx

链接 2： http ://www.aspforums.net/Threads/194011/Mulitlevel-nested-GridView-with-expand-and-collapse-using-jQuery-in-ASPNet/

于 2017-07-12T04:26:35.990 回答