1. Home
  2. jQuery EasyUI Menu arbre - l'arbre pour ajouter une grille de page

Le meilleur didacticiel jQuery EasyUI Menu arbre - l'arbre pour ajouter une grille de page en 2024, dans ce didacticiel, vous pouvez apprendre Télécharger exemples jQuery EasyUI,

jQuery EasyUI Menu arbre - l'arbre pour ajouter une grille de page

Ce tutoriel vous montre comment charger les caractéristiques dynamiques de l'arbre avec une grille (TreeGrid) onglet ajouté.

Créer grille d'arbre (TreeGrid)

Activer la grille d'arbre (TreeGrid) fonction de recherche, vous devez ajouter «pagination: true 'attribut sera envoyé' page 'et argument' lignes 'sur le serveur afin chargement de la page. 

	<Table title = "Produits" class = le style "easyui-treegrid" = "width: 700px; height: 300px"
			data-options = "
				url: 'treegrid4_getdata.php',
				rownumbers: true,
				Pagination: vrai,
				pageSize: 2,
				pagelist: [2,10,20],
				zone ID: 'id',
				treeField: 'nom',
				onBeforeLoad: function (ligne, param) {
					si (ligne!) {// charge des lignes de premier niveau
						param.id = 0; // set id = 0, indiquer pour charger les nouvelles pages lignes
					}
				}
			">
		<Thead>
			<Tr>
				<Th champ = largeur "name" = "250"> Nom </ th>
				<Th champ = largeur "quantité" = "100" align = "right"> Quantité </ th>
				<Th field = "price" width = "150" align = "right" formatter = "formatDollar"> Prix </ th>
				<Field Th = "total" width = "150" align = "right" formatter = "formatDollar"> Total </ th>
			</ Tr>
		</ Thead>
	</ Table>

Le code côté serveur

treegrid4_getdata.php 

? $ Page = isset ($ _ POST [ 'page']) intval ($ _ POST [ 'page']): 1;
? $ Rows = isset ($ _ POST [ 'lignes']) INTVAL ($ _ POST [ 'lignes']): 10;
$ Offset = ($ Page-1) * $ lignes;

$ Id = isset ($ _ POST [ 'id']) intval ($ _ POST [ 'id']): 0 ;?

inclure 'conn.php';

$ Résultat = array ();
if ($ id == 0) {
	$ Rs = mysql_query ( "select count (*) à partir de produits où parentId = 0");
	$ Ligne = mysql_fetch_row (rs $);
	Résultat $ [ "total"] = $ row [0];
	
	$ Rs = mysql_query ( "select * from produits où parentId = 0 Limite $ offset, $ lignes");
	$ Articles = array ();
	while ($ row = mysql_fetch_array ($ rs)) {
		? $ Row [ 'Etat'] = has_child ($ row [ 'id']) «fermé»: «ouvert»;
		array_push ($ articles, $ ligne);
	}
	$ Résultat [ "lignes"] = $ Articles;
} Else {
	$ Rs = mysql_query ( "select * from produits où parentId = $ id");
	while ($ row = mysql_fetch_array ($ rs)) {
		? $ Row [ 'Etat'] = has_child ($ row [ 'id']) «fermé»: «ouvert»;
		$ Row [ 'total'] = $ row [ 'prix'] * $ row [ 'quantité'];
		array_push ($ result, $ row);
	}
}

json_encode echo ($ result);

fonction has_child ($ id) {
	$ Rs = mysql_query ( "select count (*) à partir de produits où parentId = $ id");
	$ Ligne = mysql_fetch_array (rs $);
	return $ row [0]> 0 true :? false;
}

Envoyés aux paramètres du serveur comprennent:

  • page: la page courante à charger.
  • lignes: taille de la page.
  • id: id de la valeur parent de la ligne retournée par le serveur est sur le point d'être ajouté.

Lorsque vous développez une ligne de noeud, 'id' valeur est supérieure à 0. Lors de la modification du sujet, la valeur 'id' doit être réglé sur 0 pour placer les lignes de charge de l'enfant.

Télécharger exemples jQuery EasyUI

jeasyui-tree-treegrid4.zip

Hot Didacticiel

Nous contacter

jQuery EasyUI Menu arbre - l'arbre pour ajouter une grille de page
10/30