很多時候我們需要在網頁上顯示存在層級隸屬關係的數據，例如省、市、區這三者就存在隸屬關係，如果要對它們進行顯示就需要用到樹控件。百度了很久，發現同志們經常用的有zTree、jsTree等等，但考慮到工作中的前端庫是Bootstrap，爲了使界面風格能夠相對統一，我還是決定使用Bootstrap TreeView來做。它的下載很簡單，NuGet一搜就有，如下圖：
數據準備
我在這裏建了一張數據表， 其中的測試數據如下圖所示：
前端代碼
<!DOCTYPE html>
<html>
<head>
<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" />
<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 id="tv" style="width:300px;border:1px solid #E8E8E8;margin-left:200px;margin-top:50px;"></div>
<script>
$(document).ready(function () {
var nodeData = [];
// 獲取後臺數據
$.ajax({
url: 'Handlers/GetTreeNodesHandler.ashx',
type: 'post',
dataType: 'json',
async: false,
success: function (data) {
nodeData = data;
}
})
// 初始化TreeView
$('#tv').treeview({
data: nodeData,
showCheckbox: true,
showBorder: false,
selectedBackColor: 'skyblue',
selectedColor: 'white',
onNodeSelected: function (event, node) {
alert(node.text);
},
onNodeChecked: function (event, node) {
},
onNodeUnchecked: function (event, node) {
}
})
})
</script>
</body>
</html>
後臺代碼
using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using Newtonsoft.Json;
namespace WebApplication2.Handlers
{
/// <summary>
/// GetTreeNodesHandler 的摘要說明
/// </summary>
public class GetTreeNodesHandler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
// 查詢數據
DataTable dataTable = new DataTable();
string connectionString = ConfigurationManager.ConnectionStrings["ConnectionString"].ToString();
using (SqlDataAdapter adapter = new SqlDataAdapter("select * from [TRegion]", connectionString))
{
adapter.Fill(dataTable);
}
// 轉換爲實體類
List<Node> nodes = new List<Node>();
foreach (DataRow row in dataTable.Rows)
{
Node node = new Node();
node.id = Convert.ToInt32(row["id"].ToString());
node.pid = Convert.ToInt32(row["pid"].ToString());
node.text = row["text"].ToString();
nodes.Add(node);
}
// 轉換爲JSON樹
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;
}
}
界面效果
到此爲止，我們已經能夠使用Bootstrap TreeView顯示省、市、區的關係了~不過細心的同志應該會發現：每個節點左側都有一個複選框，但選擇複選框後並沒有實現想象中的多級聯動效果。關於樹控件多級聯動效果的實現方法，我會在下一篇博客中進行介紹。