Dataprovider of the tree control

Dataprovider of the tree control

It may be because it is autumn in the Northern Hemisphere. Recently I have been thinking about the tree. Now it seems appropriate to discuss the flex tree control. Because there are many things to talk about, I plan to write a series of articles for the flex 2.0 tree control. In this article, I will provide some information about tree dataproviders, itemrenderers, and drag-and-drop.

Data Providers)

The data used by the tree is classified. That is to say, data has multiple levels: branch nodes and leaf nodes. In contrast, the data used by the DataGrid and list controls is not hierarchical.

Xmllistcollection is very suitable for tree-based dataprovider and is the most common class used for dataprovider. You can also use arraycollection, which will be described in more detail below.

XML is originally hierarchical, so it is easy to use. Let's take a look at this simple XML:

Program code

[Bindable]

VaR company: xml =

<Node>

<Node label = "finance" dept = "200">

<Node label = "John H"/>

<Node label = "Sam K"/>

</Node>

<Node label = "engineering" dept = "300">

<Node label = "Erin M"/>

<Node label = "Ann B"/>

</Node>

<Node label = "operations" dept = "400" isbranch = "true"/>

</Node>

In this XML, you can easily see the structure of the tree. However, note that all elements in this XML are <node/> elements. Each element of a branch node or leaf node also has a label and a name: "Node ". If you need a branch node without leaves, you can use isbranch = "true" to tell the tree that the node is a branch node.

Tree is similar to this XML. You can assign the XML to the tree and then you can see its structure. This is no surprise. But you may ask: Are all the data nodes the same? See the following XML:

Program code

[Bindable]

VaR company: xml =

<List>

<Department title = "finance" code = "200">

<Employee name = "John H"/>

<Employee name = "Sam K"/>

</Department>

<Department title = "engineering" code = "300">

<Employee name = "Erin M"/>

<Employee name = "Ann B"/>

</Department>

<Department title = "operations" code = "400" isbranch = "true"/>

</List>

The XML structure is not uniform. If you assign it to a tree control, you will see the XML heap in the control, because no additional description tree does not know how to handle it.

This XML can be displayed in the tree through labelfunction.

Program code

Private function treelabel (item: Object): String

{

VaR node: xml = XML (item );

If (node. localname () = "Department ")

Return node. @ title;

Else

Return node. @ name;

}

Labelfunction simply returns the value of the name or title Attribute Based on the node type.

Xmllistcollection

At the beginning, I mentioned that xmllistcollection is a good tree dataprovider, but I have been using XML until now. The following is an appropriate method for providing data for the tree:

Program code

[Bindable]

VaR companylist: xmllistcollection = new xmllistcollection (company. Department );

...

<Mx: Tree dataprovider = "{companylist}" labelfunction = "treelabel"/>

Xmllistcollection can be better used as a dataprovider, because tree can operate on it (edit, drag and drop, etc.) and changes in xmllistcollection can be reflected on the tree. That is to say, if we change the company XML object, you will not see the tree change. However, if the xmllistcollection companylist is changed, both the XML and the tree are changed.

Use xmllistcollection to provide data for the tree. You can change the set so that the tree and the XML in the tree change at the same time.

If you cannot provide a unified XML structure for the tree, use labelfunction (or itemrenderer, which will be discussed later) to provide a label for data display.

Arraycollection

You can also use arraycollection. You can nest arraycollection in arraycollection to convert arraycollection into a hierarchical one:

Program code

[Bindable]

Private var companydata: arraycollection = new arraycollection (

[{Type: "department", title: "finance", children: New arraycollection (

[{Type: "employee", name: "John H "},

{Type: "employee", name: "Sam K"}])},

{Type: "department", title: "engineering", children: New arraycollection (

[{Type: "employee", name: "Erin M "},

{Type: "employee", name: "Ann B"}])},

{Type: "department", title: "operations", children: New arraycollection ()}

]);

In this structure, you will find that as long as a node has sub-nodes, the sub-node domain name is children-tree, which will be used to distinguish between the branch node and the leaf node.

You also need a labelfunction for this data so that the tree knows what is displayed on each node:

Program code

Private function treelabel (item: Object): String

{

If (item. type = "Department ")

Return item. title;

Else

Return item. Name;

}

Add Node

You need to change the tree through dataprovider, instead of using the tree control itself. When you want to add a node to dataprovider, the tree automatically changes.

To add a node to xmllistcollection, You need to obtain the handle of the parent node. For example, to add a new department top-level node, you can do the following:

Program code

VaR newnode: xml = <department title = "Administration" code = "500">

<Employee name = "Mark C"/>

</Department>;

Companylist. additem (newnode );

The following shows how to add a new employee node to an existing operations department:

Program code

VaR newnode: xml = <employee name = "Beth t"/>;

VaR dept: xmllist = company. Department. (@ Title = "operations ");

If (Dept. Length ()> 0 ){

Dept [0]. appendchild (newnode );

}

Once you have determined a node to be added and obtained the corresponding XML, you can use the appendchild () method to add it.

When adding a node to arraycollection, you only need to add it to the node in the structure. The following code shows how to add a new department node:

Program code

VaR newnode: Object = {type: "department", title: "Administration "};

VaR newemployee: Object = {type: "employee", name: "Mark C "};

Newnode. Children = new arraycollection ([newemployee]);

Companydata. additem (newnode );

The following shows how to add a new employee node to an existing operations department:

Program code

VaR newnode: Object = {type: "employee", name: "Beth t "};

For (var I: Number = 0; I <companydata. length; I ++ ){

VaR item: Object = companydata. getitemat (I );

If (item. Title = "operations "){

VaR children: arraycollection = item. Children;

Children. additem (newnode );

Companydata. itemupdated (item );

Empname. Text = "";

Break;

}

}

As you can see, using arraycollection to add nodes is a little more complex than using XML.

Delete a node

You can use the removeitemat () method of xmllistcollection to delete a top-level node, but you need to know the index of the node. In the following example, you only know its name is "operations", so you need to loop through matching in the node until the node is found, and then you can delete it.

Program code

VaR depttitle: String = "operations ";

For (var I: Number = 0; I <companydata. length; I ++ ){

VaR item: xml = XML (companydata. getitemat (I ));

If (item. @ Title = depttitle ){

Companydata. removeitemat (I );

Break;

}

}

It is easier to delete the selected top-level node:

Program code

VaR index: Number = tree. selectedindex;

Companydata. removeitemat (INDEX );

The following describes how to delete a leaf node:

Program code

VaR node: xml = XML (tree. selecteditem );

If (node = NULL) return;

If (node. localname ()! = "Employee") return;

VaR children: xmllist = xmllist (node. Parent (). Children ();

For (var I: Number = 0; I <children. Length (); I ++ ){

If (Children [I]. @ name = node. @ name ){

Delete children [I];

}

}

To delete an arraycollection object, you may want to query this node. However, once you find it, you can use the removeitemat () method of arraycollection because the index is always valid for arraycollection objects.

If the tree's dataprovider is an arraycollection, you can delete a leaf node as follows:

Program code

VaR node: Object = tree. selecteditem;

If (node = NULL) return;

If (node. type! = "Employee") return;

VaR children: arraycollection = node. Parent (). Children () as arraycollection;

For (var I: Number = 0; I <children. length; I ++ ){

If (Children [I]. Name = node. Name ){

Children. removeitemat (I );

Break;

}

}

It is unlikely to tell the collection a tree node and then let the collection delete it -- you must find it and delete it yourself.

 

Article transferred from: http://hi.baidu.com/ppdd521/blog/item/2d0c075284dd030b0ef3e364.html