Bootstrap TreeView使用教程三：制作树形下拉框

最新推荐文章于 2024-09-24 07:44:20 发布

HerryDong

最新推荐文章于 2024-09-24 07:44:20 发布

阅读量6.3k

点赞数 3

分类专栏： ASP.NET 文章标签： bootstrap treeview 树形下拉框

本文链接：https://blog.csdn.net/HerryDong/article/details/104648371

版权

ASP.NET 专栏收录该内容

16 篇文章 8 订阅

订阅专栏

前两篇博客介绍了Bootstrap TreeView的使用方法，这篇博客就来介绍一下如何利用Bootstrap TreeView制作一个树形下拉框，先来看一下效果：
在这里插入图片描述
其实原理很简单，先创建一个文本框，然后在文本框下方创建树，让其不可见，当点击文本框时弹出树，选择节点后再隐藏即可。

前端代码

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <title>Bootstrap TreeView</title>
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <link href="Content/bootstrap-treeview.min.css" rel="stylesheet" />
    <style>
        #tv {
            border: 1px solid #D6D6D6;
            display: none;
            margin-top: 5px;
            width: 300px;
            height: 400px;
            overflow-x: hidden;
            overflow-y: auto;
            position: absolute;
        }
    </style>
    <script src="Scripts/jquery-2.1.4.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
    <script src="Scripts/bootstrap-treeview.min.js"></script>
</head>
<body>

    <div style="margin-left:200px;margin-top:50px;">
        <input id="region" class="form-control" placeholder="请选择区域" style="width:200px;" />
        <div id="tv"></div>
    </div>

    <script>
        $(document).ready(function () {
            var nodeData = [];

            $.ajax({
                url: 'Handlers/GetTreeNodeHandler.ashx',
                type: 'post',
                dataType: 'json',
                async: false,
                success: function (data) {
                    nodeData = data;
                }
            })

            $('#tv').treeview({
                data: nodeData,                        // 节点数据
                levels: 1,                             // 节点层级数
                color: "#000",                         // 每一级通用的 节点字体颜色
                backColor: "#fff",                     // 每一级通用的 节点字背景色
                onhoverColor: "skyblue",               // 选中浮动颜色
                showBorder: false,                     // 不显示边框
                showTags: true,                        // 是否在每个节点的右侧显示标签。 其值必须在每个节点的数据结构中提供
                highlightSelected: true,               // 是否突出显示选定的节点
                selectedColor: "#fff",                 // 设置选定节点的前景色
                selectedBackColor: "skyblue",          // 设置选定节点的背景色
                onNodeSelected: function (event, data) {
                    $('#region').val(data.text);
                    $('#tv').hide();
                }
            })

            $('#region').click(function () {
                $('#tv').show();
            })
        })
    </script>

</body>
</html>

后台代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Newtonsoft.Json;

namespace WebApplication1.Handlers
{
    /// <summary>
    /// GetTreeNodeHandler 的摘要说明
    /// </summary>
    public class GetTreeNodeHandler : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";

            List<Node> nodes = new List<Node>();
            nodes.Add(new Node() { id = 1, text = "中国", pid = 0 });
            nodes.Add(new Node() { id = 2, text = "浙江省", pid = 1 });
            nodes.Add(new Node() { id = 3, text = "杭州市", pid = 2 });
            nodes.Add(new Node() { id = 4, text = "湖州市", pid = 2 });
            nodes.Add(new Node() { id = 5, text = "拱墅区", pid = 3 });
            nodes.Add(new Node() { id = 6, text = "西湖区", pid = 3 });
            nodes.Add(new Node() { id = 7, text = "滨江区", pid = 3 });
            nodes.Add(new Node() { id = 8, text = "吴兴区", pid = 4 });
            nodes.Add(new Node() { id = 9, text = "南浔区", pid = 4 });
            nodes.Add(new Node() { id = 10, text = "长兴县", pid = 4 });

            nodes.Add(new Node() { id = 11, text = "江苏省", pid = 1 });
            nodes.Add(new Node() { id = 12, text = "南京市", pid = 11 });
            nodes.Add(new Node() { id = 13, text = "苏州市", pid = 11 });
            nodes.Add(new Node() { id = 14, text = "鼓楼区", pid = 12 });
            nodes.Add(new Node() { id = 15, text = "栖霞区", pid = 12 });
            nodes.Add(new Node() { id = 16, text = "玄武区", pid = 12 });
            nodes.Add(new Node() { id = 17, text = "金阊区", pid = 13 });
            nodes.Add(new Node() { id = 18, text = "沧浪区", pid = 13 });
            nodes.Add(new Node() { id = 19, text = "平江区", pid = 13 });

            List<Node> list = CreateTreeNodes(nodes);
            context.Response.Write(JsonConvert.SerializeObject(list).Replace("[]", "null"));
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }

        // 生成树
        private List<Node> CreateTreeNodes(List<Node> nodes)
        {
            List<Node> root = nodes.FindAll(node => node.pid == 0);
            return SortNodes(nodes, root);
        }

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

    public class Node
    {
        /// <summary>
        /// 编号
        /// </summary>
        public int id { get; set; }

        /// <summary>
        /// 上一级编号
        /// </summary>
        public int pid { get; set; }

        /// <summary>
        /// 名称
        /// </summary>
        public string text { get; set; }

        /// <summary>
        /// 子节点
        /// </summary>
        public List<Node> nodes;
    }
}