Jabdp common controls

Whether the application is good or not, the user experience is very important. Jabdp has integrated rich UI components and bound them with fields.

image

1. Drop-down box (combobox)

image

The drop-down box is the most commonly used control. How is it implemented?

image

In the field properties, edit the type and select [comboBox], then [Data source settings], there are three options for data source settings, namely fixed value, sql statement, and module.

Option 1: The data source is a fixed value

The data source is relatively simple. The field key is the actual value stored in the database, and the caption is the value displayed in the drop-down box. For example, the product type is seasoning, and it is 1 when stored in the database. This makes it easy to use and maintain.

image

Save the update, the drop-down box can be generated.

Although the data source is a fixed value, although the configuration is simple, it lacks flexibility and is more suitable for situations where there are not many options.

Option 2: The data source is a module

When there are many options, other modules or dictionary tables can be referenced as data sources, which is easy to modify and maintain.

This is an example of the data dictionary created in the previous chapter, using it as the data source.

image

image

Option 3: The data source is SQL statement

Select [SQL Statement] > [SQL Edit] > [Add]

image

image.png

image.png

image

Save the update, the drop-down box can be generated.

2. Drop-down query box (ComboBoxSearch)

 When there is a lot of data in the drop-down box, it is more troublesome to find what you want to choose.

image.png

Change the edit type of the field from ComboBox to ComBoxSearch, save the update, and you can implement the fuzzy query of the drop-down box.

image

image

 image

3. Multiple selection box

Check [Allow multiple selections] and save the update to turn it into a multiple selection box.

image

image.png

4, radio / check box (CheckBox)

Select [CheckBox] for the edit property of the field, and [Data Source Settings] is the same as the setting method of the drop-down box. [Allow multiple selection] Check it to turn it into a checkbox.

image

achieve effect

image

image

5. Date control (DataBox)

The field type is configured as [Time], and the edit type is selected as [DataBox].image.png

image.png

{{o.name}}
{{m.name}}

Guess you like

Origin http://10.200.1.11:23101/article/api/json?id=324033594&siteId=291194637