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;
}
This comment has been removed by the author.
ReplyDeleteGreat information about drupal 7 tutorial. This information more helpful for me. drupal
ReplyDelete