## 动态下拉(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为操作符，语法请参考文档：https://www.kancloud.cn/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)