jQuery EasyUI Data Grid - Format des colonnes

Les exemples suivants sont formatés dans les données de colonne DataGrid easyui intérieur, et utilisent la colonne personnalisée formatter, si le prix est inférieur à 20 texte devient rouge.

Pour formater une colonne grille de données (DataGrid), nous avons besoin de définir l'attribut formatter, qui est une fonction. La fonction de formatage contient trois paramètres:

• valeur: la valeur du champ correspondant dans la colonne courante.
• ligne: Les données de la ligne courante est enregistrée.
• Indice: L'indice de la ligne courante.

Création d'une grille de données (DataGrid)

	<Table id = "tt" title = "Colonnes de mise en forme" class = le style "easyui-datagrid" = "width: 550px; height: 250px"
			url = "data / datagrid_data.json"
			singleSelect = "true" iconCls = "icon-save">
		<Thead>
			<Tr>
				<Field Th = "itemid" width = "80"> ID de l'article </ th>
				<Field Th = "ProductID" width = "80"> ID de produit </ th>
				<Th field = largeur "ListPrice" = "80" align = "right" formatter = "formatPrice"> Prix </ th>
				<Field Th = "unitcost" width = "80" align = "right"> Coût unitaire </ th>
				<Field Th = largeur "de attr1" = "100"> Attribut </ th>
				<Field Th = "status" width = "60" align = "center"> Stauts </ th>
			</ Tr>
		</ Thead>
	</ Table>

S'il vous plaît noter que, 'Prix officiel' champ a un attribut 'formatter', qui indique les fonctions de formatage.

Écrire Fonctions de formatage

	fonction formatPrice (val, rangée) {
		if (val <20) {
			return '<span style = "color: red;"> (' + val + ') </ span>';
		} Else {
			retour val;
		}
	}

Télécharger exemples jQuery EasyUI

jeasyui-datagrid-datagrid7.zip