Easyui DataGrid table Component Column Properties formatter and Styler use method

Clear cell DOM Structure

To figure out how the formatter and Styler properties work, start by figuring out the DOM interface of the DataGrid component's contents cell, and note that this refers to the content cell, excluding the header cell, and the structure of the header cell is different. The default DOM structure for all of our content cells is as follows:

12345

<tdfield="code">    <divstyle="text-align:left" class="datagrid-cell datagrid-cell-c1-code">         文字    </div></td>

Very simple, in fact, is only two layer structure, the TD label field property is the encoding of the fields, and the cell content unified with a div wrapped up, in my example, the div tag has a text-align style, this style is actually determined by the Column property align, At the same time, the class attribute value of the div tag is not a fixed value, you need to pay attention.

Understand what formatter is

As the name implies, formatter is the meaning of formatting, that is, in what form to render the meaning, for a plain text, I can render it as a checkbox, can also be rendered as input box, or even drop-down box, etc., or in the text envelope more Dom ( Of course the package does not make much sense), that is the true meaning of formatter.

Definition Example:

12345678

formatter: function      if (value = = " {           return ' <font color= "red "> ' + Value + ' </font> ' &NBSP;&NBSP;&NBSP;&NBSP; } else { return value; &NBSP;&NBSP;&NBSP;&NBSP; } }

The following points need to be noted for using formatter:

• Regardless of the form of formatter, the formatted DOM must be included in the default div tag
• When writing the formatter function to ensure that a value is returned, otherwise the cell has no content to display, so if you don't forget else
• The formatter function does not work on a cell where the Column property checkbox is True, and the checkbox column is reserved for the component.

Understand what Styler is

As the name implies, Styler is the meaning of the style, it sounds easy to confuse with formatter, in fact, it is only using jquery CSS function to modify the default TD label style, so Styler belongs to the imbecile, can only define the cell background color, etc. and is often overridden by the default DIV tag style.

Definition Example:

123456

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

1

<br><br>

Easyui DataGrid table Component Column Properties formatter and Styler use method