fastadmin弹窗选择

### FastAdmin 弹窗选择功能的使用教程与示例代码 FastAdmin 是一个基于 ThinkPHP5 和 AdminLTE 的快速开发框架，其弹窗功能主要依赖于 Layer 弹层组件，并进行了扩展和二次开发。以下内容将详细介绍 FastAdmin 中弹窗选择功能的使用方法以及相关示例代码。 #### 1. 基本弹窗选择功能 在 FastAdmin 中，弹窗选择功能通常用于实现数据选择、表单提交等场景。通过 `Fast.api.open` 方法可以轻松打开一个弹窗[^2]，并支持回调函数处理返回的数据。 ```javascript Fast.api.open("url/to/dialog", "标题", { callback: function (data) { if (data && data.id) { // 将选中的数据填充到页面中 $("#input_field").val(data.id); $("#display_field").text(data.text); } } }); ``` 上述代码中，`url/to/dialog` 是弹窗页面的地址，`"标题"` 是弹窗的标题，`callback` 函数用于处理弹窗关闭后返回的数据[^2]。 #### 2. 列表按钮触发弹窗 在 FastAdmin 的表格中，可以通过配置按钮来触发弹窗。以下是一个典型的按钮配置示例[^4]： ```javascript { field: 'id', title: __('操作'), table: table, buttons: [ { name: 'select', text: '选择', title: '选择', icon: 'fa fa-list', classname: 'btn btn-xs btn-primary btn-dialog', url: 'controller/action/select', callback: function (data) { if (data && data.id) { $("#input_field").val(data.id); $("#display_field").text(data.text); } } } ], operate: false, formatter: Table.api.formatter.buttons } ``` 在上述代码中，`url` 字段指定了弹窗页面的地址，`callback` 函数用于处理弹窗返回的数据[^4]。 #### 3. 自定义弹窗选择功能 如果需要实现更复杂的弹窗选择功能，可以自定义弹窗页面逻辑。以下是一个简单的示例[^3]： ```javascript // 触发弹窗的按钮点击事件 $(".btn-select").click(function () { Fast.api.open("controller/action/select", "选择数据", { callback: function (data) { if (data && data.id) { $("#input_field").val(data.id); $("#display_field").text(data.text); } } }); }); ``` 在弹窗页面中，可以通过 `Fast.api.close(data)` 方法将选中的数据返回给父页面[^3]。 ```javascript // 弹窗页面中的选择逻辑 $(".btn-confirm").click(function () { var id = $("#selected_id").val(); var text = $("#selected_text").val(); Fast.api.close({ id: id, text: text }); }); ``` #### 4. 表单联动选择 在某些场景下，可能需要实现表单字段之间的联动选择。例如，选择某个分类后自动加载对应的子分类。以下是一个示例[^1]： ```javascript // 父分类选择事件 $("#parent_category").change(function () { var parentId = $(this).val(); Fast.api.ajax({ url: "controller/action/get_children", data: { parent_id: parentId } }, function (data) { $("#child_category").html(""); $.each(data, function (index, item) { $("#child_category").append("<option value='" + item.id + "'>" + item.name + "</option>"); }); }); }); ``` 上述代码中，当父分类发生变化时，通过 AJAX 请求动态加载子分类。 ---