Unity 树形结构 动态加载Tree

   提示:源码附在文后~大家互相学习

目录

前言

一、组件结构

1. Tree预制体结构

2. 项目结构

二、功能实现

1.初始化树结构      

2.ItemPrefab加载

3.新增ItemPrefab

4.修改ItemPrefab

5.删除temPrefab

总结



前言

管理系统中,时常有树形结构管理需求。使用频率较高。本文章对树形结构拼接做到基础功能实现。可以满足一般树形结构操作需求。所以整理出组件,方便每次使用!大家共同学习!


一、组件结构

 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);
        }

总结

组件结构简单,层级明朗,便于理解。可更改ui和尺寸用于不同场合。个人总结归纳,便于使用。避免重复造轮子~~~

CSDN组件下载:https://download.csdn.net/download/u014641682/87630371

おすすめ

転載: blog.csdn.net/u014641682/article/details/129853891