前兩篇博客介紹了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;
}
}