1. Home
  2. jQuery EasyUI Data Grid - Tri personnalisé

Le meilleur didacticiel jQuery EasyUI Data Grid - Tri personnalisé en 2024, dans ce didacticiel, vous pouvez apprendre Télécharger exemples jQuery EasyUI,

jQuery EasyUI Data Grid - Tri personnalisé

Si le comportement de tri par défaut ne répond pas à vos besoins, vous pouvez personnaliser la grille de données (DataGrid) le tri comportement.

Le plus fondamental, l'utilisateur peut définir sur une colonne pour trier le nom de la fonction est trieuse. Cette fonction prend deux valeurs, la valeur de retour sera comme suit:

valeurA> valeurB => renvoie 1

valeurA <valeurB => -1

Tri personnalisé code 

	<Table id = "tt"> </ table>

	$ ( '# Tt'). Datagrid ({
		Titre: 'Trier personnalisée',
		iconCls: «icon-ok ',
		largeur: 520,
		hauteur: 250,
		singleSelect: true,
		remoteSort: false,
		colonnes: [[
			{Champ: 'itemid', titre: «ID d'objet, largeur: 60, sortable: true},
			{Champ: 'Prix officiel', titre: 'Prix', largeur: 70, align: «droit», sortable: true},
			{Champ: 'unitcost', titre: «Coût unitaire», largeur: 70, align: «droit», sortable: true},
			{Champ: 'attr1', titre: «Attribut, largeur: 120, sortable: true},
			{Champ: 'date', titre: 'Date', largeur: 80, sortable: true, aligner: «centre»,
				trieuse: function (a, b) {
					a = a.split ( '/');
					b = b.split ( '/');
					si (a [2] == b [2]) {
						si (a [0] == b [0]) {
							retour (un [1]> b [1] 1 :? -1);
						} Else {
							retour (a [0]> b [0] 1 :? -1);
						}
					} Else {
						retour (a [2]> b [2] 1 :? -1);
					}
				}
			},
			{Champ: «statut», le titre: 'Status', largeur: 40, align: «centre»}
		]]
	.}) Datagrid ( 'loadData', données);

Vous pouvez voir à partir de ce code, nous créons une colonne trieuse personnalisé pour la date. Le format de date est "jj / mm / aaaa ', il peut facilement être triées par date.

Télécharger exemples jQuery EasyUI

jeasyui-datagrid-datagrid14.zip

Hot Didacticiel

Nous contacter

jQuery EasyUI Data Grid - Tri personnalisé
10/30