fastadmin SelectPage 监听事件获取其他返回值

本文介绍了如何在前端开发中使用默认的data-field进行单字段显示,以及两种事件监听方式——通过`change`事件处理程序和使用jQuery的`.data()`方法,特别关注了如何在事件触发时访问并操作返回的多个字段值,同时提到了控制器层面的配置需求。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

温馨提示:
默认由于data-field="name"只能指定一个显示的字段,如果需要调用显示多个字段值时,必须在控制器指定

protected $selectpageFields = "id,name,title,author";

可以配置其他返回字段

两种事件监听方式,其中第二种可以通过data.字段,获取返回的其他字段

$(document).on("change", "#c-title", function(){
    //后续操作
});

也可使用

$("#c-title").data("eSelect", function(data){
    //后续操作
     console.log(data.字段);
});

 

### FastAdminSelectPage 组件的详细用法 #### 一、概述 `SelectPage` 是 FastAdmin 框架中的一个重要组件,主要用于实现页面级的选择功能。通过该组件可以方便地弹出一个新的窗口来选择数据项,并返回所选的数据到当前表单字段中[^1]。 #### 二、基本属性配置 为了正常使用 `SelectPage`, 需要设置一些必要的参数: - **type**: 类型定义,默认为 'selectpage'。 - **name**: 字段名称,在提交时会以此作为键名传递给服务器端处理程序。 - **title**: 显示在控件旁边的提示文字或者标签内容。 - **url**: 请求地址,用于获取可选项列表;支持 RESTful API 接口路径以及自定义方法调用方式。 - **searchField**: 可搜索字段数组,指定哪些列允许用户输入关键字进行过滤查询操作。 - **listDataFormat**: 列表数据显示格式化函数,用来调整显示样式或增加额外信息展示逻辑。 - **primary_key**: 主键字段名,通常情况下不需要修改默认值'id'即可满足需求。 - **fields**: 定义表格各列的信息结构体,包括但不限于宽度(width),可见性(visible), 对齐方式(align)等特性描述。 ```php // PHP 示例代码片段 [ 'type'=>"selectpage", 'name'=>'demo', 'title'=> __('Demo'), 'url'=> url('api/demo/index'), // 假设有一个名为 api 的模块下的 demo 控制器 index 方法提供服务接口 'searchField'=>['id','username'], 'listDataFormat'=>function($item){ $item['text'] = "{$item['id']} - {$item['username']}"; return $item; }, 'primary_key'=>'id', 'fields'=> [ ['field'=>'id', 'width'=>80, 'visible'=>false], ['field'=>'username', 'title'=>__('Username')] ] ] ``` #### 三、事件绑定机制 除了上述静态配置外,还可以利用 JavaScript 动态监听并响应各种交互行为触发后的回调动作,比如当选择了某条记录之后执行特定脚本逻辑等等[^2]。 ```javascript // JS 示例代码片段 $('.fastadmin-selectpage').on('change', function(){ console.log($(this).val()); }); ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值