[VUE] NET implements Tree component bidirectional data binding (2)

Write before

In the previous articles, we have done the preparatory work. Next, we need to do two steps. The first step is to read the data from the user group resource table, and assemble the tree according to the level of the resource page. This process only involves query. The second step is to implement the database according to the user's check and uncheck of the tree resource on the page.Add and delete tables.

Tree Stitching

  • First, let's start with a simple first step. Our basic idea is as follows:

    • 1. First compare the data in the user group resource table with that in the resource table, and at the same time separate the ranks of page resources, that is, classify them into first-level nodes and second-level nodes.

    • 2. If the user group owns the resource, it is checked.That is, the Checked property is true.(Note: If a secondary node under a first-level node is checked, the Tree component automatically sets the first-level node as checked)

    • 3. A ParentID of zero indicates a primary node, otherwise a secondary node

    • 4. Add the secondary node to the child nodes of the primary node by comparing the secondary node with the primary node based on the ParentID.
    • 5. Set the first level node to the state of "default expansion", that is, expand to true.

Code

public IList<CO_RIGHTRESOURCE_QueryParam> GetTreeByID(IList<CO_Right_Resource> nodelist,IList<CV_CO_RIGHT_GROUP_RESOURCE> rightGroupResource) 
{
//Since I can't make changes to the entity I originally generated, I created the "viewmodel"co_rightsource_queryparam entity
//Since controller s pass in two other generics, you need to declare some empty list s for storage
IList<CO_RIGHTRESOURCE_QueryParam> rightResourceList = new List<CO_RIGHTRESOURCE_QueryParam>();
//Storage Level 1 Node
IList<CO_RIGHTRESOURCE_QueryParam> firstClass = new List<CO_RIGHTRESOURCE_QueryParam>();
//Storage Secondary Node
IList<CO_RIGHTRESOURCE_QueryParam> secondClass = new List<CO_RIGHTRESOURCE_QueryParam>();
//Declare a root node to store a first-level node; since all the value types of the Tree component on the page are a collection of objects, the values returned by the background to the front must be a list to display properly.
////root object used to add a first-level node
CO_RIGHTRESOURCE_QueryParam root = new CO_RIGHTRESOURCE_QueryParam();
////rootTree is used to add root node to LIST for front-end display
IList<CO_RIGHTRESOURCE_QueryParam> rootTree = new List<CO_RIGHTRESOURCE_QueryParam>();
//Since the list type passed in my controller is inconsistent, it needs to be reassigned and added (this framework is really cumbersome, but it also has its benefits)
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);
}
//Separate two levels of nodes
    foreach (var item in rightResourceList)
    {

        foreach (var model in rightGroupResource)
        {
            //If the user group owns the resource, it is checked
            if (item.ID == model.ResourceID && item.ParentID!=0)
            {
                item.Checked = "true";
            }
        }
        //A ParentID of zero indicates a first-level node
        if (item.ParentID == 0)
        {
            firstClass.Add(item);
        }
        //Otherwise, it is a secondary node
        else
        {
            secondClass.Add(item);
        }
    }

    //Adding a secondary node to a child node of a primary node by comparing the parent ID to the primary node
    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);
                //Set level 1 node to default expand state
                item1.expand = "true";
            }
        }
    }

    //Since the page needs to load a root directory, the root directory property needs to be set
    root.title = "Page Resources(PageResources)";
    root.expand = "true";
    //Add one level node to the root node
    root.children = firstClass;
    //Add root node to root tree
    rootTree.Add(root);
    return rootTree;
    //At this point, our tree has been assembled and can be returned directly to the controller, then back to the page to display normally.
}

summary

Now we have just finished the query stitching of a tree, and then the resource modification is really complex. Because of the time complexity involved, we can divide it up again, so interested partners can continue to pay attention to it.

Keywords: Database

Added by sklein99 on Sat, 18 May 2019 20:49:14 +0300