最近在做项目时遇到了这样一个需求，就是做一个系统首页左侧菜单的树形节点的管理。项目后台数据库使用的是SQL server 2008，后端框架使用的是微软的ASP.NET MVC5，前端框架使用的是Jquery EasyUI。接下来我就讲解一下如何实现树形节点的管理功能。
先看一下什么是树形节点
如上图素所示，这就是树形节点。
模型
数据库表结构的设计
首先我们先讲解一下如何设计数据库的表结构，以便方便地存储和查询这些节点数据。我的设计是这样的：
也就是说，这张表只有3个字段：节点的id（id），节点名称（name），父节点id（parent_node_id）。最外层节点没有父节点，所以它的parent_node_id这个字段的值为0，当我们要查找最外层节点时，只要查找parent_node_id=0的节点就好了。通过这3个字段，就构建了一个层级关系。
类的设计
类的代码设计如下：
public class Node
{
public Node() { }
public Node(int id, string text, int parent_node_id, List<Node> children)
{
this.id = id;
this.text = text;
this.parent_node_id = parent_node_id;
this.children = children;
}
public int id { get; set; }
public string text { get; set; }
public int parent_node_id { get; set; }
public List<Node> children;
}
一般来讲，类的属性和表的字段应该是一一对应的，但是这里多了一个属性chirldren，这个属性是List类型，用来存储当前节点的子节点，当一个节点没有子节点，即它是叶子节点时，它的children是一个空的列表。children属性的作用在后面查询的时候就会显现出来了。
查询
表类设计好了，先手动往里面添加一些数据，然后来看怎么查询节点。
为了让EasyUI将节点以树形结构展示出来，我们必须向前端传递一个JSON格式的字符串，这个JSON格式的字符串应该长这样：
我采取的办法是，先一次性将节点数据查询出来，存到DataTable中，然后采用递归的方式，一层层地将数据取出来。
代码如下：
public static void getChildrenNode(DataTable dt, int id, Node node)
{
DataRow[] children_node = dt.Select("parent_node_id = " + id); //找到node的所有的子节点
for (int i = 0; i < children_node.Length; i++)
{
//依次将每一个子节点放入到node的children中
Node nd = new Node((int)children_node[i]["id"], (string)children_node[i]["name"], (int)children_node[i]["parent_node_id"], new List<Node>());
node.children.Add(nd);
//然后获得子节点的子节点
getChildrenNode(dt, nd.id, nd);
}
}
public JsonResult getTreeJson()
{
//初始化一个空列表，用来存放所有的节点
List<Node> nodes = new List<Node>();
//从数据库中查询所有数据，SqlHelper是我自己写的一个工具类，可以将它换成别的
DataTable dt = SqlHelper.ExecuteTable("select * from node", null);
DataRow[] root_node = dt.Select("parent_node_id = " + 0); //找到所有的根节点
for (int i = 0; i < root_node.Length; i++)
{
Node nd = new Node((int)root_node[i]["id"], (string)root_node[i]["name"], (int)root_node[i]["parent_node_id"], new List<Node>());
nodes.Add(nd);
getChildrenNode(dt, nd.id, nd);
}
//将列表中的数据转成JSON字符串的格式，传递到前端
return Json(nodes, JsonRequestBehavior.AllowGet);
}
由于是网站首页左侧菜单，所以要在_Layout.cshtml中接收JSON字符串。参考EasyUI的教程，只需在_Layout.cshtml中引入相应的包，然后加上这样一个标签
<ul id="tt" class="easyui-tree" url="/Home/getTreeJson"></ul>
就可以显示属性节点了。其中/Home/getTreeJson是上面那个方法在项目中的路径。
未完待续……