I. Overview
1.1 Problem
When there are hyperlink text in the heading row (often in column dynamic sorting), and we want them to be highlighted when the mouse is hovering on corresponding columns, how can we achieve that?
1.2 Solution
Through setting template loading end event, using JS to obtain cell ID, to set cell background to the corresponding cell.
Note: Only support text in the same heading row.
II. Example
2.1 Report design
Design a detailed report, and bind the dataset. Set hyperlink to some of the text in the heading row.
Click Template > Template Web Attributes > Pagination Preview, select set individually for the template. Add a loading end event here:
$("td").mouseover(function(){ //Mouse over the cell event
var id=$(this).attr("id"); //Get the id of the cell where the mouse is currently located
var num=id.search("-"); //Get the index of the first occurrence of the "-" symbol in id
var id1=id.substr(0,num).replace(/[^a-z]+/ig,""); //Split the letters in the id value, that is, the column number
var id2=id.substr(num,id.length-num); //Substract id
id=id1+"1"+id2; //Set id to the cell id of the list header of the cell where the mouse is located, 1 means the row of the column header
if($('td[id^='+id+']').attr('class').indexOf('celink')!==-1) //Determine whether the column title contains a hyperlinked class
{
$('td[id^='+id+']').css({'background':'yellow'}); //Set the background color of the column header cell
}
});
$("td").mouseleave(function(){ //Mouse leave the cell event
var id=$(this).attr("id");
var num=id.search("-");
var id1=id.substr(0,num).replace(/[^a-z]+/ig,"");
var id2=id.substr(num,id.length-num);
id=id1+"1"+id2; //Set id to the cell id of the list header of the cell where the mouse is located, 1 means the row of the column header
$('td[id^='+id+']').css({'background':'#e7ebf1'}); //Set the background color of the column header cell to the original background color
});
2.2 Preview effect
Click save and then preview, we can see the effect as described above.
Previous：JS Automatic page turning
