fastadmin组件之selectpage使用方法

以你之姓@ 2022-10-20 01:30 1454阅读 0赞

**常规用法**

下面介绍一个最基础的动态下拉列表示例，如下

其中需要给元素class添加一个`selectpage`，其次需要增加一个`data-source="category/selectpage"`这个属性，`category/selectpage`为我们控制器提交列表的方法

FastAdmin的`Selectpage`列表中`显示字段`默认读取的是`name`字段，如果我们返回的列表中不包含`name`字段，将无法展现下拉列表数据。此时我们需要添加使用`data-field="你要显示的字段"`即可，例如`data-field="title"`。

FastAdmin的`Selectpage`列表中`主键字段`默认读取的是`id`字段，如果我们的主键不是`id`字段，则我们可以添加并使用`data-primary-key="你的主键ID字段"`来修改,例如`data-primary-key="productid"`。

**常用属性**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb3l1bnl1bjg4OA_size_16_color_FFFFFF_t_70][]

** 附加请求参数（联动）**

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

**常用其他属性 **

$('#c-brandId').selectPageRefresh();#刷新选中项目内容
    
    $('#selectPage').selectPageData(data);  动态修改插件数据源
    
    $('#selectPage').selectPageClear(); 清除所有模式下选择的项目

###  ###

** 事件监听**

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

代码联动案例扩展

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb3l1bnl1bjg4OA_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb3l1bnl1bjg4OA_size_16_color_FFFFFF_t_70]: /images/20221004/1d2d620ecf404429bf5aff64eb683571.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb3l1bnl1bjg4OA_size_16_color_FFFFFF_t_70 1]: /images/20221004/7529fc95572b4ef0be5c21c7b19a88f0.png