返回

快刀斩乱麻!FastAdmin从0到1实现弹窗单选

前端

用FastAdmin轻松弹出单选：让参数回传更轻松！

简介

作为FastAdmin的忠实粉丝，在新增页面中使用弹出窗单选元素并实现参数回传一直是提高开发效率的神技。本文将手把手地带你领略这一技巧，助你成为FastAdmin的高手！

1. 引入相关组件

首先，引入必要的组件：

  • 弹窗组件：将弹窗样式和核心功能引入页面。
  • 单选组件：提供下拉单选功能，方便用户选择。
//引入弹窗组件
$("<link>").attr({
  rel: "stylesheet",
  type: "text/css",
  href: "layer/theme/default/layer.css"
}).appendTo("head");
$.getScript("layer/layer.js", function() {
  //引入单选组件
  $.getScript("/assets/js/select-picker.min.js", function() {
    $("select").selectpicker();
  })
})

2. 创建弹窗

在新增页面，创建一个弹窗，其中放置单选元素：

$this->assignconfig("page", ["extrahtml" => "<button type='button' class='btn btn-primary' data-toggle='modal' data-target='#selectModal'>选择</button>
  <div class='modal fade' id='selectModal' tabindex='-1' role='dialog'>
    <div class='modal-dialog modal-lg' role='document'>
      <div class='modal-content'>
        <div class='modal-header'>
          <h5 class='modal-title' id='selectModalLabel'>选择</h5>
          <button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button>
        </div>
        <div class='modal-body'>
          <div class='form-group'>
            <label for='select' class='control-label'>单选:</label>
            <select name='select' class='selectpicker' data-live-search='true' data-width='100%'>
              <option value='1'>选项1</option>
              <option value='2'>选项2</option>
              <option value='3'>选项3</option>
            </select>
          </div>
        </div>
        <div class='modal-footer'>
          <button type='button' class='btn btn-default' data-dismiss='modal'>关闭</button>
          <button type='button' class='btn btn-primary' id='selectBtn'>确认</button>
        </div>
      </div>
    </div>
  </div>"
]);

3. 实现数据回传

当用户选择并点击“确认”时，将所选数据回传至新增页面表单：

$("#selectBtn").click(function() {
  var selectValue = $("#select").val();
  $("#hiddenInput").val(selectValue);
  $("#selectModal").modal("hide");
});

4. 绑定数据并完成操作

将回传数据绑定至新增页面模型，以便保存至数据库：

public function add() {
  $selectValue = $this->request->post("hiddenInput");
  $data = $this->request->post();
  $data["select"] = $selectValue;
  $this->model->save($data);
  $this->success();
}

5. 结语

掌握这一技巧，你可以在新增页面中轻松使用弹出窗单选元素，大大提高开发效率。现在，就用FastAdmin释放你的开发潜力吧！

常见问题解答

  1. 如何自定义弹窗样式？

    • 修改layer.css样式文件即可定制弹窗外观。

  2. 如何添加更多单选选项？

    • 修改标签的selected属性，如

  3. 如何禁用弹窗单选元素？

    • 为