## 動態下拉(SelectPage) YznCMS中的動態下拉列表使用的是優秀強大的`Selectpage`插件。 ### 常規用法 下面介紹一個基礎的動態下拉列表示例，如下 ``` <input data-source="{:url('admin/pickup.activity/index')}" class="layui-input selectpage" name="row[name]" type="text" value=""> ``` 其中需要給元素class添加一個`selectpage`，其次需要增加一個`data-source="{:url('admin/pickup.activity/index')}"`這個屬性，`{:url('admin/pickup.activity/index')}`為我們控制器提交列表的方法URL YznCMS的`Selectpage`列表中`顯示字段`默認讀取的是`name`字段，如果我們返回的列表中不包含`name`字段，將無法展現下拉列表數據。此時我們需要添加使用`data-field="你要顯示的字段"`即可，例如`data-field="title"`。 YznCMS的`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-search-field ? ? ? ? ? ? | 搜索的字段 ? | data-search-field="nickname,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 ? ? | ### 附加請求參數 如果需要簡單的進行搜索篩選過濾，可以使用 ~~~json //篩選status為normal,type為1的數據 data-params='{"custom[status]":"normal","custom[type]":"1"}' //篩選status為normal或hidden的數據，in為操作符，語法請參考文檔：http://www.hmoore.net/manual/thinkphp5_1/354004 data-params='{"custom[status]":["in","normal,hidden"]}' ~~~ `data-params`支持`function`類型,如果需要動態傳參(例如聯動查詢),則可以在JS中將`data-params`添加一個`function`處理即可，請在表單初始化`yznForm.bindevent`之前使用，例如傳遞動態選擇的類型 ~~~js $("#c-name").data("params", function (obj) { //obj為SelectPage對象 ? ?return {custom: {type: $("#c-type").val()}}; }); ~~~ ### 數據源 `data-source`支持`Object`和`遠程URL返回`兩種方式，如： ~~~html data-source='[{"id":"1","title":"標題1"},{"id":"2","title":"標題2"}]' ~~~ 和 ~~~html data-source="{:url('admin/pickup.activity/index')}" ~~~ 當使用遠程數據源的方式時需要遠程返回JSON數據，如： ~~~js { "list":[{"id":4,"username":"YznCMS","nickname":"御宅男","avatar":"","pid":0},{"id":6,"username":"thinkphp","nickname":"流年","avatar":"","pid":0}], "total":30 } ~~~ 其中`list`為數據列表,`total`為總記錄數，總記錄數將用于前端顯示分頁使用。 ### 事件監聽 如果你需要對`SelectPage`組件值變更以后的事件進行監聽，可以直接監聽文本框的`change`事件即可，如： ~~~js $(document).on("change", "#c-title", function(){ //后續操作 }); ~~~ 也可使用 ~~~js $("#c-title").data("eSelect", function(){ //后續操作 }); ~~~ > 注意以上代碼需要放在元素初始化`Form.bindevent`之前。 更多的使用方法請參考[Selectpage官方教程](https://terryz.github.io/selectpage/index.html)