fastadmin fieldlist selectpage 动态自定义查询参数

        本文主要解决fastadmin框架中键值组件(Fieldlist)动态自定义动态下拉(SelectPage)组件的动态传参问题。

        需求：在Fieldlist中根据分类查询配件

        根据需求，首先键值组件(Fieldlist)动态添加动态下拉(SelectPage)组件，这时我们需要对新增的展示项绑定事件，我们可以在JS中通过监听事件来给新增的元素绑定事件，这种情况常用于我们自定义列表中有表单组件，如日期选择、上传按钮、动态下拉等情况下都可以同理使用。

$(document).on("fa.event.appendfieldlist", "#add-form .btn-append", function (e, obj) {
    // 事件绑定和组件渲染
    Form.events.selectpage(obj);
});

这时候，我们动态添加的SelectPage组件可以正常使用的了，然后我需要对selectPage动态传参(实现联动查询)，如题：我需要根据分类查询分类所属的配件。我就需要对data-params(自定义扩展参数)进行动态设置了，官方文档给出的解决方案是，在JS中将data-params添加一个function处理即可，请在表单初始化Form.api.bindevent之前使用，例如传递动态选择的类型

$("#c-name").data("params", function (obj) {
    return {custom: {type: $("#c-type").val()}};
});

然而，在Fieldlist中，我们的SelectPage的ID是动态分配的，就没办法一个个去进行配置，这时候我们就需要用到官方文档中的事件监听了，可以直接监听文本框的change事件即可，如：

$(document).on("change", "#c-title", function(){
    //后续操作
});

也可使用

$("#c-title").data("eSelect", function(){
    //后续操作
});

来实现，注意以上代码需要放在元素初始化Form.api.bindevent之前。

以上，我们在js文件api下新增一个，通过监听事件，把配件的扩展参数进行动态分配，

第一个我想到的就是，按官方文档动态绑定扩展参数

fieldlistBind: function () {
    $(document).on(
        "fa.event.appendfieldlist",
        ".btn-append",
        function (e, el) {// e:事件对象 el:当前行对象
            $(".selectpage", el).selectPage({
                eSelect: function (data, self) {
                    // data 为当前选中列表项的接口数据对象
                    // ......实现逻辑
                    let index = $(self.elem.combo_input).data("index");// 获取行索引
                    let selectPageId ='#parts_ids_'+index; // 组装好赋值文本元素选择器
          // 注意此处和下方的不同之处
          $(selectPageId).data("params", function (obj) {
               return {custom: {category_id: data.id}};
          });
                },
                eAjaxSuccess: function (data) {
                    data.list =
                        typeof data.rows !== "undefined"
                            ? data.rows
                            : typeof data.list !== "undefined"
                            ? data.list
                            : [];
                    data.totalRow =
                        typeof data.total !== "undefined"
                            ? data.total
                            : typeof data.totalRow !== "undefined"
                            ? data.totalRow
                            : data.list.length;
                    return data;
                },
            });
        }
    );
    Form.api.bindevent($("form[role=form]"));
},

发现并没有效果，这就苦恼了，通过元素查看，发现实际是id="parts_ids_0_text" 

这个是框架编译后动态生成的DOM，这样我们就直接对这个DOM，直接设置selectPage对象的参数

fieldlistBind: function () {
    $(document).on(
        "fa.event.appendfieldlist",
        ".btn-append",
        function (e, el) {// e:事件对象 el:当前行对象
            $(".selectpage", el).selectPage({
                eSelect: function (data, self) {
                    // data 为当前选中列表项的接口数据对象
                    // ......实现逻辑
                    let index = $(self.elem.combo_input).data("index");// 获取行索引
                    let selectPageId ='#parts_ids_'+index; // 组装好赋值文本元素选择器
                    console.log($(selectPageId+'_text').data('selectPageObject'));

                    if($(selectPageId+'_text').data('selectPageObject')){
                        $(selectPageId+'_text').data('selectPageObject').option.params = function () {
                            return {custom: {category_id: data.id}};
                        };
                    }
                },
                eAjaxSuccess: function (data) {
                    data.list =
                        typeof data.rows !== "undefined"
                            ? data.rows
                            : typeof data.list !== "undefined"
                            ? data.list
                            : [];
                    data.totalRow =
                        typeof data.total !== "undefined"
                            ? data.total
                            : typeof data.totalRow !== "undefined"
                            ? data.totalRow
                            : data.list.length;
                    return data;
                },
            });
        }
    );
    Form.api.bindevent($("form[role=form]"));
},

这样，就解决这个需求了