## 下拉选择 - select控件案例:单选、多选功能 - 采用3种保存方式:int单选型、varchar多选型、数据库关联型 #### 示例效果:路径/ht/member ![](https://img.kancloud.cn/da/d3/dad34c1697046b0e4b0853d43cd024b5_503x106.png) 数据设置 ~~~ <?php return [ 'type' => 'sql', '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表 ![](https://img.kancloud.cn/ba/dc/badc5a0ff48e501f9c39b3e0fcb34637_840x131.png) 生成的信息 ![](https://img.kancloud.cn/62/91/6291e4eb8ac9a55d6af85641dae28ba8_391x124.png) - member_hobby表 ![](https://img.kancloud.cn/39/2a/392a3473f742416b5b2443005953fbaa_876x82.png) 生成的信息 ![](https://img.kancloud.cn/7f/4b/7f4b306aabaf2e88ff8c1c03f636b20b_209x219.png) 点击:后台模块 > 下拉选择 ![](https://img.kancloud.cn/e8/38/e8389e2b9f312c893b5f95ffc9e28aa4_1206x848.gif) 开启'istop' => false和关闭对比:是否顶部为空选择,默认为空选择 未设置'istop' => false效果: ![](https://img.kancloud.cn/ce/90/ce90a8797534240f4c7adde3a012289b_878x516.png) 设置'istop' => false效果: ![](https://img.kancloud.cn/fc/e7/fce702c52d4b19b1d983091ea56dbce3_879x473.png) #### 各字段解释: - 字段hobby_not:表中并不存在该字段,在from中需指明表字段 - 字段hobby_1:因为hobby_1是int类型,所以编辑的时候自动转换成单选,并以数字保存到字段hobby_1中 ![](https://img.kancloud.cn/b8/8f/b88f0c59f401159327a8d8431dd8ecc5_1014x489.png) - 字段hobby_2和hobby_3:因为字段是字符串类型,所以保存为多个选择数据 - 字段hobby_4:表中不存在该字段,但对其他表进行了关联存储 #### 同时还支持 - 自定义数据 - radio、checkbox的随意切换 #### 示例效果:路径/ht/member/more ![](https://img.kancloud.cn/b8/e9/b8e9ff870d7320835249ca10a13a7f44_492x131.png) 数据设置 ~~~ <?php return [ 'type' => 'sql', '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 ] ]; ~~~ 点击:后台模块 > 下拉选择更多 ![](https://img.kancloud.cn/d1/63/d16333d449d4375f7185dbd0a4a44cd6_1089x649.gif) - 搜索功能:radio不转化,checkbox转化为selects模式搜索,避免占用页面空间大 ![](https://img.kancloud.cn/67/40/674004bfc2b6169b750f00b632784d2a_919x582.png)