abbotton/dcat-infinity-select

基于Dcat Admin开发的无限级联动Select组件，主要解决不确定层级的树形数据的操作问题。

v1.0.0 2021-07-26 07:49 UTC

Requires

• php: >=7.1.0
• dcat/laravel-admin: ~2.0

MIT

• Abbotton

• extension
• dcat-admin

README

如果感觉好用，还请给个Star鼓励一下，谢谢 🍻 。

该插件是 Dcat Admin 的插件，安装方式遵循Dcat Admin官方文档。

界面展示

实现原理

该组件继承自Dcat\Admin\Form\Field\Select类，兼容原组件的属性和方法，并新增了一个list()方法用来在编辑时设定创建时生成的有序链表。

1. 页面初次渲染成功后，会调用option()方法中设定的接口地址，取得顶层数据，并实例化select2前端组件；
2. 监听select2前端组件的change事件，在选择项发生变动时通过向接口传入已选择项的值来获取下级数据，并生成新的DOM；
3. 监听select2前端组件的select2:unselected事件，在取消选择某一项的时候，修改页面DOM并处理一些其他的业务逻辑；

安装

composer安装

composer require abbotton/dcat-infinity-select

应用商店安装

等待Dcat Admin 上商店 

使用

表单：

// app/Admin/Controllers/ProductController.php

protected function form()
{
    return Form::make(new Product(), function (Form $form) {
        /**
         * 重要的事情说三遍！ 
         * 必须调用`listName()`方法设定有序链表的name值，否则报错！
         * 必须调用`listName()`方法设定有序链表的name值，否则报错！ 
         * 必须调用`listName()`方法设定有序链表的name值，否则报错！ 
         */
        // 创建时.
        $form->infinitySelect('category', '无限联动')->listName('category_list')->options(url('foo/bar'));
        // 编辑时.
        $form->infinitySelect('category', '无限联动')->listName('category_list')->options(url('foo/bar'))->list('1,2,6')->value(6);
        // 获取提交的数据.
        $form->saving(function (Form $form) {
            // 获取最终选择的一项
            $category = $form->input('category');
            // 获取整个有序链表
            $categoryList = $form->input('category_list');
        });
    });
}

路由：

Route::get('foo/bar', [\App\Http\Controllers\SomeController::class, 'someMethod']);

接口：

public function someMethod(Request $request)
{
    $key = $request->get('q', 0);
    
    return Category::where('pid', $key)->get(['id', DB::raw('name as text')]);
}

接口返回值必须满足如下数据结构:

[
    {
        "id": 9,
        "text": "xxx"
    },
    {
        "id": 21,
        "text": "xxx"
    }
]

License

MIT