下面我将详细讲解“ASP.NET C#生成下拉列表树实现代码”的完整攻略。
1. 什么是下拉列表树？
下拉列表树，顾名思义就是下拉列表和树结构的结合体。通俗点说，就是在下拉列表的每一项展开后，可以看到类似树形结构的多级列表。下面是一个简单的下拉列表树的示例：
- 第一项
+ 子项 1
+ 子项 2
- 第二项
+ 子项 1
+ 子项 2
2. 实现下拉列表树
下面来讲讲如何实现 ASP.NET C# 生成下拉列表树的方法。
2.1. 数据源准备
首先需要准备一个数据源，这里我们以模拟数据为例，假设我们有一个类似这样的数据源：
List<Department> departments = new List<Department>()
{
new Department() { Id = 1, Name = "Department A", ParentId = 0 },
new Department() { Id = 2, Name = "Department B", ParentId = 0 },
new Department() { Id = 3, Name = "Department C", ParentId = 1 },
new Department() { Id = 4, Name = "Department D", ParentId = 1 },
new Department() { Id = 5, Name = "Department E", ParentId = 3 },
new Department() { Id = 6, Name = "Department F", ParentId = 4 },
};
其中 Department 是一个简单的模型类，其中包含部门的 Id、名称以及父部门的 Id。
2.2. 递归生成下拉列表树
接下来，可以通过递归的方式生成下拉列表树。下面是一个示例：
private void GenerateDropDownTree(int parentId, int level, List<Department> departments, StringBuilder sb)
{
// 找到所有父部门是 parentId 的部门
var items = departments.Where(x => x.ParentId == parentId);
// 遍历每一个子部门
foreach (var item in items)
{
// 添加 <option> 标签
sb.Append("<option value=\"");
sb.Append(item.Id);
sb.Append("\">");
// 根据层级添加前缀，比如 "----"、"--------" 等
for (int i = 0; i < level; i++)
{
sb.Append("-");
}
// 添加部门名称
sb.Append(item.Name);
sb.Append("</option>");
// 递归查找子部门和孙子部门
GenerateDropDownTree(item.Id, level + 1, departments, sb);
}
}
这个方法接收 4 个参数：
parentId：父部门的 Id；level：当前层级；departments：数据源；sb：用于保存生成的 HTML 代码的 StringBuilder。
递归的方式可以找到所有的子部门和孙子部门，并根据层级添加前缀。最终生成的 HTML 代码类似这样：
<select>
<option value="1">- Department A</option>
<option value="3">-- Department C</option>
<option value="5">--- Department E</option>
<option value="4">-- Department D</option>
<option value="6">--- Department F</option>
<option value="2">- Department B</option>
</select>
2.3. 调用方法并输出结果
最后，在 ASP.NET 页面中，可以调用上面的方法，生成下拉列表树，并将 HTML 代码输出到页面上。
这里以 ASP.NET Web Forms 为例，可以在 ASPX 页面上添加一个 DropDownList 控件，并在代码中动态生成下拉列表树，并将结果赋值给 DropDownList 的 Items 属性。代码如下：
protected void Page_Load(object sender, EventArgs e)
{
// 准备数据源
List<Department> departments = new List<Department>()
{
new Department() { Id = 1, Name = "Department A", ParentId = 0 },
new Department() { Id = 2, Name = "Department B", ParentId = 0 },
new Department() { Id = 3, Name = "Department C", ParentId = 1 },
new Department() { Id = 4, Name = "Department D", ParentId = 1 },
new Department() { Id = 5, Name = "Department E", ParentId = 3 },
new Department() { Id = 6, Name = "Department F", ParentId = 4 },
};
// 生成下拉列表树
StringBuilder sb = new StringBuilder();
GenerateDropDownTree(0, 0, departments, sb);
// 将结果设置为 DropDownList 的 Items 属性
ddlDepartments.Items.Clear();
ddlDepartments.Items.Add(new ListItem("请选择", "-1"));
ddlDepartments.AppendDataBoundItems = true;
ddlDepartments.DataSource = null;
ddlDepartments.DataBind();
ddlDepartments.Items.Add(new ListItem("全部", "0"));
ddlDepartments.Items.Add(new ListItem("一级部门", "1"));
ddlDepartments.Items.Add(new ListItem("二级部门", "2"));
ddlDepartments.Items.Add(new ListItem("其他", "3"));
ddlDepartments.Items.Add(new ListItem("--部门--", ""));
ddlDepartments.Items.Add(new ListItem(sb.ToString(), ""));
}
这个方法首先准备数据源，然后调用上面的递归方法生成下拉列表树，并将结果插入到 DropDownList 控件中。生成的下拉列表树会有一个 “请选择” 的项和一些固定的项，用于选择全部、一级部门、二级部门以及其他。最后输出生成的 HTML 代码，即可得到下拉列表树。
3. 示例说明
下面是两个简单的示例说明：
示例 1：使用 Ajax 获取数据源
在实际开发中，数据源可能并不是固定的，而是需要从服务端获取。这时候，可以使用 Ajax 技术获取数据源，然后再调用上面的生成下拉列表树的方法。
下面是一个简单的示例：
[WebMethod]
public static string GetData()
{
// 这里可以从数据库或其他地方获取数据
List<Department> departments = new List<Department>()
{
new Department() { Id = 1, Name = "Department A", ParentId = 0 },
new Department() { Id = 2, Name = "Department B", ParentId = 0 },
new Department() { Id = 3, Name = "Department C", ParentId = 1 },
new Department() { Id = 4, Name = "Department D", ParentId = 1 },
new Department() { Id = 5, Name = "Department E", ParentId = 3 },
new Department() { Id = 6, Name = "Department F", ParentId = 4 },
};
// 生成下拉列表树
StringBuilder sb = new StringBuilder();
GenerateDropDownTree(0, 0, departments, sb);
// 返回生成的 HTML 代码
return sb.ToString();
}
在 ASPX 页面上，可以使用 jQuery 中的 $.ajax() 方法获取数据源，并将结果插入到 DropDownList 控件中。代码如下：
$.ajax({
url: "Default.aspx/GetData",
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (result) {
if (result.d != "") {
$("#<%= ddlDepartments.ClientID %>").empty().append(result.d);
}
},
error: function () {
alert("获取数据源失败！");
}
});
示例 2：使用 Bootstrap 实现下拉列表树
使用 Bootstrap 可以让下拉列表树看起来更加美观和现代化。下面是一个简单的使用 Bootstrap 的下拉列表树的示例：
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="selected-item">请选择</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#" data-value="-1">请选择</a></li>
<li role="separator" class="divider"></li>
<li><a href="#" data-value="0">全部</a></li>
<li><a href="#" data-value="1">一级部门</a></li>
<li><a href="#" data-value="2">二级部门</a></li>
<li><a href="#" data-value="3">其他</a></li>
<li role="separator" class="divider"></li>
<li><a href="#" data-value="1" data-parent="0" data-name="Department A">Department A</a></li>
<li><a href="#" data-value="3" data-parent="1" data-name="Department C">-- Department C</a></li>
<li><a href="#" data-value="5" data-parent="3" data-name="Department E">---- Department E</a></li>
<li><a href="#" data-value="4" data-parent="1" data-name="Department D">-- Department D</a></li>
<li><a href="#" data-value="6" data-parent="4" data-name="Department F">---- Department F</a></li>
<li><a href="#" data-value="2" data-parent="0" data-name="Department B">Department B</a></li>
</ul>
<input type="hidden" id="selected-value" name="selected-value" value="" />
</div>
这个下拉列表树使用了 Bootstrap 的样式，并且是基于 <div> 和 <ul> 实现的。每一项都是一个 <li>，其中有一个 <a> 标签，用来显示部门的名称，另外还有一些自定义的属性，用来标记部门的 Id、父部门的 Id、部门名称等信息。
JavaScript 代码在用户选择下拉列表树中的某一项时，设置相应的值和文本。代码如下：
$(document).on("click", ".dropdown-menu li a", function () {
var selectedValue = $(this).data("value");
var selectedText = $(this).data("name");
if (selectedValue != null && selectedText != null) {
$(".selected-item").text(selectedText);
$("#selected-value").val(selectedValue);
}
});
当用户选择了某一项时，JavaScript 代码会根据自定义属性设置相应的值和文本。
4. 结语
以上就是 ASP.NET C# 生成下拉列表树的完整攻略，希望对你有所帮助。有关下拉列表树的更多用法和实现方式，还可以根据实际需求进行探索和尝试。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：ASP.NET C#生成下拉列表树实现代码 - Python技术站
微信扫一扫 
支付宝扫一扫 