FastAdmin的Selectpage动态选择问题

本文参考：fastadmin构建动态下拉Selectpage select 选择框

常规用法

<input id="c-get_type" data-source="oub/outbound_doc/getType" class="form-control selectpage" name="row[get_type]" type="text" value="">

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

自定义模板

FastAdmin1.2.0之前的版本SelectPage只支持使用JS来实现格式化模板功能

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

FastAdmin1.2.0版本开始，支持占位符和模板

占位符模式

<input id="c-get_type" data-source="..." class="form-control selectpage" name="row[get_type]" data-format-item="{title} - {type}" type="text" value="">

模板模式

<input id="c-get_type" data-source="..." class="form-control selectpage" name="row[get_type]"  data-format-item="#titletpl" type="text" value="">

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

分页显示

当需要分页进行下拉数据显示时，可以调整返回的数据格式

 {
    
    
	 "list":[
		 {
    
    "id":"...","name":"..."},
		 {
    
    "id":"...","name":"..."},
		 {
    
    "id":"...","name":"..."},
		 {
    
    "id":"...","name":"..."},
		 {
    
    "id":"...","name":"..."},
		 {
    
    "id":"...","name":"..."},
		 {
    
    "id":"...","name":"..."},
		 {
    
    "id":"...","name":"..."},
		 {
    
    "id":"...","name":"..."},
		 {
    
    "id":"...","name":"..."}
	 ],
	 "total":300
 }

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

事件监听

监听SelectPage组件值变更事件

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

或

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

PS: 需要放在元素初始化Form.api.bindevent之前

常用方法

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

常用示例

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

//设置SelectPage数据
var data = [
    {
    
    id:1 ,name:'...'},{
    
    id:2 ,name:'...'}
];
$('#c-get_type').selectPageData(data);

//禁用
$('#c-get_type').selectPageDisabled(true);
//启用
$('#c-get_type').selectPageDisabled(false);