Question

我正在尝试使用C＃在.NET中生成动态嵌套的CheckBoxList。

我想显示每个部门和地区旁边的复选框。选中某个部门的复选框后，该部门应在其下方显示该部门的区域（缩进），并在其旁边显示复选框。

我能够动态生成带有复选框的部门，但是我不确定如何去做这些领域。问题的一部分是我没有每个部门的个人ID，它只是一个列表。

<div class="TABLE">
    <div class="ROW">
        <div class="CELL CELL50">
            <asp:CheckBoxList id="cblDepts" runat="server" OnSelectedIndexChange="cblDepts_OnSelectedIndexChange"></asp:CheckBoxList>
        </div>
        <div class="CELL CELL50">
            <asp:CheckBoxList id="cblAreas" runat="server" Visible="false"> 
         </asp:CheckBoxList>
        </div>
    </div>
</div>

protected void LoadFilters()
    {
        _datalayer = new DataLayer();
        deptAreas = new Dictionary<string, Tuple<string, string>>();
        Dictionary<string, string> depts = new Dictionary<string, string>();
        DataSet dsDepts = _datalayer.GetDepartments();

        if(dsDepts != null && dsDepts.Tables[0].Rows.Count > 0)
        {
            foreach (DataRow dr in dsDepts.Tables[0].Rows)
            {
                depts.Add(dr["DepartmentId"].ToString(), dr["DepartmentDetails"].ToString());
            }
        }

        this.cblDepts.Items.Clear();
        this.cblAreas.Items.Clear();

        foreach(var dept in depts)
        {
            this.cblDepts.Items.Add(new ListItem(dept.Value, dept.Key));
            DataSet dsAreas = _datalayer.GetAreas(dept.Key.ToChange<int>().Value);

            if(dsAreas != null && dsAreas.Tables[0].Rows.Count > 0)
            {
                foreach (DataRow dr in dsAreas.Tables[0].Rows)
                {
                    deptAreas.Add(dept.Key, Tuple.Create(dr["AreaId"].ToString(), dr["AreaDetails"].ToString()));
                }
            }

        }

    }

结果应该是，当您单击部门旁边的复选框时，该部门的区域显示在该部门的下方，以缩进方式显示，每个区域旁边都有一个复选框。

Answer 1

不在Visual Studio中编写所有代码真的很难。所以在这里，我至少会帮助您入门。据我了解，每个部门都有一个清单，您应该创建一个可以说明这一点的类。例如这样。

// Set the DrawMode property to the OwnerDrawVariable value. 
// This means the MeasureItem and DrawItem events must be 
// handled.
ListBox1.DrawMode = DrawMode.OwnerDrawVariable;
ListBox1.MeasureItem += new MeasureItemEventHandler(ListBox1_MeasureItem);

有了列表后，现在应该开始创建复选框。

，因此您现在可以public class Area() public int AreaId {get; set; } public string AreaDetails { get; set; } } public class Departments (){ public int DepartmentId { get; set; } public string DepartmentDetails { get; set; } public List<Area> Areas { get; set; } // all area that are included in the current depertment }检索所需的资产ID。接下来，您将在列表中找到选定的部门，然后创建复选框以及div部门和OnSelectedIndexChange。

您知道如何创建复选框列表，但是如果您需要更多信息，请使用以下网址。 How to create dynamic checkbox in asp.net

希望对您有所帮助。

Answer 2

一个超级简单的例子如下：

<div class="TABLE">
        <div class="ROW">
            <div class="CELL CELL50">
                <asp:CheckBoxList ID="cblDepts" runat="server" OnSelectedIndexChanged="cblDepts_SelectedIndexChanged" AutoPostBack="True"></asp:CheckBoxList>
            </div>
            <div class="CELL CELL50">
                <asp:CheckBoxList ID="cblAreas" runat="server" Visible="false">
                </asp:CheckBoxList>
            </div>
        </div>
    </div>

public partial class _Default : Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!this.IsPostBack)
            {
                this.cblDepts.Items.Add(new ListItem() { Text = "1", Value = "1" });
                this.cblDepts.Items.Add(new ListItem() { Text = "2", Value = "2" });
                this.cblDepts.Items.Add(new ListItem() { Text = "3", Value = "3" });
            }
        }

        protected void cblDepts_SelectedIndexChanged(object sender, EventArgs e)
        {
            this.cblAreas.Items.Clear();
            foreach (ListItem item in this.cblDepts.Items) {
                var selectedValue = "-1";
                if (item.Selected)
                {
                    selectedValue = item.Value;
                }

                if (selectedValue == "1")
                {
                    this.cblAreas.Items.Add(new ListItem() { Text = "1.1", Value = "1.1" });
                }
                else if (selectedValue == "2")
                {
                    this.cblAreas.Items.Add(new ListItem() { Text = "2.2", Value = "2.2" });
                }
                else if (selectedValue == "3")
                {
                    this.cblAreas.Items.Add(new ListItem() { Text = "3.3", Value = "3.3" });
                }
            }

            if (this.cblAreas.Items == null || this.cblAreas.Items.Count == 0)
            {
                this.cblAreas.Visible = false;
            }
            else
            {
                this.cblAreas.Visible = true;
            }

        }
    }

上面的示例是虚拟的，仅用于演示，它绝不是用于生产的适当代码，但是您可以理解！ <3

Answer 3

如果您不喜欢使用javascript，则可以执行以下操作：

<asp:Repeater ID="DepartmentsRepeater" runat="server">
        <ItemTemplate>
            <input class="departments" onclick="show(this)" type="checkbox" value="<%# Container.DataItem?.ToString() %>" /><%# Container.DataItem?.ToString() %> </br>
            <asp:Repeater ID="AreasRepeater" runat="server" DataSource='<%# GetAreasOfDepartment(Container.DataItem?.ToString()) %>'>
                <ItemTemplate>
                    <div class="areas <%#((RepeaterItem)Container.Parent.Parent).DataItem?.ToString() %>">
                        <input type="checkbox" value="<%# Container.DataItem?.ToString() %>" /><%# Container.DataItem?.ToString() %> </br>
                    </div>
                </ItemTemplate>
            </asp:Repeater>
        </ItemTemplate>
    </asp:Repeater>

    <script>
        $(".areas").hide();

        function show(e) {
            $(".areas").hide();
            $(".departments").each(function (d) {
                if (this.checked) {
                    var c = "." + this.value;
                    $(c).show();
                }
            })
        }
    </script>


public partial class _Default : Page
    {
        public List<string> Departments = new List<string> { "HR", "Finance" };
        public Dictionary<string, List<string>> Areas = new Dictionary<string, List<string>>
        {
            {"HR", new List<string>{"HR1","HR2"} },
            {"Finance", new List<string>{ "Finance1", "Finance2" } }
        };
        protected void Page_Load(object sender, EventArgs e)
        {
            this.DepartmentsRepeater.DataSource = Departments;
            this.DepartmentsRepeater.DataBind();
        }

        public List<string> GetAreasOfDepartment(string dep)
        {
            return Areas[dep];
        }
    }

如前所述，该代码仅用于演示，并未针对生产用途进行优化<3

如何在.NET中生成动态嵌套的CheckBoxLists

3 个答案: