Friday, February 10, 2012

clickable table row on drupal's tableselect

YOUR.inc
=========
function a_form($form, &$formstate){
  drupal_add_js(drupal_get_path('module', 'YOUR-MODULE-NAME') . '/js/selectable-row.js', 'file');
 
  $header = array
  (
    'name' => 'name',
    'surname' => 'surname',
    'action' => 'action',
  );

  $options['1'] = array(
    'name' => 'name1',
    'surname' => 'surname1',
    'action' => '<a href="http://...">link</a>',
  );

  $options['2'] = array(
    'name' => 'name2',
    'surname' => 'surname2',
    'action' => '<a href="http://...">link</a>',
  );

  $form['tableselect_field'] = array(
    '#type' => 'tableselect',
    '#header' => $header,
    '#options' => $options,
    '#multiple' => FALSE,
    '#ajax' => array(
      'callback' => 'an_example_callback',
      'wrapper' => 'a-div',
      'method' => 'replace',
      'effect' => 'fade',
    ),
    '#attributes' => array('class' => array('selectable-row')),
  );

  $form['ajax_div'] = array(
    '#type' => 'markup',
    '#prefix' => '<div id="a-div">',
    '#markup' => date('y-m-d h:i:s'),
    '#suffix' => '</div>',
  );

  return $form;
}

function an_example_callback($form, $form_state) {
  return $form['ajax_div'];
}


selectable-row.js
===================
(function ($) {

  $(document).ready(function() {

    var selectableRow = $("table.selectable-row tbody").children();

    selectableRow.hover(function () {
      $(this).addClass("highlight");
    }, function () {
      $(this).removeClass("highlight");
    });

    selectableRow.click(function() {
      $(this).siblings().removeClass("selected-row");
      $(this).addClass("selected-row");
      $(this).find(":radio").attr("checked","checked");
      $(this).find(":radio").change();
    });

    // snippet with some modification from
    // http://thephuse.com/design-and-usability/clickable-table-rows-with-jquery/
    selectableRow.find('a').hover( function() {
        $(this).parents('tr').unbind('click');
    }, function() {
        $(this).parents('tr').click( function() {
          $(this).siblings().removeClass("selected-row");
          $(this).addClass("selected-row");
          $(this).find(":radio").attr("checked","checked");
          $(this).find(":radio").change();
        });
    });

  });
})(jQuery)


YOUR.css
=========
tr.highlight {
  background-color: #0000EE;
  color: #FFF;
}

tr.selected-row {
  background-color: #00AAEE;
  color: #FE0;
}

2 comments:

  1. This comment has been removed by the author.

    ReplyDelete
  2. Great information about drupal 7 tutorial. This information more helpful for me. drupal

    ReplyDelete