1. Home
  2. jQuery EasyUI Data Grid - Personnalisé Paging

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

jQuery EasyUI Data Grid - Personnalisé Paging

Data Grid (DataGrid) construit une belle onglets de la fonction, la coutume est assez simple. Dans ce tutoriel, nous allons créer une grille de données (DataGrid), et la barre d'outils de tabulation pour ajouter des boutons personnalisés.

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

	<Table id = "tt" title = classe "Load Data" style = "easyui-datagrid" = "width: 550px; height: 250px"
			url = "data / datagrid_data.json"
			iconCls = "icon-save" pagination = "true">
		<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"> 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>

Rappelez-vous, définissant la propriété 'Pagination' est vrai, cela va générer une barre d'outils de pagination.

Barre d'outils personnalisée Paging 

	var pager = $ ( '# tt') datagrid ( 'getPager') ;. // obtenir le pager de datagrid
	pager.pagination ({
		showPageList: false,
		boutons: [{
			iconCls: «icon-recherche»,
			gestionnaire: function () {
				alert ( 'search');
			}
		}, {
			iconCls: 'icône ajoutée »,
			gestionnaire: function () {
				alert ( 'ajouter');
			}
		}, {
			iconCls: «icon-edit ',
			gestionnaire: function () {
				alert ( 'edit');
			}
		}],
		onBeforeRefresh: function () {
			alert ( 'avant refresh');
			return true;
		}
	});

Comme vous pouvez le voir, nous obtenons la première grille de données (DataGrid) de l'objet de téléavertisseur, puis re-créer la page (pagination). Nous cachons la liste des pages, et d'ajouter trois nouveaux boutons.

Télécharger exemples jQuery EasyUI

jeasyui-datagrid-datagrid11.zip

Hot Didacticiel

Nous contacter

jQuery EasyUI Data Grid - Personnalisé Paging
10/30