很多时候我们需要在网页上显示存在层级隶属关系的数据，例如省、市、区这三者就存在隶属关系，如果要对它们进行显示就需要用到树控件。百度了很久，发现同志们经常用的有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显示省、市、区的关系了~不过细心的同志应该会发现：每个节点左侧都有一个复选框，但选择复选框后并没有实现想象中的多级联动效果。关于树控件多级联动效果的实现方法，我会在下一篇博客中进行介绍。
