I. Overview
1.1 Application Scenarios
1.1.1 Data Entry Application
In the data entry report, you can use this widget to select data with a multi-layer tree structure, and enter the reported data, as shown in the following figure:
1.1.2 Parameter Application
In the parameter pane, you can use this widget to select data with a multi-layer tree structure, and enter query parameters, as shown in the following figure:
1.2 Add Widget
1.2.1 Data Entry Application
After selecting the cell, click the widget settings in the property pane on the right, and select the widget drop-down to select the [View Tree] widget, as shown in the following figure:
1.2.2 Parameter Application
Drag the View Tree widget in the parameter pane widget toolbar into the parameter pane, as shown in the following figure:
2. Widget Introduction
2.1 Widget Attributes
2.1.1 Data Entry Application
The Attribute setting interface of the View Tree is shown in the figure below:
The detailed description of each attribute setting item is as follows:
Widget Name: Usually used in combination with parameters, the widget can be obtained by the widget name, and the widget value can be obtained and passed to the corresponding parameter; or the widget can be obtained by the widget name and the attributes of the widget can be set through JS.
Enabled: After checking, the text information can be entered normally when filling in the report; if it is not checked, the widget will be grayed out and not editable when filling in the report.
Visible: When checked, the widget will be visible when reporting; if it is not checked, the widget will not be visible when reporting.
Build Tree: Light gray watermark text will be displayed in the widget when filling in the report to remind the user of the information that needs to be entered. When the widget edit area is clicked, the watermark disappears.
Remove Duplicated Data: When checked, the same items in the view tree will be merged; unchecked, the duplicate options in the view tree will be retained.
Multiselect: After checking, multiple options in the view tree can be selected when filling in the report; if not checked, only one option in the view tree can be selected when filling in the report.
Async Load: Also called non-blocking loading, the browser will continue to process subsequent pages while downloading and executing JS. After checking, all sub-nodes are not expanded by default; unchecked, all sub-nodes are expanded by default.
Only return leaf node: After checking, when the parent node is checked, the child nodes will be automatically checked, and the result will only return the terminal node data; unchecked, when the parent node is checked, the child nodes will not be automatically checked, and the result will only be returned to the parent node data.
Returns full hierarchical path: After checking, the result returns to the full level path; if it is not checked, the result returns to the current level path.
Allow Null: After checking, the widget is allowed to be a null value; if it is not checked, it will prompt when filling in the checksum and submitting: It cannot be empty.
Error Tip: The user can customize the prompt message that is not allowed to be empty.
2.1.2 Parameter Application
The Attribute setting interface of the View Tree is shown in the figure below:
The detailed description of each attribute setting item is as follows:
Widget Name: Usually used in combination with parameters. The widget can be obtained through the widget name, and the widget value is obtained and passed to the corresponding parameter; or the widget attribute is set through JS after the widget is obtained by the widget name.
Enabled: After checking, the text information can be entered normally during preview; if it is not checked, the widget will be grayed out during preview and cannot be edited.
Visible: When checked, the widget will be visible during preview; if it is not checked, the widget will not be visible during preview.
Label name: The function of the label name is to make up for the unsupported problem of the label widget in the parameter interface.
Widget Value: The value displayed by the widget by default.
Data Dictionary: Light gray watermark text will be displayed in the widget to remind the user of the information that needs to be input. When the edit area of the widget is clicked, the watermark disappears.
Font Size: Enter the size of the font in the text box.
Multiselect: After checking, you can select multiple options in the View Tree when filling in the report; unchecking, only one option in the View Tree can be selected when filling in the report.
Async Load: Also called non-blocking loading, the browser will continue to process subsequent pages while downloading and executing JS. After checking, all sub-nodes are not expanded by default; unchecked, all sub-nodes are expanded by default.
Note: When the construction mode is automatic construction, no matter whether the Async Load is checked or not, the child nodes will not be expanded.
Return Leaf : After checking, when the parent node is checked, the child nodes will be automatically checked, and the result will only return the terminal node data; unchecked, when the parent node is checked, the child nodes will not be automatically checked, and the result will only be returned to the parent node data.
Return Path: After checking, the result returns to the full level path; if it is not checked, the result returns to the current level path.
Allow Null: After checking, the widget is allowed to be empty; if it is not checked, it will tip when querying: Cannot be empty.
Error Tip: The user can customize the prompt message that is not allowed to be empty.
Allow Edit: The widget input value needs to comply with the rules. If it does not comply with the rules, an error message will be displayed, which will be described in detail later.
Allow Custom Data: After checking, the value manually entered by the user may not be included in the View Tree option; if it is not checked, the value manually entered by the user must be the value in the View Tree option, if the entered value does not belong to the View Tree option , When querying, it will tip: The value is not in the View Tree list.
Widget Location: Adjust the location of the widget in the parameter pane.
Widget Size: Adjust the size of the widget.
2.2 Check
2.2.1 Allow Null
After checking, you can not select any value; if you do not check, you can customize the Error Tip when you do not select any value. As shown below:
2.2.2 Allow Edit
After checking, the edit box of the View Tree allows direct input of values and implements fuzzy query, which is mainly used for quick search in the View Tree. As shown below:
2.2.3 Allow Custom Data
After checking, it is allowed to manually enter the data in the View Tree, and the corresponding data does not have to match in the drop-down list; if it is not checked, manual input in the View Tree is not allowed, only selection in the list. As shown below:
2.3 Advanced
2.3.1 Data Dictionary
1) Automatic Construction
Automatic Construction can automatically construct a view tree based on data, without defining data layer by layer, but it must be constructed using a tree dataset.
2) Hierarchical Construction
Not all data can automatically build a view tree, so it needs to be constructed hierarchically.
Level 1: Define the actual value and display value of the drop-down box through Data Dictionary.
Level 2: Filter based on the data of level 1, which needs to be defined as a data set, and then the columns defined by the data set are returned through data query. The dataset is defined as:
SELECT [field] FROM [table name] WHERE [Level 1 field] ='${layer1}'
Note: layer1 means to take the value of the level 1 node, if it is called in level 3, it is the SELECT field FROM table name WHERE level 2 field ='${layer2}' and so on.
2.3.2 Multiselect
When checked, it is a multi-select view tree; if it is not checked, it is a single-select view tree, as shown in the figure below:
2.3.3 Async Load
Check to use Async Load. Only the data of the parent node will be loaded for the first time in the view tree. Only when the plus sign in front of the parent node is clicked will the data of the corresponding child node be retrieved from the interaction with the database again. It is suitable for situations with large amounts of data; unchecked If selected, it means that the data in the view tree is retrieved all at once, which is suitable for small data volumes. As shown below:
2.3.4 Returned Leaf
Checked, the result returns to the leaf node, that is, all the data of the last layer of the node is returned in the view tree text box; unchecked, it means that what is selected will be returned, as shown in the following table:
Option | Check Return Leaf | Uncheck Return Leaf |
|---|---|---|
| Select a | Return：a1,a2,a3 | Return：a |
Note: The result returned leaf node only works for the multi-select view tree, and the result returned leaf node returns array type data.
2.3.5 Return Path
Note: The result return complete hierarchical path is generally used in conjunction with the result return leaf node.
1) The result does not return the full hierarchical path
The view tree is a hierarchical widget. Check Return Leaf, uncheck Return Path, the view tree selected value, the queried view tree value returns all the leaf node data, and it is not complete The hierarchical path value is the actual value of the leaf node, as shown in the following figure:
If uncheck Return Leaf, and uncheck Return Path. The view tree query value is the actual value of the selected node, and no leaf node is returned, and it is not the full level path value. What is selected will return what is shown in the following figure:
2）The result returns the full hierarchical path
Check Return Path, and check Return Leaf. The value returned by the view tree is the full path value of all leaf nodes, not the actual value of the leaf node, as shown in the following figure:
Check Return Path, uncheck Return Leaf, the value returned by the view tree is the full path value of the selected item, not the path of the leaf node, as shown in the following figure:
2.4 Prioritize Performance
When the view tree is constructed hierarchically, it will look for child nodes, resulting in slow performance. The view tree will find its child nodes in order to build the tree. When the "Basic Layered Build" is selected, the tree can be constructed directly according to the set level, so performance priority options are provided, as shown in the following figure:
Note: Performance priority is not selected by default.
Note: When using this option, since no child nodes are found, if there are no child nodes in the hierarchy directory, it is unknown in advance. It will still be "+" when it is displayed. Of course, there is no data when it is clicked.
2.5 Difference Between View Tree and Drop-down Tree
The definition method of the View Tree and the Drop-down Tree is the same, the difference is that the effect displayed on the B/S side is different, as shown in the following figure:
Note 1: The last value type returned by the view tree is an array. If you want to get the value through JS, you don't need to split with the split function, just use index directly. For details on how to get the value of a control, please see: Reference Widget and Widget Method List
Note 2: For the usage example of the view tree, please see: View Tree Hyperlink
