【VUE】.NET实现Tree组件双向绑定数据（2）

写在前面的

   在之前的文章中我们已经做好了前期的准备工作，接下来我们需要做的有两步，第一步是将用户组资源表中的数据读取出来，按照资源页面的级别，拼装树，这个过程我们只涉及到查询；第二步就是根据页面上用户对树资源的勾选和取消勾选，来实现数据库表的添加和删除。

树的拼接

• 首先我们先来做简单的第一步，我们的基本思路是这样：

  • 1.首先将用户组资源表中的数据与资源表中的数据作对比，同时将页面资源的等级分开，即分为一级节点，二级节点

  • 2.如果用户组拥有该资源则被勾选。即Checked属性为true。(注：如果某个一级节点下的二级节点被勾选的话，那么Tree组件会自动将该一级节点置为勾选状态)

  • 3.如果ParentID为零则表明是一级节点，否则为二级节点

  • 4.将二级节点根据ParentID与一级节点进行对比，添加到一级节点的子节点中。
  • 5.将一级节点设置为“默认展开”的状态，即expand为true。

代码

public IList<CO_RIGHTRESOURCE_QueryParam> GetTreeByID(IList<CO_Right_Resource> nodelist,IList<CV_CO_RIGHT_GROUP_RESOURCE> rightGroupResource) 
{
//由于我无法对原有生成的实体进行更改，所以我创建了"viewmodel"co_rightsource_queryparam实体
//由于controller传来的是另外的两个泛型，所以需要声明一些空list来进行存储
IList<CO_RIGHTRESOURCE_QueryParam> rightResourceList = new List<CO_RIGHTRESOURCE_QueryParam>();
//存储一级节点
IList<CO_RIGHTRESOURCE_QueryParam> firstClass = new List<CO_RIGHTRESOURCE_QueryParam>();
//存储二级节点
IList<CO_RIGHTRESOURCE_QueryParam> secondClass = new List<CO_RIGHTRESOURCE_QueryParam>();
//声明一个根节点，用来存储一级节点；由于页面中的Tree组件所有的值类型是一个对象集合，所以后台向前端返回的值必须是一个list才可以正常显示。
root对象用来添加一级节点
CO_RIGHTRESOURCE_QueryParam root = new CO_RIGHTRESOURCE_QueryParam();
rootTree用来将root节点添加到LIST中，方便前端显示
IList<CO_RIGHTRESOURCE_QueryParam> rootTree = new List<CO_RIGHTRESOURCE_QueryParam>();
//由于我controller中传来的list类型不一致，所以需要重新进行赋值和添加(这个框架真的麻烦，但是这么做也有它的好处)
foreach (var item in nodelist)
{
    CO_RIGHTRESOURCE_QueryParam _tempRightResource = new CO_RIGHTRESOURCE_QueryParam();
    _tempRightResource.ID = item.ID;
    _tempRightResource.Name = item.Name;
    _tempRightResource.Path = item.Path;
    _tempRightResource.Icon = item.Icon;
    _tempRightResource.Access = item.Access;
    _tempRightResource.Title = item.Title;
    _tempRightResource.Component = item.Component;
    _tempRightResource.Sequence = item.Sequence;
    _tempRightResource.ParentID = item.ParentID;
    _tempRightResource.CreatedBy = item.CreatedBy;
    _tempRightResource.CreatedOn = item.CreatedOn;
    _tempRightResource.title = item.Title;
    rightResourceList.Add(_tempRightResource);
}
//将两级节点区分开来
    foreach (var item in rightResourceList)
    {

        foreach (var model in rightGroupResource)
        {
            //如果用户组拥有该资源则被勾选
            if (item.ID == model.ResourceID && item.ParentID!=0)
            {
                item.Checked = "true";
            }
        }
        //如果ParentID为零则表明是一级节点
        if (item.ParentID == 0)
        {
            firstClass.Add(item);
        }
        //否则为二级节点
        else
        {
            secondClass.Add(item);
        }
    }

    //将二级节点根据ParentID与一级节点进行对比，添加到一级节点的子节点中
    foreach (var item1 in firstClass)
    {
        item1.children = new List<CO_RIGHTRESOURCE_QueryParam>();
        foreach (var item2 in secondClass)
        {

            if (item2.ParentID == item1.ID)
            {
                item1.children.Add(item2);
                //将一级节点设置为“默认展开”的状态
                item1.expand = "true";
            }
        }
    }

    //由于页面需要加载一个根目录，所以需要设置根目录属性
    root.title = "页面资源(PageResources)";
    root.expand = "true";
    //将一级节点添加到，根节点中
    root.children = firstClass;
    //在根树中添加root节点
    rootTree.Add(root);
    return rootTree;
    //到了这里，我们的树算是拼装完成了，可以直接返回给controller，再返回给页面就可以正常显示了。
}

总结

   现在我们只是完成了一个树的查询拼接，之后的资源修改才是真正复杂的地方，由于涉及到时间复杂度，再分一篇出来，有兴趣的小伙伴继续关注吧。