Use of the TreeView control

Say in front

A lot of netizens wrote to ask us to write some ActiveX control articles, in fact, we have plans for this. Remember last year when we planned the BOE work, Xiao Li wrote an article about ListView, very unfortunate is Xiao Li's machine was hacker attack, this article was lost; Xiao Li has to cope with an exam and has no spare time to write articles. So I reluctantly, instead of Xiao Li completion of the TreeView control Introduction, later on the content of ActiveX is still small Li is responsible.

ActiveX is an important tool for extending application functionality, but there are few introductions to visual FoxPro and ActiveX controls on the market, as if ActiveX and visual FoxPro are not available, and most ActiveX controls can actually be used in visual Fo Run in XPro. We can learn VB through the demonstration program to understand them (as long as there is a sample program, the general will have VB code), in the object of the program code VB Syntax and Visual FoxPro is very similar, VB code a little conversion is visual FoxPro code.

Writing data to the TreeView control

Look at our demo data.

There are two tables in this database: One is a Department table representing the company's "departmental Situation", and the other is the employee table, which reflects the "employee" situation. Each employee corresponds to a department, each department has several employees, and one of these employees is the department head (employee.manger=.t.), which is associated with a depar_id field.

Based on the above information, we want to list the image below in the TreeView.

Imagelist Control

There can be icons in the TreeView that must be stored in the Imagelist control. The Imagelist control is not a visual control, its operation is very simple, add this control to the form, set its Name property to Imagelist (this step does not do all the same, we are for later explanation convenient). Open its Property Settings window (right-click the control-> pop-up shortcut menu-> select "Imagelistctrl Properties"), as shown in the following figure:

Use the Insert Picture ... button to add the pictures and press "OK" to exit.

The initial setting of the TreeView control

Add the TreeView control to the form, set its Name property to TreeView (This step does not do all the same, we are for later explanation convenient). Then we're going to set some of its underlying properties, and add the following code to this control's Init event:

This.imagelist=thisform.imagelist && Set picture providers as ImageList controls
This.labeledit=1 && cannot automatically edit labels, set to 0 to automatically edit labels
this.linestyle=1 && Root Line Style

The LineStyle attribute refers to the line style between two nodes, with "tree Lines" (0) and "root Lines" (1) in both styles. A "tree line" refers to the connection between a sibling node and a parent node, and "root line" refers to the connection between the sibling node and the parent node, and also between the root nodes.

Add data to the TreeView control

To add a procedure to the form: Drawtree, its core code is as follows:

Local Xnode,xnode1
With This.treeview
SELECT DEPARTMENT
SCAN All
Xnodes=. NODES. ADD (,, ' DEP ' +alltr (STR DEPARTMENT. depart_id,5)),;
Alltr (DEPARTMENT. DESC), 1)
Xnodes. expandedimage=2 && When the node is expanded, the icon used for the node.
SELECT EMPLOYEE
SCAN for EMPLOYEE. Depart_id=department. depart_id
IF Manger
xnode1=. NODES. ADD (xnodes,4, ' EMP ' +alltr (STR) (EMPLOYEE. emp_id,5)),;
Alltr (EMPLOYEE. last_name) + "" +alltr (EMPLOYEE. first_name), 3,4)
XNODE1. Bold=. T. && department heads are shown in bold.
ELSE
. NODES. ADD (xnodes,4, ' EMP ' +alltr (STR) (EMPLOYEE. emp_id,5)),;
Alltr (EMPLOYEE. last_name) + "" +alltr (EMPLOYEE. first_name), 3,4)
ENDIF
ENDscan
Xnodes. Expanded=. T. && Expand the node
ENDscan
Endwith

Here's a very important method: Add (Orelative,irelationship,ckey,ctext,iimage,iselectedimage), which is to add a node to the TreeView space.

Orelative: Optional parameter. Specifies an existing node object that is used in conjunction with the relationship parameter to set the relationship between the newly added control and the original control. Omitting this parameter indicates that the newly added node is a root-level node.
Irelationship: Optional parameter. It is used in conjunction with the relative parameter to set the relationship between the newly added control and the original control, by default the next sibling node.
Ckey: Optional parameter. Setting this parameter will make it easier to control the nodes of the TreeView, and in each of the TreeView controls, you cannot have two nodes using the same key. Key is a character-type attribute, but experience tells us not to use numbers as the starting character of the key.
Ctext: Required Parameters. The string to display in the node.
Iimage: Optional parameter. The node icon, which is derived from the image index of the ImageList space.
Iselectedimage: Optional parameter. The icon that is displayed when a node is selected, and its value is derived from the image index of the ImageList space.

Now let's take a look at the value of the Irelationship parameter:

0: The first one. The newly added node is placed in front of all sibling nodes of the Orelative node (sibling relationship).
1: The last one. The newly added node is placed at the end of all sibling nodes of the Orelative node (sibling relationship).
2: Next. The newly added node is placed behind the orelative node (sibling relationship).
3: The last one. The newly added node is placed in front of the orelative node (sibling relationship).
4: Child nodes. The newly added node is placed in the subordinate (parent-child relationship) of the Orelative node.

In the code above, we performed two scan loops. The outside loop is for the department table, and it is important here to record each of the departmental node objects and use it as a basis for generating employee nodes:

Xnodes=. NODES. ADD (,, ' DEP ' +alltr (STR DEPARTMENT. depart_id,5)),;
Alltr (DEPARTMENT. DESC), 1)

The internal loop is for the employee table, which writes employee information belonging to a departmental node under the departmental node as its child node:

. NODES. ADD (xnodes,4, ' EMP ' +alltr (STR) (EMPLOYEE. emp_id,5)),;
Alltr (EMPLOYEE. last_name) + "" +alltr (EMPLOYEE. first_name), 3,4)

As you can see, Xnodes is the "departmental" node generated by the outer loop, and as a "orelative" parameter, it is possible to set the "parent-child" relationship between the employee node and the departmental node.

In the code above, I've specified the "ckey" parameter for each node, you can omit it, but I don't recommend it--there's a lot of functionality behind it! I set the departmental node Ckey: "DEP" + department number; Employee node Ckey is set up like this: "EMP" + employee number.

What about more levels of nodes?

In this example, we have only two layers of nodes, there must be someone to ask: what about more levels of nodes? I think if there are more layers of nodes, the programming principle is the same as this example: Record the upper-level node object, used when producing the downlevel node.

Visual FoxPro loop nesting seems to be 6 layers, how "ingenious" the "breakthrough" this limit is left to everyone to think about. But I think: three or four-tier node in the general database application is enough ("accounting" generally have a 5, 6 level is enough)!

When to execute the Drawtree method

The code that produces the node is in the process of my form, so when is it going to be executed? I want to call it the most appropriate in the form's Init event, the reason for this is that the Init event of the form is later than the Init event for all controls, so that we can set the other controls in conjunction with the Drawtree when we call the Drawtree method without caring about whether or not the control has not been built.

So write the following code in the Init event of the form:

This.drawtree

There are a few more tricks.

Nodeclick Events

In the example we want to implement this feature: Select the Employee node, and the pointer to the table employee refers to the employee's record. Write the following code in the Nodeclick event of the TreeView control:

Lparameters node && accept a Nodes object
IF left (NODE. key,3 = ' DEP ' && does not handle if it is a departmental node!
Return
ELSE
LOCATE for Emp_id=val (NODE. Key,len (NODE. KEY)-3) && record positioning
ThisForm.Navigator1.setcontrol && in the following article explains
Thisform. REFRESH
ENDIF

This piece of code is very simple, I will not do a detailed explanation. The core problem here is: the application of the Ckey of the node!!!

Right-click the pop-up menu

Create a shortcut menu, as shown below:

The following is the menu corresponding to the MENU1.MPR program for your reference:

Para obj && get a reference to a Form object
DEFINE POPUP shortcut menu shortcut relative from Mrow (), MCOL ()
DEFINE BAR 1 of the shortcut menu PROMPT Refresh TreeView Control
On SELECTION BAR 1 of the shortcut menu;
Do _0DB019OWF;
In Locfile ("treeview\menu1", "MPX"); mpr| FXP; PRG "," WHERE is MENU1 ")

ACTIVATE Popup shortcut menu

PROCEDURE _0DB019OWF
Obj.treeview.nodes.clear && clean Up all nodes
Obj.drawtree && re-generating nodes

We then write the following code in the MouseDown event of the TreeView control:

Lparameters button, shift, X, y
If button=2 && OK right mouse button click
Do MENU1.MPR with Thisform
endif

Combine the TreeView into the program

As the saying goes, King. The TreeView is good, but it can't be commander! Our example describes the problem of combining TreeView with other controls.

In this interface, there is a "navigation bar" control that we have introduced, for more information, see the writing simple navigation bar of the article.

I think that on this interface, all the control prices basically formed three camps, only the coordination they completed the task. These three camps are:

TreeView Control
Navigation bar control
Bind-Shape Data display control

The harmony of the TreeView and the bound data display control is resolved in the Nodeclick event of the TreeView; navigation bar control and binding data display control coordination by the navigation bar control itself, we do not care!

So there are two issues in this case that we're going to talk about: The Nodeclick event of the TreeView moves the table pointer to the "available, unavailable" button for the navigation bar control, and the effect of the navigation bar control's movement on the table pointer on the TreeView.

The first question is simple, I considered similar problems when designing the navigation bar, and encapsulated the Setcontrol method with the function of "Automatically detect the table pointer and make sure each button is available and unavailable." So we just write in the Nodeclick event of the TreeView:

ThisForm.Navigator1.setcontrol

The second question is also not difficult to resolve by adding the following code to the Click event for each button of the navigation bar in the form:

Dodefault () && first executes the default navigation bar "class" code, complete the normal navigation function!
ThisForm.treeview.nodes (' EMP ' +alltr () STR (EMPLOYEE. emp_id,5)). selected=.t.
* or select the node through the ckey of the node!!!
ThisForm.treeview.setfocus

More information

This article describes the little fur of the TreeView control, and I hope you'll be satisfied. For more detailed information, please refer to the Microsoft Visual Basic 6.0 control Reference Controls reference manual published by Beijing Hope Electronic Publishing house (up and down, total 110 RMB, bookstore should have sold).

This is written by Microsoft, very authoritative, very detailed, I am definitely not selling for profit. We think you should have a handbook like the Visual FoxPro function, command manual, which is a must!