EasyAdmin8-Laravel 列表自定义 下拉框

Question

EasyAdmin8-Laravel 列表自定义 下拉框
采用EasyAdmin8-Laravel 做管理端，想扩展根据 做一个下拉框，比如根据用户表的 分类 id 筛选列表的分类，
也就是 怎么把分类 列表改为后端返回的

             {
                        field: 'status',
                        title: '状态',
                        width: 85,
                        selectList: {0: '禁用', 1: '启用'},
                        templet: ea.table.switch
                    },

如上，状态筛选下拉，我想把这个 selectList: {0: '禁用', 1: '启用'},改为后端返回的，不是这样在js写死的数据

Answer 1

下午好🌅🌅🌅
本答案参考ChatGPT-3.5

解决方案：

1. 在EasyAdmin8-Laravel中，可以使用JavaScript的异步请求将下拉框的选项数据从后端获取。
2. 在JavaScript中定义一个函数，使用jQuery的$.ajax()方法发送异步请求获取数据。
3. 将数据解析成一个对象，并将这个对象赋值给下拉框的selectList属性。

修改代码：

1. 将原来的下拉框的selectList属性删除。

2. 在JavaScript中添加以下代码：

   // 修改字段下拉框选项数据
   ea.table.on('initTable', function (elem) {
       var data = {
           // 这里填写后端请求下拉选项数据的接口地址
           url: '/getCustomSelectData',
           // 这里可以传递参数到后端接口
           data: {},
           // 请求方式，一般使用GET
           type: 'GET', 
           // 定义数据类型为JSON
           dataType: 'JSON',
           // 成功后执行
           success: function(res) {
               // 将后端返回的数据解析成下拉选项数据
               var selectList = res.data.reduce((hash, item) => (hash[item.value] = item.label, hash), {});
               elem.config.cols.some(col => col.field === 'myCustomField' && (col.selectList = selectList, true));
           }
       }
       $.ajax(data);
   });

注：上述代码中的 "myCustomField" 需要换成你需要修改的下拉框的对应的字段名。

1. 在后端编写接口方法，返回下拉列表的选项数据。

示例代码：

public function getCustomSelectData()
{
    // 从数据库中获取下拉列表的选项数据
    $data = DB::table('categories')->select('id', 'name')->get();
    $selectData = [];
    foreach($data as $item) {
        $selectData[] = [
            'value' => $item->id,
            'label' => $item->name
        ];
    }

    // 构造返回结果
    $result = [
        'code' => 200,
        'data' => $selectData,
    ];
    return response()->json($result);
}

上述代码中的 'categories' 需要替换成你的数据库中的表名，'id' 和 'name' 是下拉选项数据的值和标签属性名称，需要根据实际情况修改。

注： 用以上方式使得下拉框的选项数据从后端获取，从而实现根据分类id进行列表筛选。