How to Use formatter and Styler in easyui DataGrid table component column attributes

Specify the cell Dom Structure

To understand how the formatter and Styler attributes work, you must first understand the DOM interface of the content cell of the DataGrid component. Note that the content cell does not include the title cell, the structure of the title cell is different. The default Dom structure of all our content cells is as follows:

<TD field = "code"> <Div style = "text-align: Left" class = "DataGrid-cell datagrid-cell-c1-code"> text </div> </TD>

It is very simple. In fact, it is only a two-layer structure. The field attribute of the TD tag is the encoding of the field, and the cell content is enclosed by a div. In my example, the DIV tag has a text-align style, which is determined by the column attribute align. At the same time, the Class Attribute Value of the DIV tag is not a fixed value. Pay attention to it.

 

Understand what formatter is

As the name implies, formatter indicates the meaning of formatter, which means the representation of the form. For a plain text, I can render it as a checkbox, as an input box, or even a drop-down box, or wrap more DOM in the outer part of the text (of course, this does not make much sense), which is the true meaning of formatter.

Definition example:

formatter: function(value, row, index){    if (value == "007") {        return ‘<font color="red">‘ + value + ‘</font>‘;    }    else {        return value;    }}

Note the following when using formatter:

• Regardless of the formatter format, the formatted Dom must be included in the default Div label.
• Make sure that a value is returned when writing the formatter function. Otherwise, no content can be displayed in the cell. Therefore, do not forget else when writing the IF function.
• The formatter function does not apply to cells whose column attribute checkbox is true. The checkbox column is reserved by the component.

Understand what Styler is

Styler, as its name implies, is a style that sounds confusing with formatter. In fact, it only uses jquery's CSS function to modify the style of the default TD tag, so Styler is inferior, only the background color of cells can be defined, and is often overwritten by the default Div label style.

Definition example:

styler: function(value, row, index){    if (value == "007") {        return ‘background-color:blue;‘;    }}