Shulou(Shulou.com)06/01 Report--

In this issue, the editor will bring you about how to mark the modified cells when filling in the JS implementation. The article is rich in content and analyzes and describes for you from a professional point of view. I hope you can get something after reading this article.

1. Description

When filling in the preview, after editing the cell, there is a red mark in the upper left corner, but it is not so obvious that it is difficult for the user to notice. Is there any good way to do more obvious special tagging after the operation of the cell, so as to facilitate the user to identify it?

As shown in the figure: after the operation of the cell, the cell is marked with background color, bold text and so on.

two。 Realization method

Open the template FR_HOME%\ WebReport\ WEB-INF\ reportlets\ doc\ Form\ LineForm\ LineForm.cpt

2.1 method 1: modify the cell style after editing

Modify the cell style in the event after editing the control, select the cell B3:K3 you want to set, right-click Control Settings > event Editing, and add an editing end event:

The js code is as follows:

1. Var location = this.options.location

2. / / get the location of the control

3. Var cr = FR.cellStr2ColumnRow (location)

4. / / Cell column number

5. Var col = cr.col

6. / / Cell line number

7. Var ro = cr.row

8. / / set the cell background color: grass green

9. $("tr [tridx=" + ro+ "]"). Find ("td [col=" + col+ "]") .css ("background-color", "rgb (153 ~ 204))")

10. / / set the contents of the cell: bold

11. $("tr [tridx=" + ro+ "]") .find ("td [col=" + col+ "]") .css ("font-weight", "bold")

The js code, which can be used directly with the following, is simpler:

1. Var $td=$ (arguments [0])

2. / / currently editing the cell

3. $td.css ("background-color", "rgb (153 and 204)")

4. / / set the contents of the cell: color

5. $td.css ("font-weight", "bold")

6. / / set the contents of the cell: bold

2.2 method 2 directly modify the css style after the value is changed

If you use the above method, you must set an editing end event for all the filling controls. If there are more and not continuous controls in the template, the setting workload is relatively large and the efficiency is relatively low. In fact, after each cell value changes, it will trigger an internal value change event and add a small red triangle to the upper left corner of the cell, as shown in the following figure.

The corresponding dirty class is the dirty class. You only need to modify the style of the CSSS class in css, add a background color or add a bold style. After the cell value changes, the CSSS class will automatically use this CSSS class, and you can call this style for all controls that report a change in the value of the report. It is very simple and applicable, and the method is as follows

Add a load end event, as shown below

The code is as follows:

1. ContentPane.on ("cellselect", function (td) {

2. $('.coach'). Css ('background-color', "rgb (153 mine204)")

3. / / set the background color of the dirty class

4. $('.clients') .css ('font-weight', "bold")

5. / / set dirty fonts to be bold

6.})

After using this method, you only need to write the code once in the load end event of the filling template, and you no longer need to write code separately in the edit end event of each control.

. Effect preview

Save the template and click to fill in the preview, as shown in the image above.

This is how to mark the modified cells when filling in the JS implementation shared by the editor. If you happen to have similar doubts, you might as well refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.