Display Tags:

Working on display tag and found it very handy specially with spring. 

The thing on which i got stuck was that i want to highlight the particular row which i select by clicking on the checkbox button in first column. So i just call the onclick method on checkbox:

onclick="highlightRow(this);"

and called this simple function in javacript:

 function highlightRow(obj)

 {

  /* Add/remove class to a row when clicked on */

      $(obj).closest("tr").toggleClass('row_selected'); 

 }

Entry in displaytag.css

 tr.row_selected {

 background-color: #FFFFCE

 }

In the table there are headers and some times we want the select all button to select all rows, in this scenario we would like to highlight all rows except the first, so for select all onclick we will call a js function:

function selectAll(divName)

{

  $("#"+divName+" input:checkbox").each( function() {

  $(this).attr("checked",true);

  $("#tableId").find("tr:gt(0)").toggleClass('row_selected');

  });

}

same as unselect all:

function unSelectAll(divName)

{

  $("#"+divName+" input:checkbox").each( function() {

  $(this).attr("checked",false);

  $("#tableId").find("tr:gt(0)").toggleClass('row_selected');

  });

}

we would also like to check that atleast one row must be selected to proceed futhur:

 function handleCheckBox(divName)

 {

  var flag = false;

   $("#"+divName+" input:checkbox").each(function() {

   if ($(this).is(':checked')){

    flag = true;

   }

  });

  if(!flag)

   {

    showAlert("Please select atleast one item to add/remove.");

    return false;

   }

 }