BootstrapTreeView使用教程三:制作树形下拉框|江阴雨辰互联

2023年6月22日发(作者：)

BootstrapTreeView使⽤教程三：制作树形下拉框前两篇博客介绍了Bootstrap TreeView的使⽤⽅法，这篇博客就来介绍⼀下如何利⽤Bootstrap TreeView制作⼀个树形下拉框，先来看⼀下效果：其实原理很简单，先创建⼀个⽂本框，然后在⽂本框下⽅创建树，让其不可见，当点击⽂本框时弹出树，选择节点后再隐藏即可。前端代码 Bootstrap TreeView

后台代码using System;using c;using ;using ;using ;namespace rs{ ///

/// GetTreeNodeHandler

的摘要说明 ///

public class GetTreeNodeHandler : IHttpHandler { public void ProcessRequest(HttpContext context) { tType = "text/plain"; List nodes = new List(); (new Node() { id = 1, text = "中国", pid = 0 }); (new Node() { id = 2, text = "浙江省", pid = 1 }); (new Node() { id = 3, text = "杭州市", pid = 2 }); (new Node() { id = 4, text = "湖州市", pid = 2 }); (new Node() { id = 5, text = "拱墅区", pid = 3 }); (new Node() { id = 6, text = "西湖区", pid = 3 }); (new Node() { id = 7, text = "滨江区", pid = 3 }); (new Node() { id = 8, text = "吴兴区", pid = 4 }); (new Node() { id = 9, text = "南浔区", pid = 4 }); (new Node() { id = 10, text = "长兴县", pid = 4 }); (new Node() { id = 11, text = "江苏省", pid = 1 }); (new Node() { id = 12, text = "南京市", pid = 11 }); (new Node() { id = 13, text = "苏州市", pid = 11 }); (new Node() { id = 14, text = "⿎楼区", pid = 12 }); (new Node() { id = 15, text = "栖霞区", pid = 12 }); (new Node() { id = 16, text = "⽞武区", pid = 12 }); (new Node() { id = 17, text = "⾦阊区", pid = 13 }); (new Node() { id = 18, text = "沧浪区", pid = 13 }); (new Node() { id = 19, text = "平江区", pid = 13 }); List list = CreateTreeNodes(nodes); (izeObject(list).Replace("[]", "null")); } public bool IsReusable { get { return false; } } //

⽣成树 private List CreateTreeNodes(List nodes) { List root = l(node => == 0); return SortNodes(nodes, root); } //

递归分组 private List SortNodes(List nodes, List root) { for (int i = 0; i < ; i++) { List children = l(node => == root[i].id); SortNodes(nodes, children); root[i].nodes = children; } return root; } } public class Node { ///

///

编号 ///

public int id { get; set; } ///

///

上⼀级编号 ///

public int pid { get; set; } ///

///

名称 ///

public string text { get; set; } ///

///

⼦节点 ///

public List nodes; }}