【备忘】fastadmin下拉联动效果实现

文章背景

为什么要写这个，因为它耗费了我2个小时的精力，差点无法准时下班！得记下来。

经历

甲方要求加个下拉联动的效果，这不过分，我开始在fastadmin上找文档，看下拉联动怎么做的，找了十几分钟，用文档提供的方法去尝试，都以失败告终，我只能说fastadmin官方的文档写得真的“精简”。

再次吐槽一下，fastadmin框架不适合新手开发者！！！

解决思路

1. 获取第一个下拉的值
2. Ajax异步去后台查询这个值的下属数据（关联数据）
3. 设置第2个下拉框(input class=SelectPage的插件)的数据集
4. 刷新SelectPage第2个插件

思路很简单，实操不一定，所有技术都是熟悉之后才觉得简单！

代码解析

//代码地址参考：D:\xxx\projects\performance\public\assets\js\backend\fundfileamount.js
//用fastadmin的都看得懂这个地址


//这里只剪切关键部分代码
add: function () { //此行对应的是我的新增界面，其它界面道理一样

    //这里是监控第1个下拉变动事件
    $("#c-users_id").data("eSelect", function(){

        //监控到的后续操作
        let users_id = $("#c-users_id").val();

        //异步查询第2个下拉的数据集
        $.post('Fundfileamount/getDepartment',{users_id:users_id},function (res) {
            //设置SelectPage数据
            $('#c-responsibledepartment_id').selectPageData(res);//这是第2个下拉
            //刷新SelectPage
            $('#c-responsibledepartment_id').selectPageRefresh();
        },'json');
    });

    //这里必须在最后，否则无效！！！
    Controller.api.bindevent();
},

后台代码

    /**
     * desc：查询第2个下拉框的数据集
     */
    function getDepartment(){
        $user_id = input('users_id');
        $list = Db::table(fa_responsibledepartment)
            ->where('users_id',$user_id)
            ->select();
        return json($list);//这里必须返回json数据
    }

最后还是感谢fastadmin提供的框架，优点是加速了开发进程，但是缺点也很明显，出的问题也能消耗非常多的时间，这样一来，优势并不明显。

END