laravel-admin form表单控件篇——apiSelect（api查询结果作为选项）

一、效果展示

 

二、使用说明 

（1）资源：apiSelect控件

（2）控件注册

下载资源后，放置到项目指定目录中（app/Admin/Extensions/Form），然后在app/Admin/bootstrap.php文件中注册

Form::extend('apiSelect', \App\Admin\Extensions\Form\ApiSelect\ApiSelect::class);

（3）控件使用说明

接下来可以像form表的的其他控件一样使用。

第一种：无默认选项，直接通过api查询。

$form->apiSelect('apply_id', '客户姓名')
            ->url(route('field.api_select'))
            ->attach([
                'type' => SelectLoanFieldController::IS_LOAN_FORM,
            ])->help('无默认选项');

该模式主要有两个要点：url()方法和attach()方法。url方法设置请求api ，attach方法设置请求附带的数据（参数attach的值）；

第二种：有默认选项（如果设置url则通过api查询，否则在默认选项中匹配关键词）。

$form->apiSelect('apply_id', '客户姓名')
            ->url(route('field.api_select'))
            ->attach([
                'type' => SelectLoanFieldController::IS_LOAN_FORM,
            ])
            ->options([
                'S001' => '孙丽华',
                'S002' => '邓超',
                'S003' => '郭敬明',
                'S004' => '王力宏',
                'S005' => '周杰伦',
                'S006' => '林俊杰',
                'S007' => '邓紫棋',
                'S008' => '黄晓明',
            ])->help('有默认选项');

该模式比第一种不同的是，通过options方法设置默认选项，并无其他差别。

第三种：启用默认选中功能（当选项中只有一个选项时，将默认选中这个选项）。

$form->apiSelect('apply_id', '客户姓名')
            ->url(route('field.api_select'))
            ->defaultSelect()
            ->attach([
                'type' => SelectLoanFieldController::IS_LOAN_FORM,
            ])->help('启用当查询选项中只有一个选项时，默认选中');

该模式比第一种不同的是，通过defaultSelect()方法启动了该功能。

第四种：多选功能。

 $form->apiSelect('apply_id', '客户姓名')
            ->url(route('field.api_select'))
            ->attach([
                'type' => SelectLoanFieldController::IS_LOAN_FORM,
            ])
            ->multiple()
            ->help('启用多选项');

该模式比第一种不同的是，通过multiple()方法启动了多选功能。

（4）事件监听设置

a、change事件 changed(javascriptFunction)，当值发生变化时触发

b、beforeUpdate事件  beforeUpdate(javascriptFunction)，当options发生变化时，刷新前触发

c、updated事件  updated(javascriptFunction)，当options发生变化时，刷新后触发

d、beforeClear事件 beforeClear(javascriptFunction)，当点击选项框右侧“x”号清空时，清空前触发

c、cleared事件 cleared(javascriptFunction)，当点击选项框右侧“x”号清空时，清空后触发

$form->apiSelect('apply_id', '客户姓名')
            ->url(route('field.api_select'))
            ->attach([
                'type' => SelectLoanFieldController::IS_LOAN_FORM,
            ])
            ->changed('function(data){  console.log("changed", data); }') // 值发生变化时触发
            ->beforeUpdate('function(data){ console.log("beforeUpdate", data); }') // 选项更新前触发
            ->updated('function(data){ console.log("updated", data); }') // 选项更新后触发
            ->beforeClear('function(data){ console.log("beforeClear", data); }') // 清空所有值前触发
            ->cleared('function(data){ console.log("cleared", data); }') // 清空所有值后触发
            ->help('无默认选项');

事件回调参数data内容为：

{
    period: "changed",
    options: {
        value1: text1,
        value2: text2,
        value3: text3
    },
    value: {
        value1: text1, 
    },
    apiResult: {},
    data: {
        _token: "laravel-admin的token值，由csrf_token()生成"
    },
    attach: {}, // 该内容由attach()方法设置
}

 

（5）api实现介绍。

api接收参数：

{
    q: "关键词",
    attach: {}, # 由attach()方法设置
    _token: "laravel-admin的token值，由csrf_token()生成"
}

api返回格式：

{
    value1: text1,
    value2: text2,
    value3: text3,
    value4: text4,
    value5: text5,
}

或者

{
    options: {
        value1: text1,
        value2: text2,
        value3: text3,
        value4: text4,
        value5: text5,
    },
    attach: {}
    ...
}

api返回的结果将通过参数的形式传递到事件回调中。

三、总结

以上为本次开发的控件的所有功能介绍，如有需要的可以下载apiSelect.rar资源，按照上述要求注册后即可正常使用。

开发环境：

Laravel框架： 5.5.44

Laravel-amidn： "~1.6",

php版本： 7.1