Colonnes de formatage jEasyUI

L'exemple suivant formate les données de la colonne dans easyui DataGrid et utilise le formateur de la colonne personnalisée pour transformer le texte en rouge si le prix est inférieur à 20.

Afin de formater une colonne DataGrid, nous devons définir la propriété formateur, qui est une fonction. Cette fonction de formatage contient trois paramètres :

• valeur : la valeur du champ correspondant à la colonne courante.

• ligne : les données d'enregistrement de la ligne actuelle.

• index : L'index de la ligne actuelle.

Créer DataGrid

	<table id="tt" title="Formatting Columns" class="easyui-datagrid" style="width:550px;height:250px"
			url="data/datagrid_data.json"
			singleSelect="true" iconCls="icon-save">
		<thead>
			<tr>
				<th field="itemid" width="80">Item ID</th>
				<th field="productid" width="80">Product ID</th>
				<th field="listprice" width="80" align="right" formatter="formatPrice">List Price</th>
				<th field="unitcost" width="80" align="right">Unit Cost</th>
				<th field="attr1" width="100">Attribute</th>
				<th field="status" width="60" align="center">Stauts</th>
			</tr>
		</thead>
	</table>

Veuillez noter que le champ 'listprice' a un attribut 'formatter', qui est utilisé pour spécifier la fonction de formatage.

Fonction de formatage d'écriture

	function formatPrice(val,row){
		if (val < 20){
			return '<span style="color:red;">('+val+')</span>';
		} else {
			return val;
		}
	}

Télécharger l'instance jQuery EasyUI

jeasyui-datagrid-datagrid7.zip