## 下拉选择
- select控件案例:单选、多选功能
- 采用3种保存方式:int单选型、varchar多选型、数据库关联型
#### 示例效果:路径/ht/member
![](/static/plugins/tphp/backstage/example/list_select/member.png)
数据设置
```
<?php
return [
'type' => 'sql',
'method' => 'list',
'config' => [
'table' => 'member'
],
];
```
列表设置
```
<?php
return [
'field' => [
'id' => [
'width' => 50,
'fixed' => true
],
'name' => [
'width' => 100,
'fixed' => true
],
'hobby_not' => [
'name' => '无字段效果',
'type' => 'selects',
'from' => [
'hobby',
['id', 'hobby_1'], // 必须指定member中的某个字段
'name'
],
'search' => true
],
'hobby_1' => [
'type' => 'selects', // 因为hobby_1是int类型,所以编辑效果会自动转化为 'type' => 'select'
'from' => [
'hobby', // 等同于: ['hobby', 'demo'], 表示:demo数据源配置中的hoby表
'id', // 等同于: ['id', 'hobby_1'], 表示:hobby表对应的id字段=member表对应的hobby_1字段
'name' //显示hobby表中的name字段
],
'order' => true,
'search' => true
// 'istop' => false // 是否顶部选择为空选择
],
'hobby_2' => [
'type' => 'selects',
'from' => [
'hobby',
'id',
'name'
],
'order' => true,
'search' => true
],
'hobby_3' => [
'type' => 'selects',
'from' => [
'hobby',
'id',
'name'
],
'order' => true,
'search' => true
],
'hobby_4' => [
'name' => '兴趣爱好4',
'type' => 'selects',
'from' => [
'hobby',
'id',
'name',
// 如果出现如下配置,则 hobby_4 不是任何表中的字段名称
[
// 或者: ['member_hobby', 'demo'], 表示:信息存储于表member_hobby的member_id字段和hobby_id中
'member_hobby',
['id', 'member_id'], //表示member表中的id字段对应member_hobby表中的member_id字段
['id', 'hobby_id'], //表示hobby表中的id字段对应member_hobby表中的hobby_id字段
]
],
'order' => true,
'search' => true
],
],
'handle' => [
'name',
'hobby_1',
'hobby_2',
'hobby_3' => [
// 也可以是:'type' => 'select' 单选框,不填时默认以field设置为准
'type' => 'selects'
],
'hobby_4'
],
'handleinfo' => [
'ismax' => true
],
'is' => [
'add' => true,
'delete' => true
]
];
```
#### 数据库设置
- member表
![](/static/plugins/tphp/backstage/example/list_select/member_table.png)
生成的信息
![](/static/plugins/tphp/backstage/example/list_select/member_create.png)
- member_hobby表
![](/static/plugins/tphp/backstage/example/list_select/member_hobby.png)
生成的信息
![](/static/plugins/tphp/backstage/example/list_select/member_hobby_create.png)
点击:后台模块 > 下拉选择
![](/static/plugins/tphp/backstage/example/list_select/select.gif)
开启'istop' => false和关闭对比:是否顶部为空选择,默认为空选择
未设置'istop' => false效果:
![](/static/plugins/tphp/backstage/example/list_select/select1.png)
设置'istop' => false效果:
![](/static/plugins/tphp/backstage/example/list_select/select2.png)
#### 各字段解释:
- 字段hobby_not:表中并不存在该字段,在from中需指明表字段
- 字段hobby_1:因为hobby_1是int类型,所以编辑的时候自动转换成单选,并以数字保存到字段hobby_1中
![](/static/plugins/tphp/backstage/example/list_select/select3.png)
- 字段hobby_2和hobby_3:因为字段是字符串类型,所以保存为多个选择数据
- 字段hobby_4:表中不存在该字段,但对其他表进行了关联存储
#### 同时还支持
- 自定义数据
- radio、checkbox的随意切换
#### 示例效果:路径/ht/member/more
![](/static/plugins/tphp/backstage/example/list_select/menu_select.png)
数据设置
```
<?php
return [
'type' => 'sql',
'method' => 'list',
'config' => [
'table' => 'member'
],
];
```
列表设置
```
<?php
return [
'field' => [
'id' => [
'width' => 50,
'fixed' => true
],
'name' => [
'width' => 100,
'fixed' => true
],
'hobby_1' => [
'type' => 'radio', // 因为hobby_1是int类型,所以编辑效果会自动转化为 'type' => 'select'
'from' => [
'hobby', // 等同于: ['hobby', 'demo'], 表示:demo数据源配置中的hoby表
'id', // 等同于: ['id', 'hobby_1'], 表示:hobby表对应的id字段=member表对应的hobby_1字段
'name' //显示hobby表中的name字段
],
'order' => true,
'search' => true
],
'hobby_2' => [
'type' => 'checkbox',
'from' => [
'hobby',
'id',
'name'
],
'order' => true,
'search' => true
],
'hobby_3' => [
'type' => 'checkbox',
// 可以不使用from,直接赋值即可,同时支持checkbox、radio、select和selects
'list' => [
'yes' => '是',
'no' => '否',
'other' => '自定义',
3 => '变了哈'
],
'order' => true,
'search' => true
],
'hobby_4' => [
'name' => '兴趣爱好4',
'type' => 'checkbox',
'from' => [
'hobby',
'id',
'name',
// 如果出现如下配置,则 hobby_4 不是任何表中的字段名称
[
// 或者: ['member_hobby', 'demo'], 表示:信息存储于表member_hobby的member_id字段和hobby_id中
'member_hobby',
['id', 'member_id'], // 表示member表中的id字段对应member_hobby表中的member_id字段
['id', 'hobby_id'], // 表示hobby表中的id字段对应member_hobby表中的hobby_id字段
]
],
'order' => true,
'search' => true
],
],
'handle' => [
'name',
'hobby_1',
'hobby_2',
'hobby_3',
'hobby_4'
],
'handleinfo' => [
'ismax' => true
],
'is' => [
'add' => true,
'delete' => true
]
];
```
点击:后台模块 > 下拉选择更多
![](/static/plugins/tphp/backstage/example/list_select/select_search.gif)
- 搜索功能:radio不转化,checkbox转化为selects模式搜索,避免占用页面空间大
![](/static/plugins/tphp/backstage/example/list_select/remark.png)