Fastadmin的selectpage动态修改连接

上代码:

//动态修改 data-source
$("#c-column_one_id_text").data("selectPageObject").option.data = "lesson/lesson/index"//如果id为user,那么就是user_text
//动态修改data-params
$("#c-column_one_id_text").data("selectPageObject").option.params={"custom[type][0]":"=","custom[type][1]":val};

常规用法

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

$("#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(){
    //后续操作
});

常用方法

//刷新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);