You are here

Drupal8 表单页面使用 use ajax打开

 作者:亚艾元技术部

对于一个管理界面,添加、编辑,删除等链接,指向的表单页面,有时候为了更好的体验,我们想在Modal的形式中打开,也就是弹出框的形式。

   对于这样的链接,我们需要为它添加一些额外的属性:

<ul>

      <li><a href="/tags/add" class="button button-action button--primary button--small use-ajaxdata-dialog-type="modal" data-dialog-options="{&quot;width&quot;:700}" target="_blank">添加标签</a></li>

</ul>

 

红色部分,就是使用modal打开,需要添加的额外信息,只需要添加这样的信息,即可实现ajax。

 

当然,我们还需要对我们的表单加以改造,下面是我们实际项目中的一个自立,供大家参考:

class TagForm extends FormBase {
 
  /**
   * {@inheritdoc}
   */
  public function getFormId() {
    return 'tag_form';
  }
 
  /**
   * Is the current request for an Ajax modal/dialog.
   *
   * @return bool
   *   TRUE if the current request is for an Ajax modal/dialog.
   */
  protected function isDialog() {
    $wrapper_format = $this->getRequest()
      ->get(MainContentViewSubscriber::WRAPPER_FORMAT);
    return (in_array($wrapper_format, [
      'drupal_ajax',
      'drupal_modal',
      'drupal_dialog',
      'drupal_dialog.off_canvas',
    ])) ? TRUE : FALSE;
  }
 
  /**
   * {@inheritdoc}
   */
  public function buildForm(array $form, FormStateInterface $form_state) {
    $term = NULL;
    $term = \Drupal::routeMatch()->getParameter('taxonomy_term');
 
    $form['name'] = [
      '#type' => 'textfield',
      '#title' => $this->t('标签名称'),
      '#maxlength' => 40,
      '#weight' => 0,
      '#default_value' => $term == NULL ? '' : $term->label(),
      '#required' => TRUE,
    ];
    $form['weight'] = [
      '#type' => 'textfield',
      '#title' => $this->t('Weight'),
      '#size' => 6,
      '#default_value' => $term == NULL ? 0 : $term->getWeight(),
      '#description' => $this->t('标签是按照权重的升序排列的.'),
      '#required' => TRUE,
    ];   
   
    if ($this->isDialog()) {
      $form['submit'] = [
        '#type' => 'submit',
        '#value' => $this->t('保存'),
        '#prefix' => '<div id="submit-button-container">',
        '#suffix' => '</div>',
        '#ajax' => array(
          'callback' => '::ajaxSubmit',
          'event' => 'click',
        ),
      ];
    }
    else {
      $form['submit'] = [
        '#type' => 'submit',
        '#value' => $this->t('保存'),
        '#prefix' => '<div id="submit-button-container">',
        '#suffix' => '</div>',
      ];
    }
    return $form;
  }
 
  public function ajaxSubmit(array &$form, FormStateInterface $form_state) {
    $response = new AjaxResponse();
    $term_name = $form_state->getValue('name');
 
    $entity = NULL;
    $term = \Drupal::routeMatch()->getParameters()->get('taxonomy_term');
    $entity = $term;
    if ($entity != NULL) {
      //$entity->set('vid', 'subject_category');
      if ($term_name != NULL) {
        $entity->set('name', $term_name);
      }
    }
    else {
      $entity = \Drupal::entityTypeManager()
        ->getStorage('taxonomy_term')
        ->create([
          'vid' => 'tags',
          'name' => $term_name,
        ]);
             
              //设置部门id,根据用户的部门id,这里假定所有的用户都有部门,这是必须的。只在添加的时候,设置。
              $uid = \Drupal::currentUser()->id();
              $account = User::load($uid);
              $tid = $account->field_department->target_id;      
        $entity->set('field_department', $tid);                    
    }
 
 
    $weight = $form_state->getValue('weight');
    if (!empty($weight)) {
      $entity->set('weight', $weight);
    }
    else {
      $entity->set('weight', 0);
    }
 
    $status = $entity->save();
    if ($form_state->getErrors()) {
    }
    else {
      $response->addCommand(new CloseModalDialogCommand());
      $str_redirect_url = Url::fromUri('internal:/department/tags')->toString();
      //$str_redirect_url = Url::fromRoute('zhuanti.zhuanti_admin_page', [], [])->toString();
 
      $response->addCommand(new RedirectCommand($str_redirect_url));
    }
    return $response;
  }
 
  /**
   * {@inheritdoc}
   */
  public function validateForm(array &$form, FormStateInterface $form_state) {
    parent::validateForm($form, $form_state);
  }
 
 
  /**
   * {@inheritdoc}
   */
  public function submitForm(array &$form, FormStateInterface $form_state) {
    //普通页面
    if (!$this->isDialog()) {
      $term_name = $form_state->getValue('name');
      //$term = NULL;
      $term = \Drupal::routeMatch()->getParameter('taxonomy_term');
 
      if ($term != NULL) {
        if ($term_name != NULL) {
          $term->set('name', $term_name);
        }
      }
      else {
        $term = \Drupal::entityTypeManager()
          ->getStorage('taxonomy_term')
          ->create([
            'vid' => 'tags',
            'name' => $term_name,
          ]);
               
              //设置部门id,根据用户的部门id,这里假定所有的用户都有部门,这是必须的。只在添加的时候,设置。
              $uid = \Drupal::currentUser()->id();
              $account = User::load($uid);
              $tid = $account->field_department->target_id;      
        $term->set('field_department', $tid);        
      }
 
      
      $weight = $form_state->getValue('weight');
      if (!empty($weight)) {
        $term->set('weight', $weight);
      }
      else {
        $term->set('weight', 0);
      }
 
      $result = $term->save();
 
      //==========================================================
      switch ($result) {
        case SAVED_NEW:
          $this->messenger()
            ->addStatus($this->t('创建了一个新标签.'));
 
          break;
        case SAVED_UPDATED:
          $this->messenger()
            ->addStatus($this->t('更新了新标签.'));
 
          break;
      }
        
         //$route_name = "view.$view_id.$display_id";
         $route_name = "view.department_tags.page_1";
         $form_state->setRedirect($route_name, []);
 
    }
    //==========================================================
  }
}

 

主要是增加了isDialog 的判断,检查一下是不是通过弹出框打开的,然后分两种情况分别处理。

 

Ajax更新完毕以后,想让当前页面刷新,这样可以看到最新的数据:

$response->addCommand(new CloseModalDialogCommand());
      $str_redirect_url = Url::fromUri('internal:/department/tags')->toString();
      //$str_redirect_url = Url::fromRoute('zhuanti.zhuanti_admin_page', [], [])->toString();
 
      $response->addCommand(new RedirectCommand($str_redirect_url));

 


论坛:

Drupal版本: