当前位置: 首页 > 工具软件 > SelectPage > 使用案例 >

fastadmin构建动态下拉Selectpage select 选择框

鲁俊友
2023-12-01

示例:

<div class="form-group">
    <label class="control-label col-xs-12 col-sm-2">{:__('请选择弹窗信息')}:</label>
    <div class="col-xs-12 col-sm-8">
        <input id="c-user_id" data-rule="required" data-source="popup/index" data-primary-key="id" data-field="remarks" data-params='{"custom[status]":"1"}' class="form-control selectpage" name="row[popup_id]" type="text" value="{$row.popup_id|htmlentities}">
    </div>
</div>

常规用法

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

<input id="c-name" data-rule="required" data-source="category/selectpage" class="form-control selectpage" name="row[name]" type="text" value="">

其中需要给元素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"

常用属性

属性                    功能          示例                                    
data-source          提供数据源的URL地址或JSON数据data-source="category/index"          
data-field            列表显示读取的字段  data-field="username"                
data-primary-key      列表选中后渲染的字段  data-primary-key="uid"                
data-pagination      是否开启分页      data-pagination="true"                
data-page-size        分页大小        data-page-size="10"                  
data-multiple        是否支持多选      data-multiple="true"                  
data-max-select-limit最多可选择数量    data-max-select-limit="3"            
data-order-by        排序字段        data-order-by="id"                    
data-params          自定义扩展参数    data-params='{"custom[type]":"test"}'
data-select-only      是否为只读模式    data-select-only="true"              
data-format-item      列表行模板    data-format-item="{title} - {author}"    
disabled      禁用SelectPage组件    disabled    

附加请求参数

如果需要简单的进行搜索筛选过滤,可以使用

//筛选status为normal,type为1的数据
data-params='{"custom[status]":"normal","custom[type]":"1"}'

data-params支持function类型,如果需要动态传参(例如联动查询),则可以在JS中将data-params添加一个function处理即可,请在表单初始化Form.api.bindevent之前使用,例如传递动态选择的类型

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

自定义行模板

SelectPagedata-format-item1.2.0之前的版本只支持使用JS赋值function来实现格式化模板功能,如:

$("#c-category").data("format-item", function(row){
    return row.title + " - " + row.author;
});

从FastAdmin1.2.0版本开始,同时还支持占位符和模板,如:
占位符模式

<input type="text" ... data-format-item="{title} - {author}" />

模板模式

<input type="text" ... data-format-item="#titletpl" />

<script type="text/html" id="titletpl">
<%=title%> - <%=id%>
</script>

温馨提示:
默认由于data-field="name"只能指定一个显示的字段,如果需要调用显示多个字段值时,必须在控制器指定

protected $selectpageFields = "id,name,title,author";

数据源

data-source支持Object远程URL返回两种方式,如:

data-source='[{"id":"1","title":"标题1"},{"id":"2","title":"标题2"}]'

data-source="category/index"

当使用远程数据源的方式时需要远程返回JSON数据,如:

{
    "list":[{"id":4,"username":"FastAdmin","nickname":"快速后台","avatar":"","pid":0},{"id":6,"username":"CRUD","nickname":"一键CRUD","avatar":"","pid":0}],
    "total":30
}

其中list为数据列表,total为总记录数,总记录数将用于前端显示分页使用。

事件监听

如果你需要对SelectPage组件值变更以后的事件进行监听,可以直接监听文本框的change事件即可,如:

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

也可使用

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

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

常用方法

//刷新SelectPage
$('#category_id').selectPageRefresh();
//清除SelectPage数据
$('#category_id').selectPageClear();
//设置SelectPage数据
$('#category_id').selectPageData(数据源);
//禁用或启用SelectPage
$('#category_id').selectPageDisabled(状态);
//获取SelectPage的选中的文本
$('#category_id').selectPageText();

常用示例

//动态修改SelectPage选中项
$('#category_id').val(3);
$('#category_id').selectPageRefresh();

//设置SelectPage数据
var data = [
    {id:1 ,name:'分类一'},{id:2 ,name:'分类二'}
];
$('#category_id').selectPageData(data);

//禁用
$('#category_id').selectPageDisabled(true);
//启用
$('#category_id').selectPageDisabled(false);
 类似资料: