FastAdmin后台添加编辑时在弹窗页面中多选某个字段

在使用FastAdmin后台进行记录的添加编辑时，有时会遇到一个字段需要多选的情况，由于列表过长，而且数据是多层级的，用selectpage就不太合适了。

这个时候就需要在一个自定义的页面中去选择这些数据，弹窗打开这个页面，选择完成后，点击确定再回传给父级页面，也就是添加编辑页面。

这个过程需要控制器、模板页面、JS的共同配合。

先说下整体逻辑，当在添加编辑页面点击某个按钮时，弹窗打开自定义页面，在这个页面中展示需要多选的列表，多选完成后，点击表单的确定按钮，以AJAX的方式提交到控制器，控制器接收后返回数据列表，JS接收到这个列表后对数据进行处理，并把它赋值给添加编辑页上的表单。

这里只给出添加页面上的示例代码，编辑页面基本是一样，无非是多回传个记录的id：

控制器

public function set_managers()
    {
        if ($this->request->isAjax()) {
            $params = $this->request->param('row/a');
            if (!isset($params['manager_ids'])) {
                $this->error('参数有误');
            }
            $manager_ids = $params['manager_ids'];
            $this->success('操作成功', '', $manager_ids);
        }

        $ids = $this->request->param('ids');

        if ($ids) {
            $row = $this->model->find($ids);

            if ($row == null) {

                $this->error('记录未找到');
            }
        }

        //模板页面的相关数据查询和赋值
        //your code here
        return $this->view->fetch();
}

这个方法根据请求方法的不同做不同的处理，当收到AJAX请求时，返回数据，GET方法则是返回模板页。

模板页 add.html

<div class="form-group" id="c-departId-div">
        <label class="control-label col-xs-12 col-sm-2">{:__('Managers')}:</label>
        <span  id="mylist" style="margin-left: 15px;">选择负责人</span>
        <input hidden  name="row[managers]" id="managers" type="hidden" value="" >
</div>

上面的代码是在负责人那一行添加一个"选择负责人的按钮"，并把原来的row[manager]改为隐藏属性。

set_managers.html就不贴了，自己去写。

JS

JS里的add方法改写如下：

add: function () {
       $("#mylist").click(function () {
        var url = 'staff/set_managers';

            Fast.api.open(url, '选择负责人', {

               callback: function (data) {
                  console.log(data)
                  //用逗号拼接data
                   var managers_ids = '';

                   $.each(data, function (index, value) {
                       managers_ids += value + ',';
                   });

                   if (managers != '') {
                       managers_ids = staff_ids.substring(0, managers_ids.length - 1);
                   }

                   console.log(managers_ids);
                   $('#managers').val(managers_ids);
               }

            });

        });

       Controller.api.bindevent();
},
//加上这个，在弹窗中提交表单时关闭弹窗
set_managers: function () {
      Form.api.bindevent($("form[role=form]"), function (data, ret) {
                Fast.api.close(data);
            });
},

好，到这里就完成了多选的改写。