laravel-admin form表单控件篇——tabs标签控件和checkboxTree树状复选框控件

一、效果展示

二、使用介绍

（1）资源下载：tabs控件 和 checkboxTree控件

（2）控件注册

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

// 自定义Tab切换组件（注意：不可注册tab，因为form表单本身已存在tab这个控件）
Form::extend('tabs', \App\Admin\Extensions\Form\Tabs\Tabs::class);
// 自定义树状复选框组件
Form::extend('checkboxTree', \App\Admin\Extensions\Form\CheckboxTree\CheckboxTree::class);

（3）控件使用介绍以及example代码

## Example Code

$form->tabs('页面与功能权限', function (Form $form) use ($permission, $roles) {
    $form->column(1 / 2, function (Form $form) use ($permission, $roles) {
        $form->checkboxTree('permission_id', '页面与功能权限')
             ->options($optionsArr)
             ->disableLabel() // 隐藏左边的label
             ->default($defaultArr) // 设置默认值
//             ->disabled() // 禁用复选框
//             ->hideCheckBox() // 隐藏复选框
             ->spreadChecked() // 展开选中的选项
//             ->spread() // 全部展开
             ->onReady('function(treeObj, data, elementId){
                 console.log(treeObj, data, elementId);       
             }')  // 实例化控件js后执行（注意：该参数为js闭包函数）
             ->onChange('function(val, name, text, checked){
                  console.log(111, val, name, text,checked);
              }');   // 复选框值发生变化时触发（注意：该参数为js闭包函数）
    });
})->addTab('数据范围', function (Form $form) use ($id, $roles) {
    $form->column(1 / 2, function (Form $form) use ($id, $roles) {
         $form->checkboxTree('org_code', '数据范围')
              ->options($optionsArr)
              ->disableLabel()
              ->default($defaultArr)
              ->spreadChecked();
     });
})->max('100%', '490px')

（4）checkboxTree控件方法、参数介绍

onChange($jsCallback)： 复选框值发生变化时触发；

onReady($jsCallback)： 控件js加载完成后触发；

spread($spread = true)：展开全部选项；

spreadChecked($spreadChecked = true)：展开已勾选的选项;

hideCheckBox($hideCheckBox = true)：隐藏复选框；

disabled($disabled = true)：禁用复选框功能；

disableLabel($hideCheckBox = true)：隐藏label文本；

default($defaultArr)：$defaultArr是一个一维数组。例如：["DG01", "DG02"]；

options($optionsArr)： 设置复选框选项，参数$optionsArr格式如下;

[
    'text'  => '全部公司',
    'value' => '-1',
    'pid'   => null,
    'id'    => null,
    'sub'   => [
        [
            'text'  => '东莞公司',
            'value' => 'DG01',
            'pid'   => 0,
            'id'    => 1,
            'sub'   => [
                [
                    'text'  => '总裁办',
                    'value' => 'DP00',
                    'pid'   => 1,
                    'id'    => 2,
                    'sub'   => [
                        [
                            'text'  => '总裁办1',
                            'value' => 'DP01',
                            'pid'   => 2,
                            'id'    => 3,
                            'sub'   => []
                        ], [
                            'text'  => '总裁办2',
                            'value' => 'DP02',
                            'pid'   => 2,
                            'id'    => 4,
                            'sub'   => []
                        ]
                    ]
                ], [
                    'text'  => '人事部',
                    'value' => 'RC00',
                    'pid'   => 1,
                    'id'    => 5,
                    'sub'   => []
                ]
            ]
        ], [
            'text'  => '深圳公司',
            'value' => 'DG02',
            'pid'   => 0,
            'id'    => 6,
            'sub'   => []
        ]
    ]
]

三、总结

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

开发环境：

Laravel框架： 5.5.44

Laravel-amidn： "~1.6",

php版本： 7.1

gitee创库地址：https://gitee.com/wenruns/laravel-service.git