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

14 篇文章 0 订阅
6 篇文章 0 订阅

一、效果展示

二、使用介绍

(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

在React项目中使用Ant Design (antd) 库可以非常方便地实现标签页(Tabs)和表单(Form)组件。以下是实现这些功能的基本步骤和代码示例: 1. **实现Tabs标签页)**: 使用antd的`Tabs`组件,你可以快速创建一个标签页布局。你需要先导入`Tabs`组件,并在你的React组件中使用它。 ```jsx import { Tabs } from 'antd'; const { TabPane } = Tabs; class MyTabsComponent extends React.Component { render() { return ( <Tabs type="card"> <TabPane tab="Tab 1" key="1"> Content of Tab 1 </TabPane> <TabPane tab="Tab 2" key="2"> Content of Tab 2 </TabPane> </Tabs> ); } } ``` 2. **实现Form(表单)**: 对于表单,你需要使用antd的`Form`、`Input`等表单控件组件。创建一个表单首先需要导入`Form`组件,并设置表单的`initialValues`和`onFinish`事件处理函数。 ```jsx import { Form, Input, Button, message } from 'antd'; const { Item } = Form; class MyFormComponent extends React.Component { handleSubmit = (values) => { console.log('Received values of form: ', values); // 处理表单提交逻辑 message.success('Submit successfully!'); } render() { return ( <Form onFinish={this.handleSubmit}> <Item name="username" rules={[{ required: true, message: 'Please input your username!' }]}> <Input placeholder="Username" /> </Item> <Item name="password" rules={[{ required: true, message: 'Please input your password!' }]}> <Input.Password placeholder="Password" /> </Item> <Item> <Button type="primary" htmlType="submit"> Submit </Button> </Item> </Form> ); } } ``` 3. **表单提交**: 表单提交通常通过绑定`onFinish`事件来实现。在该事件处理函数中,你可以获取到用户输入的数据,并进行相应的逻辑处理,比如发送请求到服务器。 在上述示例中,`handleSubmit`方法会在表单提交时被调用,可以在这里添加你的提交逻辑。
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值