【前言】
最近的项目中需要在页面上显示组织结构的树形列表,经过一系列的尝试,终于成功了。下面就简单说说是如何实现的。
效果图:
前台:
我们需要在界面中引入代码,很简单,但是很重要,它用来存放加载的树。
在页面加载时就需要我们把树形列表显示出来,
$(document).ready(function () {
$("#menuTree").tree({
url: '/BasicOrganization/LoadMenuData',
});
});
Controller:
///
/// 丛后台查询数据,返回到前台
///
/// 机构信息json串
public string LoadMenuData()
{
从后台查询部门信息
List listTree =basicOrganizationBll.QueryAllOrganization();
List OrganizationInfo = BasicOrganizationViewModel.ToTreeNodes(listTree);
return GetJson(OrganizationInfo);
}
在这里我们通过使用B层的QueryAllOrganization()方法查找到所有的组织。根据ViewModel的方法把机构集合转化成树形节点集合。
viewModel:
///
/// 将 机构集合 转成 树节点集合
///
///
///
public static List ToTreeNodes(List listPer)
{
List listNodes = new List();
//生成 树节点时,根据 pid=0的根节点 来生成
string a = null;
LoadTreeNode(listPer, listNodes, a);
return listNodes;
}
///
/// 递归机构集合 创建 树节点集合
///
/// 机构集合
/// 节点集合
/// 节点父id
public static void LoadTreeNode(List listPer, List listNodes, string pid)
{
foreach (var permission in listPer)
{
//如果机构父id=参数
if (permission.OrganizationPID ==pid)
{
//将 机构转成 树节点
TreeNode node = permission.ToOpenNode();
//将节点 加入到 树节点集合
listNodes.Add(node);
//递归 为这个新创建的 树节点找 子节点
LoadTreeNode(listPer, node.children, node.id);
}
}
}
我们利用数据库中的字段存OrganizationID和OrganizationPID找到节点的对应关系。(根节点的PID为空,所有在生成树节点时,我们根据PID=null来生成)
【总结】
实现一个功能首先要了解需求,然后考虑实现思路,其实怎么去实现有很多种方法,但是怎么实现灵活运用这个是关键。多动手,多实践才是硬道理。