2016-04-29 72 views
0

我一直在嘗試使用項目列表和Ajax(類似於jsTree)來執行可擴展樹。使用項目列表和ajax的Drupal可擴展樹

我知道如何使用Java腳本來解決這個問題,但想知道是否可以使用drupals窗體,主題和Ajax回調來解決問題。

我的問題是,我不能讓ajax回調工作和加載子列表中。這是我到目前爲止:

<?php 

function ajax_tree_list_menu() 
{ 
    $items = array();  
    $items['ajax_tree_list'] = array(
     'title'   => 'Ajax Tree List', 
     'description'  => 'Tree List only using ajax and themes(No js file)', 
     'page callback' => 'drupal_get_form', 
     'page arguments' => array('ajax_tree_list_form'), 
     'access callback' => array(TRUE), 
     'type'   => MENU_CALLBACK, 
    ); 

    return $items; 
} 

function ajax_tree_list_theme() 
{ 
    return array('tree_list_items' => array('render element' => 'form')); 
} 

function ajax_tree_list_form($form, &$form_state) 
{ 
    $Items = array(
     'Item 1' => array('Item 1.1', 'Item 1.2', 'Item 1.3'), 
     'Item 2' => array('Item 2.1', 'Item 2.2', 'Item 2.3'), 
     'Item 3' => array('Item 3.1', 'Item 3.2', 'Item 3.3'), 
     'Item 4' => array('Item 4.1', 'Item 4.2', 'Item 4.3'), 
    ); 

    $form['tree_list'] = array 
    (
     '#tree' => true, 
     '#theme' => 'tree_list_items', 
    ); 

    foreach($Items as $key => $value) 
    { 
     $form['tree_list'][$key]['data'] = array(
      '#type' => 'value', 
      '#value' => $key, 
     ); 

     $form['tree_list'][$key]['button'] = array(
      '#type' => 'button', 
      '#name' => $key, 
      '#ajax' => array(
       'callback' => 'ajax_update_sub_tree_list_callback', 
       'wrapper' => $key, 
       'method' => 'replace', 
       'effect' => 'fade', 
      ), 
      '#value' => t('+'), 
     ); 

     $form['tree_list'][$key]['sub'] = array(
      '#theme' => 'item_list', 
      '#items' => $value, 
     ); 
    } 

    return $form; 
} 

function theme_tree_list_items($variables) 
{ 
    $form = $variables['form']; 

    $items = array(); 
    foreach (element_children($form) as $key) { 
     $div_to_replace = '<div id="' . $form[$key]['data']['#value'] . '">Put sub list here</div>'; 
     $name = $form[$key]['data']['#value']; 

     $items[] = array(
      'data' => drupal_render($form[$key]['button']) . $name . $div_to_replace 
     ); 
    } 

    $output = theme('item_list', array('items' => $items)); 

    return $output; // . drupal_render_children($form); 
} 

function ajax_update_sub_tree_list_callback($form, $form_state) 
{ 
    return $form['tree_list'][$form_state['triggering_element']['#name']]['sub']; 
} 

這是我想完成加載子列表。 tree list built with only forms and ajax

這是我希望它看起來:

enter image description here

回答

0

我發現爲什麼沒有工作,我的自我。

問題是ID屬性有空間,這不是HTML中的有效ID屬性。

要解決它,我只是增加了str_replace函數(」」, '_')上的所有地方,我用的標題ID:

$form['tree_list'][$key]['button'] = array(
    '#type' => 'button', 
    '#name' => $key, 
    '#ajax' => array(
     'callback' => 'ajax_update_sub_tree_list_callback', 
     // Have added str_replace() on next line to replace all space with underscore 
     'wrapper' => str_replace(' ', '_', $key), 
     'method' => 'replace', 
     'effect' => 'fade', 
    ), 
    '#value' => t('+'), 
); 

已經更新theme_tree_list_items(...)

foreach (element_children($form) as $key) 
{ 
    // Have added str_replace() on next line to replace all space with underscore 
    $div_to_replace = '<div id="' . str_replace(' ', '_', $form[$key]['data']['#value']) . '">Put sub list here</div>'; 
    $name = $form[$key]['data']['#value']; 

    $items[] = array(
     'data' => drupal_render($form[$key]['button']) . $name . $div_to_replace 
    ); 
}