示例:
<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()}};
});
SelectPage
的data-format-item
在1.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);