提示：源码附在文后~大家互相学习
目录
前言
管理系统中，时常有树形结构管理需求。使用频率较高。本文章对树形结构拼接做到基础功能实现。可以满足一般树形结构操作需求。所以整理出组件，方便每次使用！大家共同学习！
一、组件结构
1. Tree预制体结构
2. 项目结构
二、功能实现
1.初始化树结构
- 将TreeManager脚本绑定至Tree预制体上，用于整体控制树型结构初始化及基本操作方法绑定。
- 脚本Start方法用作初始化数据，目前为假数据拼接。注释掉部分可从后台数据库读取，动态拼接树形结构。
void Start()
{
ResManager rm = ResManager.Instance;
mTreeView.OnTreeListAddOneItem = OnTreeListAddOneItem;
mTreeView.OnTreeListDeleteOneItem = OnTreeListDeleteOneItem;
mTreeView.OnItemExpandBegin = OnItemExpandBegin;
mTreeView.OnItemCollapseBegin = OnItemCollapseBegin;
mTreeView.OnItemCustomEvent = OnItemCustomEvent;
mTreeView.InitView();
******************假数据动态拼接树开始****************************
TreeViewItem item1 = mTreeView.AppendItem("ItemPrefab1");
item1.GetComponent<ItemScript>().SetItemInfo("全部", "全部", "1");
TreeViewItem childItem1_1 = item1.ChildTree.AppendItem("ItemPrefab1");
childItem1_1.GetComponent<ItemScript>().SetItemInfo("技术部门", "技术部门", "1_1");
TreeViewItem childItem1_2 = item1.ChildTree.AppendItem("ItemPrefab1");
childItem1_2.GetComponent<ItemScript>().SetItemInfo("商务部门", "商务部门", "1_2");
TreeViewItem childItem1_3 = item1.ChildTree.AppendItem("ItemPrefab1");
childItem1_3.GetComponent<ItemScript>().SetItemInfo("行政部门", "行政部门", "1_3");
TreeViewItem childItem1_4 = item1.ChildTree.AppendItem("ItemPrefab1");
childItem1_4.GetComponent<ItemScript>().SetItemInfo("总裁办", "总裁办", "1_4");
TreeViewItem childItem1_1_1 = childItem1_1.ChildTree.AppendItem("ItemPrefab1");
childItem1_1_1.GetComponent<ItemScript>().SetItemInfo("技术一部", "技术一部", "1_1_1");
TreeViewItem childItem1_1_2 = childItem1_1.ChildTree.AppendItem("ItemPrefab1");
childItem1_1_2.GetComponent<ItemScript>().SetItemInfo("技术二部", "技术二部", "1_1_2");
******************假数据动态拼接树结束****************************
******************后台数据动态拼接树开始****************************
// outlineInfoList = ServiceManager.Instance().GetAllTree();
// allTreeViewItemList = new List<TreeViewItem>();
// TreeViewItem item1 = new TreeViewItem();
// for (int i = 0; i < outlineInfoList.Count; i++)
// {
// if (string.IsNullOrEmpty(outlineInfoList[i].ParentId) || int.Parse(outlineInfoList[i].ParentId) == 0)
// {
// item1 = mTreeView.AppendItem("ItemPrefab1");
// item1.GetComponent<ItemScript>().id = outlineInfoList[i].OutlineId;
// item1.GetComponent<ItemScript>().parentId = outlineInfoList[i].ParentId;
// item1.GetComponent<ItemScript>().labelText.text = outlineInfoList[i].OutlineName;
// item1.GetComponent<ItemScript>().SetItem(item1.GetComponent<ItemScript>());
// allTreeViewItemList.Add(item1);
// }
// else
// {
// for (int j = 0; j < allTreeViewItemList.Count; j++)
// {
// if (allTreeViewItemList[j].GetComponent<ItemScript>().id.Equals(outlineInfoList[i].ParentId))
// {
// TreeViewItem childItem = allTreeViewItemList[j].ChildTree.AppendItem("ItemPrefab1");
// childItem.GetComponent<ItemScript>().id = outlineInfoList[i].OutlineId;
// childItem.GetComponent<ItemScript>().parentId = outlineInfoList[i].ParentId;
// childItem.GetComponent<ItemScript>().labelText.text = outlineInfoList[i].OutlineName;
// childItem.GetComponent<ItemScript>().SetItem(childItem.GetComponent<ItemScript>());
// allTreeViewItemList.Add(childItem);
// }
// }
// }
// }
// OnItemCustomEvent(item1, CustomEvent.ItemClicked, "");
******************后台数据动态拼接树结束****************************
}- 注释：后台数据库设计如图所示，Level字段为当前层级id及其所有父层及id用逗号拼接的字符串格式。
2.ItemPrefab加载
- TreeView上绑定 TreeView脚本，用于初始化管理ItemPrefab事件绑定。
//called when a item is added to a TreeList
public Action<TreeList> OnTreeListAddOneItem;
//called when a item is deleted to a TreeList
public Action<TreeList> OnTreeListDeleteOneItem;
//called when a item is begin to expand its chlidtree.
public Action<TreeViewItem> OnItemExpandBegin;
//called when a item is expanding its chlidtree.
public Action<TreeViewItem> OnItemExpanding;
//called when a item has expanded its chlidtree.
public Action<TreeViewItem> OnItemExpandEnd;
//called when a item is begin to collapse its chlidtree.
public Action<TreeViewItem> OnItemCollapseBegin;
//called when a item is collapsing its chlidtree.
public Action<TreeViewItem> OnItemCollapsing;
//called when a item has collapsed its chlidtree.
public Action<TreeViewItem> OnItemCollapseEnd;
//called when a custom event is raised. you can raise a custom event by
//call TreeViewItem:RaiseCustomEvent(CustomEvent customEvent,System.Object param)
//to notify the TreeView something happens, such as a TreeViewItem is clicked.
//This callback is a bridge to connect the TreeView and its child TreeViewItems.
public Action<TreeViewItem, CustomEvent, System.Object> OnItemCustomEvent;
//called when a TreeList reposition method finished.
public Action<TreeList> OnTreeListRepositionFinish;- ItemPrefab上绑定ItemPrefab脚本，用于绑定层级的基础结构expandBtn收缩、icon图标、labelText等。
3.新增ItemPrefab
AddChildBtn按钮上绑定TreeManager的OnAddChildBtnClicked()方法。
鼠标点击树形结构某一层级，层级显示选中状态。此时点击新增按钮，会在选中层级下创建新的层级目录。目录名为选中状态，修改名称，移开鼠标为非选中状态，保存层级。
private void Update()
{
///****************处理修改、新增层级，取消聚焦触发**********************************
if (currentItem != null && currentItem.GetComponent<ItemScript>().IsSelected && inputFieldType)
{
int status = 1;
int temp = -1;
//增加log
//LogInfo logInfo = new LogInfo();
//logInfo.UserName = DataBase.Instance().loginUserInfo.UserName;
inputFieldType = false;
OutlineInfo outlineInfo = new OutlineInfo();
outlineInfo.OutlineName = currentItem.GetComponent<ItemScript>().labelText.text;
outlineInfo.ParentId = currentItem.GetComponent<ItemScript>().parentId;
outlineInfo.Level = currentLevel;
//新增
if (string.IsNullOrEmpty(currentItem.GetComponent<ItemScript>().id))
{
//temp = ServiceManager.Instance().AddOutlineInfo(outlineInfo);
//logInfo.OperationName = Common.outLineAddLog;
}
else
{//修改
//outlineInfo.OutlineId = currentItem.GetComponent<ItemScript>().id;
//temp = ServiceManager.Instance().ChangeOutlineInfo(outlineInfo);
//logInfo.OperationName = Common.outLineEditLog;
}
if (temp == 0)
{
status = 0;
}
//logInfo.UserName = DataBase.Instance().loginUserInfo.UserName;
//logInfo.OperationStatus = status.ToString();
//ServiceManager.Instance().AddLog(logInfo);
}
}
public void OnAddChildBtnClicked()
{
mNewItemCount++;
TreeViewItem childItem = new TreeViewItem();
if (mTreeView.IsEmpty)
{
childItem = mTreeView.AppendItem("ItemPrefab1");
childItem.GetComponent<ItemScript>().SetItemInfo("新建大纲", "新建大纲" + mNewItemCount);
}
else
{
TreeViewItem item = CurSelectedItem;
if (item == null)
{
Debug.Log("Please Select a Item First");
return;
}
childItem = item.ChildTree.AppendItem("ItemPrefab1");
childItem.GetComponent<ItemScript>().parentId = item.GetComponent<ItemScript>().id;
childItem.GetComponent<ItemScript>().labelText.text = "新建大纲";
childItem.GetComponent<ItemScript>().SetItem(childItem.GetComponent<ItemScript>());
}
OnItemCustomEvent(childItem, CustomEvent.ItemClicked, "");
childItem.GetComponent<ItemScript>().labelText.interactable = true;
childItem.GetComponent<ItemScript>().labelText.Select();
currentItem = childItem;
}4.修改ItemPrefab
EditBtn按钮上绑定TreeManager的OnEditBtnClicked()方法。
同样保证修改层级显示选中状态。此时点击修改按钮，目录名为选中状态，修改名称，移开鼠标为非选中状态，触发update方法，修改保存层级。
public void OnEditBtnClicked()
{
TreeViewItem item = CurSelectedItem;
if (item == null)
{
Debug.Log("Please Select a Item First");
return;
}
item.GetComponent<ItemScript>().labelText.interactable = true;
item.GetComponent<ItemScript>().labelText.Select();
currentItem = item;
}
}5.删除temPrefab
DeleteBtn按钮上绑定TreeManager的OnDeleteBtnClicked()方法。
删除层级为选中状态。此时点击删除按钮删除层级。注释掉部分代码，为操作数据库删除数据。
public void OnDeleteBtnClicked()
{
TreeViewItem item = CurSelectedItem;
if (item == null)
{
Debug.Log("Please Select a Item First");
return;
}
List<string> outlineIds = new List<string>();
outlineIds.Add(currentItemId);
item.ParentTreeList.DeleteItem(item);
****************删除数据库数据*******************
//int status = 1;
//int temp = ServiceManager.Instance().DeleteOutlineInfo(outlineIds);
//if (temp == 0)
//{
// status = 0;
// item.ParentTreeList.DeleteItem(item);
//}
增加log
//LogInfo logInfo = new LogInfo();
//logInfo.UserName = DataBase.Instance().loginUserInfo.UserName;
//logInfo.OperationStatus = status.ToString();
//logInfo.OperationName = Common.outLineDeleteLog;
//ServiceManager.Instance().AddLog(logInfo);
}总结
The component structure is simple, the hierarchy is clear, and it is easy to understand. The ui and size can be changed for different occasions. Personal summary and induction, easy to use. Avoid reinventing the wheel~~~
CSDN component download: https://download.csdn.net/download/u014641682/87630371