function theme_tabledrag_example_simple_form

Theme callback for the tabledrag_example_simple_form form.

The theme callback will format the $form data structure into a table and add our tabledrag functionality. (Note that backdrop_add_tabledrag should be called from the theme layer, and not from a form declaration. This helps keep template files clean and readable, and prevents tabledrag.js from being added twice accidentally.

Return value

string: The HTML markup for the table-drag form.

Related topics

File

modules/examples/tabledrag_example/tabledrag_example_simple_form.inc, line 87

Example demonstrating a simple (i.e. 'sort' only) tabledrag form

Code

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

  // Initialize the variable which will store our table rows.
  $rows = array();

  // Iterate over each element in our $form['example_items'] array.
  foreach (element_children($form['example_items']) as $id) {

    // Before we add our 'weight' column to the row, we need to give the
    // element a custom class so that it can be identified in the
    // backdrop_add_tabledrag call.
    //
    // This could also have been done during the form declaration by adding
    // '#attributes' => array('class' => 'example-item-weight'),
    // directly to the 'weight' element in tabledrag_example_simple_form().
    $form['example_items'][$id]['weight']['#attributes']['class'] = array('example-item-weight');

    // We are now ready to add each element of our $form data to the $rows
    // array, so that they end up as individual table cells when rendered
    // in the final table.  We run each element through the backdrop_render()
    // function to generate the final html markup for that element.
    $rows[] = array(
      'data' => array(
        // Add our 'name' column.
        backdrop_render($form['example_items'][$id]['name']),
        // Add our 'description' column.
        backdrop_render($form['example_items'][$id]['description']),
        // Add our 'weight' column.
        backdrop_render($form['example_items'][$id]['weight']),
      ),
      // To support the tabledrag behaviour, we need to assign each row of the
      // table a class attribute of 'draggable'. This will add the 'draggable'
      // class to the <tr> element for that row when the final table is
      // rendered.
      'class' => array('draggable'),
    );
  }

  // We now define the table header values.  Ensure that the 'header' count
  // matches the final column count for your table.
  $header = array(t('Name'), t('Description'), t('Weight'));

  // We also need to pass the backdrop_add_tabledrag() function an id which will
  // be used to identify the <table> element containing our tabledrag form.
  // Because an element's 'id' should be unique on a page, make sure the value
  // you select is NOT the same as the form ID used in your form declaration.
  $table_id = 'example-items-table';

  // We can render our tabledrag table for output.
  $output = theme('table', array(
    'header' => $header,
    'rows' => $rows,
    'attributes' => array('id' => $table_id),
  ));

  // And then render any remaining form elements (such as our submit button).
  $output .= backdrop_render_children($form);

  // We now call the backdrop_add_tabledrag() function in order to add the
  // tabledrag.js goodness onto our page.
  //
  // For a basic sortable table, we need to pass it:
  // - the $table_id of our <table> element,
  // - the $action to be performed on our form items ('order'),
  // - a string describing where $action should be applied ('siblings'),
  // - and the class of the element containing our 'weight' element.
  backdrop_add_tabledrag($table_id, 'order', 'sibling', 'example-item-weight');

  return $output;
}