# 常用基础控件 [TOC] > **配置方式：在`“页面属性”`->`“控件类型”`中选择对应的控件类型**  ## 1. 下拉框 | 多选框 | 单选框 | 下拉多选 | 下拉搜索 > 字典用法：表单字段，通过配置系统字典或者表字典，实现下拉、Checkbox、Radio等效果。 > 支持模型： 系统字典 和表字典（通过数据库表的配置）——不支持popup > 注：下拉搜索控件只支持表字典（不支持popup）  ### 1.1 数据字典 配置字典code（对应系统字典表的 字典编码）如：bpm_status  字段code对应： 系统管理 -> 数据字典  演示：  ### 1.2 表字典  效果：实现通过表里面取数，下拉展示  ### 1.3 条件过滤 **支持自定义sql 增加查询条件 过滤表数据** 配置方式，如图所示在字典table上接表名后配置where[**where 一定要小写**] 条件：  ## 2. 日期控件 | 时间控件 > 日期控件分为年月日和年月日时分秒控件 > `“年月日”`的数据库类型对应`“date”`； `“年月日 时分秒”`的数据库类型对应`“datetime”` `“时间”`的数据库类型对应`“String”`  ## 3. Popup控件 _popup选择框的使用依赖于Online报表_ （1）创建一个Online报表来提供弹出数据列表的数据集，如`“report_user”`  （2）选择控件类型为popup弹出框 （3）字典Table、字典Code、字典Text项填写对应的Online报表信息 ``` 字典Table: 填写Online报表编码，如：“report_user” 字典Code: 填写Online报表中的字段名（多个逗号隔开）如：“username,realname” 字典Text: 填写表单中字段名 （多个逗号隔开）如：“popup,popback” ```  （4）展示效果  ## 4. 用户选择 | 部门选择 ### 4.1 配置 页面属性配置控件类型 选择`“用户选择”`或`“部门选择”` ### 4.2 高级用法-动态存储/展示字段 - 使用场景 部门组件默认存储部门ID,展示部门名称， 用户组件默认存储用户账号，展示用户名称，现支持动态配置，指定存储/展示的字段名。 - 配置 页面属性 -> 更多配置 点击高级配置，可直接选择是否多选、存储字段、展示字段  - 备注：上述字段为部门/用户实体的字段名或数据库字段名都可以，可以只配置一个，配置的存储字段需保证数据唯一性。 **目前只支持单表** ## 5. 分类字典树 > 1.分类字典树控件是基于 系统表`“分类字典”`设计的，为online提供一个树控件，用于选择分类字典的数据。 2.分类字典的数据维护见菜单【系统管理】-->【分类字典】 ### 5.1 配置方法一 > 只保存ID，列表及表单回显数据需要系统翻译，适用于小数据量，可保证当前表数据及分类字典表数据一致。 - online表单配置:  *此方案需要配置字典code的值，该值实际是分类字典的**类型编码**，此处配置成B01即表示当前这个树控件，只加载B01节点以下的数据* - 演示：  ### 5.2 配置方法二 > 保存ID和text ，列表及表单展示text，适用于大数据量，但是若分类字典表数据text被修改，当前表则难以保证数据一致性 - 页面属性-配置控件类型  - 校验字段-配置字典  备注： 1、数据库属性配置两个字段，字典code存储树id，字典Text存储树text 2、页面属性配置成分类字典树，列表表单显示，text为文本框，列表表单不显示 3、字典code配置成分类字典的**类型编码**，同一；字典text配置存储树text字段的名称 - 演示，  ## 6. 自定义树类型 * 1.页面属性-配置控件类型  * 2.校验字段-配置字典  备注： 1、字典table 填写树控件对应的表名 { 例如：`sys_category` } 2、字典code填写树控件根节点的父ID的值，填`“0”`则为全部显示 3、字典text填写4个表字段的名称，以逗号隔开，依次是：**ID列,父ID列,显示列,是否有子节点列** { 例如：`id,pid,name,has_child`} > 字段顺序解释说明： > a. ID列和PID列用于记录数据的父子关系，且ID列是该树控件最终保存到数据库的值 > b. 显示列表示树控件展示的数据， > c. 是否有子节点列是树形表需要的特例列，详细看 online表单树形表单开发 ，该列为字符串类型系统默认1为是 0为否，不支持其他数据格式。 * 3.演示  ## 7. 下拉联动组件 > 例如：省市区的三级联动下拉选择框 ### 7.1 表关系 **首先**，联动组件的数据来源需要有相应的层级关系 ，如 ：新建一张表`sys_test_link`，数据如下： | id | pid | name | | --- | --- | --- | | 1 | | 中国 | | 2 | 1 | 山东省 | | 3 | 2 | 济南市 | | 4 | 3 | 历城区 | | 5 | 3 | 长青区 | | 6 | 2 | 青岛市 | | 7 | 1 | 安徽省 | | 8 | 7 | 合肥市 | | 9 | 8 | 包河区 | | 10 | 8 | 庐阳区 | | 11 | 7 | 黄山市 | | ... | | | ### 7.2 online配置 新增字段— province，city，area 省-province字段上配置联动组件，其他配置文本框即可  省-province字段的校验字段 ----> 字典table --->配置json，格式如下： ``` { table: "sys_test_link", txt: "name", key: "id", linkField: "city,area", idField: "id", pidField: "pid", condition:"pid = '1'" } ```  配置描述： | 名称 | 描述 | | --- | --- | | table | 数据库表名 | | txt | 控件显示的值 | | key | 控件需要存储的值 | | linkField | 级联组件的其他字段名称，上例配置了市，区字段名 | | idField | 数据的标识 | | pidField | 上下级关系的表示字段 | | condition | 联动组件 第一个下拉框的数据查询条件 | 测试效果：  ## 8. 开关控件 > 用于场景：只有两个选项且只能选一个 默认选项值： Y/N (即数据库字段存储为Y或N) 配置：  配置注意： - 控件类型选择：开关 - 扩展参数：如果不想使用默认的选项值(Y/N)保存到数据库，支持自定义,配置一个数组即可, 例如：配置数组 `[1,2]` 则第一个参数(1)对应是，第二个参数(2) 对应否 那么保存在数据库的字段值为1/2 列表显示：  单表/主表/一对一子表 表单效果展示：  一对多子表 表单效果展示：（勾选即Y）