I. Overview
1.1 Problem
Sometimes we want the row height to be responsive to the cursor movement, like in the figure below. How can we achieve this?
1.2 Solution
Add a loading end event to the current report, using JavaScript. When the row is hovered by the mouse, the height will be changed to 40. When the mouse moves away, the height restores.
Note: This method does not support mobile devices.
II. Example
2.1 Report design
Design a detailed report, and bind the dataset.
Click Template > Template Web Attributes > Pagination Preview, select set individually for the template. Add a loading end event with JavaScript here:
$('tr').each(function(){
var _height = $(this).height();
$(this)
.mouseover(function(){$(this).height('40');})
.mouseout(function(){$(this).height(_height);});
});
2.2 Preview effect
Click save and then preview, we can see the effect as described above.
Previous：JS Pagination Preview Changes the Background Color that mouse hovered
