在第一个选项卡中的某些 div 之后动态创建选项卡答案

【问题标题】：Create tab dynamically after some div in first tabs在第一个选项卡中的某些 div 之后动态创建选项卡
【发布时间】：2023-04-02 04:29:01
【问题描述】：

在第一个选项卡中显示 20 个 div 后动态创建选项卡。实际上我正在动态生成一个 div，可能会动态生成 100 个 div。我想在一个选项卡中显示 20 个 div，如果那里有 100 个 div，它将自动生成5 个标签，每个标签有 20 个 div。

<div id="TabbedPanels1" class="TabbedPanels">
  <ul class="TabbedPanelsTabGroup">
    <li class="TabbedPanelsTab" tabindex="0">tab1</li>
    <li class="TabbedPanelsTab" tabindex="0">tab2</li>

  </ul>
  <div class="TabbedPanelsContentGroup">

    <div class="TabbedPanelsContent">
        <div id="slider1" class="sliderwrapper">  
 <div class="contentdiv"> 
12345   
</div>
<div class="contentdiv"> 
12345   
</div>
</div>
<div id="paginate-slider1" class="pagination">   

</div>
<div id="paginate1-slider1" class="pagination2">

</div>   
    </div>

     </div>
     </div>

【问题讨论】：

显示到目前为止您尝试过的内容
实际上这里我没有显示动态生成的 div，第一个选项卡中只有 2 个 div。如果有 100 个 div（例如
12345
），那么我想在每个选项卡中显示 20 个 div，并且必须生成 5 个选项卡...
不清楚您要达到的目标！你想生成空的div吗？或者已经有 100 个 div 想要移动到不同的 tabs？

标签： c# javascript jquery asp.net jquery-ui

【解决方案1】：

在这里我创建了一个 jsFiddle，它根据 contentDivs 的数量动态生成选项卡：http://jsfiddle.net/Z6HN9/，它可以帮助您实现目标。

HTML 代码：

<div id="tabs">
    <ul id="tabLinks"></ul>
</div>

JavaScript 代码：

$(function () {

    var neededDivCount = 100; // number of contentDivs for test purposes
    var divPerTab = 20; // number of contentDivs / tabs for test purposes

    // create the conentDivs dynamically for test purposes

    for (var i = 1; i <= neededDivCount; i++) {
        $("body").append('<div class="contentDiv">div' + i + 'content</div>');
    }

    // create the tabs and tabLinks based on the number of contentDivs in the document

    var neededTabCount = Math.floor(($(".contentDiv").length - 1) / divPerTab) + 1;
    for (var i = 1; i <= neededTabCount; i++) {
        $("#tabs").append('<div id="tab' + i + '"></div>');
        $("#tabLinks").append('<li><a href="#tab' + i + '">tab' + i + '</a></li>');
    }

    // loop through the contentDivs and append them to the correct tab

    $(".contentDiv").each(function (index) {
        var appendToTabIndex = Math.floor(index / divPerTab) + 1;
        $(this).appendTo($("#tab" + appendToTabIndex));
    });

    $("#tabs").tabs();
});

【讨论】：

实际上我没有 100 个 div，它是动态生成的......这是我试图解释的一个例子............那里可能有 60 个 div必须是 3 个选项卡，每个选项卡中有 20 个 div...我如何使用 c# 动态显示 contentdiv 中的数据。
@AmitSambyal ：由于代码使用 jQuery 类选择器，它可以对找到的任意数量的类名称为“contentDiv”的 div 进行处理。我创建了 100 个 contentDivs 只是为了演示的目的，但是因为类选择器，创建这些 contentDivs 之后的代码可以用于任意数量的 contentDivs。

【解决方案2】：

您可以使用 2 个嵌套转发器。子节点是从数据表生成的，返回您的内容记录（内容 div），父节点是从匿名类型列表动态生成的。

ASPX

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="RP.aspx.cs" Inherits="RP" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Untitled Page</title>
    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" language="javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script type="text/javascript">
      $(function() {
        $( "#tabs" ).tabs();
      });
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div id="tabs">

        <%-- Tabs Links --%>
        <asp:Repeater ID="TablLinkRepeater" runat="server">
            <HeaderTemplate>
                <ul>
            </HeaderTemplate>
            <ItemTemplate>
                <li><a href="#Tab<%# Eval("TabIndex") %>">Tab
                    <%# Eval("TabIndex") %></a></li>
            </ItemTemplate>
            <FooterTemplate>
                </ul>
            </FooterTemplate>
        </asp:Repeater>

        <%-- Tabs and Content --%>
        <asp:Repeater ID="TabRepeater" runat="server">
            <ItemTemplate>
                <div id="Tab<%# Eval("TabIndex") %>">
                    <%-- Show TabIndex just for testing --%>
                    <h1>
                        Tab #
                        <%# Eval("TabIndex") %>
                    </h1>
                    <asp:Repeater ID="ContentRepeater" runat="server">
                        <ItemTemplate>
                            <div class="Content" id="ContentDiv" runat="server">
                                <%-- Some content--%>
                                <asp:Label ID="Name" runat="server" />
                            </div>
                        </ItemTemplate>
                    </asp:Repeater>
                </div>
            </ItemTemplate>
        </asp:Repeater>
    </div>
    </form>
</body>
</html>

using System;
using System.Collections.Generic;
using System.Data;
using System.Web;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;

public partial class RP : System.Web.UI.Page
{
    private const int ContentPerTab = 20;

    private DataTable SomeDatatable;

    protected void Page_Load(object sender, System.EventArgs e)
    {   

        if (!Page.IsPostBack)
        {
            //1) Load SomeDatatable from Database somehow
            // Just for testing : replace with query to DB
            SomeDatatable = new DataTable("x");
            SomeDatatable.Columns.Add(new DataColumn("ContentIndex", Type.GetType("System.Int32")));
            SomeDatatable.Columns.Add(new DataColumn("Name", Type.GetType("System.String")));
            for (int x = 1; x <= 50; x++)
            {
                SomeDatatable.Rows.Add(new object[] {
                x,
                "Content " + x
            });
            }
            ///////////////////

            //2) Create a dummy data source for the tab repeater using a list of anonymous types
            List<object> TabList = new List<object>();


            for (int I = 0; I < Math.Ceiling((decimal)SomeDatatable.Rows.Count / (decimal)ContentPerTab); I++)
            {
                TabList.Add(new { TabIndex = I });
            }

            TabRepeater.ItemDataBound += TabRepeater_ItemDataBound;
            TabRepeater.DataSource = TabList;
            TabRepeater.DataBind();

            TablLinkRepeater.DataSource = TabList;
            TablLinkRepeater.DataBind();
        }
    }



    protected void TabRepeater_ItemDataBound(object sender, System.Web.UI.WebControls.RepeaterItemEventArgs e)
    {
        if (e.Item.ItemType == ListItemType.Item | e.Item.ItemType == ListItemType.AlternatingItem)
        {
            int TabIndex = -1;
            int.TryParse(DataBinder.Eval(e.Item.DataItem, "TabIndex").ToString(), out TabIndex);

            //Copy Content Rows from SomeDatable that belong to this tab
            DataTable Dt = SomeDatatable.Clone();
            for (Int32 i = TabIndex * ContentPerTab; i <= (TabIndex + 1) * ContentPerTab - 1; i++)
            {
                if (i >= SomeDatatable.Rows.Count) break;

                Dt.ImportRow(SomeDatatable.Rows[i]);
            }

            // Find the content repeater in this item and use the new datatable as source
            Repeater ContentRepeater = (Repeater)e.Item.FindControl("ContentRepeater");

            ContentRepeater.ItemDataBound += ContentRepeater_ItemDataBound;

            ContentRepeater.DataSource = Dt;
            ContentRepeater.DataBind();
        }
    }

    //This handler might be needed for content repeater, included just for testing 
    protected void ContentRepeater_ItemDataBound(object sender, System.Web.UI.WebControls.RepeaterItemEventArgs e)
    {
        if (e.Item.ItemType == ListItemType.Item | e.Item.ItemType == ListItemType.AlternatingItem)
        {
            //Read coulmn from Datarow
            int ContentIndex = -1;
            int.TryParse(DataBinder.Eval(e.Item.DataItem, "ContentIndex").ToString(), out ContentIndex);

            // Find some label
            Label Name = (Label)e.Item.FindControl("Name");
            Name.Text = "Content #" + ContentIndex;
        }
    }
}

【讨论】：

如何将 data-info 属性添加到动态生成的单选按钮
我可以使用 2 个嵌套中继器创建一个应用程序，但我无法在加载时显示第一个问题....当我单击下一个或上一个按钮时它显示第一个问题
如果我的回答对您的问题有效，请将其标记为答案。如有其他问题，请发布带有示例代码的新问题，以便其他人看到您的问题并为您提供帮助。\