常规用法
<input id="c-appid" data-multiple="true" data-keyField="appid" data-keyValue="10002" data-primary-key="appid" data-field="app_name" data-rule="required" data-order-by='id desc' data-source="mqjob/app/index" class="form-control selectpage" name="row[app_id]" type="text">
常用属性
| 属性 | 功能 | 示例 |
|---|---|---|
| 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 |
附加请求参数
如果需要简单的进行搜索筛选过滤，可以使用
//筛选status为normal,type为1的数据
data-params='{"custom[status]":"normal","custom[type]":"1"}'
//筛选status为normal或hidden的数据，in为操作符，语法请参考文档：https://www.kancloud.cn/manual/thinkphp5/135182
data-params='{"custom[status]":["in","normal,hidden"]}'
data-params支持function类型,如果需要动态传参(例如联动查询),则可以在JS中将data-params添加一个function处理即可，请在表单初始化Form.api.bindevent之前使用，例如传递动态选择的类型
$("#c-name").data("params", function (obj) {
//obj为SelectPage对象
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(data){
//后续操作
});
| 事件名称 | 事件说明 |
|---|---|
| eSelect | 选中后调用 |
| eClear | 点击清除后调用 |
| eTagRemove | 点击移除标签后(仅适用于多选) |
注意以上代码需要放在元素组件初始化Form.api.bindevent之前。
常用方法
//刷新SelectPage
$('#category_id').selectPageRefresh();
//清除SelectPage数据
$('#category_id').selectPageClear();
//设置SelectPage数据
$('#category_id').selectPageData(数据源);
//禁用或启用SelectPage
$('#category_id').selectPageDisabled(状态);
//获取SelectPage的选中的文本
$('#category_id').selectPageText();
注意以上代码必须在SelectPage组件渲染成功后才可以进行操作。
常用示例
//动态修改SelectPage选中项
$('#category_id').val(3);
$('#category_id').selectPageRefresh();
//设置SelectPage数据
var data = [
{id:1 ,name:'分类一'},{id:2 ,name:'分类二'}
];
$('#category_id').selectPageData(data);
//禁用
$('#category_id').selectPageDisabled(true);
//启用
$('#category_id').selectPageDisabled(false);
注意以上代码必须在SelectPage组件渲染成功后才可以进行操作