SelectPage動態下拉

轉自：https://doc.fastadmin.net/doc/178.html

動態下拉(SelectPage)

最后更新時間：2021-03-05 15:51:55

FastAdmin中的動態下拉列表使用的是優秀強大的Selectpage插件來支持，FastAdmin對其進行了二次開發。

常規用法

下面介紹一個最基礎的動態下拉列表示例，如下

<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"。

常用屬性

Selectpage所支持的擴展屬性

屬性	功能	示例
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之前。

常見問題

1、FastAdmin在生成CRUD時會對包含下划線的字段默認生成動態下拉列表，比如user_id將自動生成data-source="user/index"，默認讀取的是id和name字段，如果需要修改，請修改對應參數data-primary-key和data-field來重新賦值。
2、如果你在開發時遇到SelectPage組件在編輯時總是返回第一行或所有行的數據時，請參考以下文檔進行檢查你的代碼：
https://ask.fastadmin.net/article/2399.html
https://ask.fastadmin.net/article/2400.html

更多的使用方法請參考Selectpage官方教程