# 動態下拉(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(){
//后續操作
});
~~~
> 注意以上代碼需要放在元素初始化`yznForm.bindevent`之前。
更多的使用方法請參考[Selectpage官方教程](https://terryz.github.io/selectpage/index.html)
- 序言
- 使用條款
- 安裝
- 環境搭建
- 目錄結構
- 鉤子和行為
- 表單生成
- 數據限制
- 命令行
- 一鍵生成CRUD
- 一鍵生成菜單
- 一鍵安裝
- 系統配置
- 常規字段
- 特殊字段1:下拉框(高級)字段
- 特殊字段2:自定義字段
- 特殊字段3:自定義多圖片
- 系統函數/類
- 函數說明
- cache - 緩存管理
- thumb - 獲取縮略圖
- str_cut - 字符截取
- 郵箱/短信
- 插件使用說明
- cms內容管理【cms】
- 變量/常量
- 函數
- getCategory - 欄目獲取
- catpos - 面包屑
- seo - 生成SEO
- buildCatUrl - 生成欄目URL
- buildContentUrl - 創建內容鏈接
- 標簽
- 公共參數
- 欄目標簽
- 列表標簽
- 上一頁標簽
- 下一頁標簽
- Tags標簽
- 萬能標簽
- 原生標簽
- 搜索頁
- 篩選頁
- 內容詳情頁
- 模板
- 技巧/問題
- 將CMS路由設置更簡潔
- 外鏈和單頁如何增加列表類型的子欄目
- 如何合理設置SEO
- 實現電腦和手機模板分離
- 敏感詞檢測
- 欄目授權不全
- 內容頁分頁
- 分頁偽靜態
- tag標簽不支持特殊字符
- 部分虛擬主機tags頁面報錯
- 循環表格
- 二級目錄搭建知識點
- 閱讀收費
- 會員插件【member】
- 介紹
- 自定義表單【formguide】
- 調用方式
- 模板
- 支付插件【pay】
- 支付寶
- 微信
- 常見問題
- 接口文檔【apidoc】
- 簡介
- 配置
- 使用
- 萬能采集【collection】
- 采集列表規則
- 采集內容規則
- 關于圖片
- 案例一:采集yzncms論壇
- cms小程序【wxcms】(重構已下架)
- 前端
- H5設計【diywap】
- 返回頂部【returntop】
- 通用數據導出【dataoutput】
- 多通道短信【easysms】
- 塞郵郵箱【saiyouems】
- 第三方登錄【synclogin】
- 中文分詞【getwords】
- QQ客服【kefu】
- 地圖位置【address】
- 智能人機驗證【vaptcha】
- 行為驗證碼【ajcaptcha】
- 數據轉換【v9toyzn】
- 數據轉換【dedetoyzn】
- 百度收錄查詢【baidurecord】
- 蜘蛛訪問統計【spider】
- editormd編輯器【editormd】
- 敏感詞檢測【sensitive】
- 郵箱發送【phpmailer】
- 內容收藏【favorite】
- 隊列插件【queue】
- 七牛云【qiniu】
- 阿里云oss【alioss】
- 騰訊云【cos】
- 迅搜全文檢索【xunsearch】
- 評論插件【comments】
- 網頁即時通訊【webim】(重構已下架)
- 生成js
- window使用
- linux使用(推薦)
- 常見問題
- 友情鏈接【links】
- 考試插件【kaoshi】(暫停)
- 會員邀請【invite】
- 快遞查詢插件【expressquery】
- 禮品卡提貨系統【pickup】
- 地區插件【area】
- IP歸屬地查詢【ipregion】
- 百度統計插件【baidutongji】
- 消息通知【notice】
- 微信管理【wechat】
- 在線投票系統【vote】
- 前端&組件
- 后臺前端框架
- 文件上傳
- table數據表格
- auth權限驗證
- 動態顯示(Favisible)
- 動態下拉(SelectPage)
- 鍵值組件(Fieldlist)
- uniapp教程
- 常見問題
- YznCMS開發遇到錯誤怎么辦?(新手必看)
- 關閉調試模式
- 偽靜態(URL重寫)
- 虛擬主機不支持綁定public的方法
- 各類虛擬主機偽靜態使用注意事項
- 百度編輯器多圖片上傳被壓縮
- 如何去除訪問鏈接中的index.php
- 后臺路徑admin.php修改
- 后臺密碼忘記重置方法
- 寶塔面板一鍵部署
- 后臺登錄時驗證碼不顯示
- 小程序圖片不顯示
- 如何自定義404頁面顯示模板
- 管理員登錄時提示請于1天后再嘗試登錄
- composer
- composer簡介
- 內置composer
- 各大廠商鏡像地址
- 常用命令
- 拓展知識
- 助手類
- thinkphp維護
- 插件開發
- 目錄結構
- 數據庫
- 測試數據
- 插件信息
- 插件配置
- 核心文件
- 插件函數
- ??開發者入駐
- 申請入駐
- 建立私庫
- 插件入駐流程
- 模板入駐流程
- 安全建議
- 更新日記和補丁包