JS Display image according to the item hovered by mouse

1.1 Problem

When in data entry, sometimes user hopes that when item is hovered in the drop-down box, certain image will be displayed in the next cell to make the report more visualized, as shown below:

1.2 Solution

When the mouse rolls over the drop-down box item, the current item value is obtained, and then the image with the corresponding name is displayed.

2.1 Steps

Create a new template, and design the template as shown below:

The drop-down box is named BIRD, and the data dictionary is customized, as shown below:

Note: Pay attention to the name of the drop-down box widget. The widget name is called in the JS code below.

Cell A1 is the cell that displays the picture, and the cell value is <img id="img" src="http://localhost:8075/webroot/help/page_demo/Kingfisher.png"> . Select the cell, and select the cell attribute table on the right Other attributes>Display content , and select display by HTML, the picture in the cell shows Kingfisher by default , as shown below: 

Note: Pay attention to the id of the img tag. The id must be consistent with the id used in the code.

Click Template>Template Web Attributes>Data Entry Settings , add a loading end event for the template, and override FineReport's built-in method of initializing the drop-down box data when the drop-down box button is clicked.

Three parameters were passed in the original initialization method. In order to enhance the readability of the parameters, we changed the names of the three parameters to $dom, showValue, index. $dom refers to obtaining the current object, showValue means to get the display value of the drop-down box option, index refers to the serial number of the drop-down box selection, starting from 0.    

Add a JS that displays the corresponding picture in a fixed cell in the original event. The complete code is as follows:

Note:

• Because the method of initializing the data of the drop-down box has been rewritten, the added js needs to judge whether the name of the drop-down box is BIRD.

• In the above code, the path of src is http://localhost:8075/webroot/help/page_demo, so the picture needs to be under this folder.

• The name of the picture needs to be consistent with the displayed value of the drop-down box.

FR.ComboBoxEditor.prototype.initContent = function($dom, showValue, index) {
	if (showValue == null) {
		showValue = '';
	}
	var self = this;
	$dom.height(this.options.sonHeight)
		.attr("title", showValue)
		.text(showValue)
		.addClass(index > -1 ? 'fr-combo-list-item' : 'fr-combo-list-item fr-combo-list-item-noselect')
		.hover(function(e) {
			self.setFocusWithIndex(index);
			setTimeout(function(e) {
				if (!e) {
					return;
				}
				var target = $(e.target);
				if (self.$view[0].style.display != "none" && target.isChildAndSelfOf($(this).parent().children())) {
					$(this).removeClass("fr-combo-selected");
				}
			}, 10);
			if (self.options.widgetName == "BIRD") {
				if (showValue != 'Select None') {
					$("#img").attr("src", "http://localhost:8075/webroot/help/page_demo/" + showValue + ".png");
				} else
					$("#img").attr("src", "http://localhost:8075/webroot/help/page_demo/Kingfisher.png");
			}
		})
		.click(function(e) {
			self.inList = true;
			self._setSelectedIndex(index > -1 ? index : self.getItemsLength());
			self._onEnterPressed();
		})

2.2 Preview effect

Save the template, click data entry preview , and click the drop-down button. The data in the drop-down box will be initialized, and the overwritten event will be triggered. When the mouse is focused on a certain item, the corresponding image will be displayed in the image cell.

Display image according to the item hovered by mouse.cpt