动态下拉(SelectPage) · yzncms1.4.X使用手册

# 动态下拉(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(){ //后续操作 }); ~~~ > 注意以上代码需要放在元素初始化`yznForm.bindevent`之前。更多的使用方法请参考[Selectpage官方教程](https://terryz.github.io/selectpage/index.html)