Apprenez facilement le plug-in jQuery EasyUI EasyUI pour implémenter les opérations de base du réseau arborescent (2)_jquery

1. Chargement dynamique de la grille de l'arborescence EasyUI
Le chargement dynamique des grilles arborescentes permet de charger des lignes partielles de données à partir du serveur, évitant ainsi de longues attentes pour le chargement de données volumineuses. Ce tutoriel vous montrera comment créer un TreeGrid avec des fonctionnalités de chargement dynamique.

Créer une grille arborescente (TreeGrid)

 <table title="Products" class="easyui-treegrid" style="width:700px;height:300px"
  url="treegrid3_getdata.php"
  rownumbers="true"
  idField="id" treeField="name">
 <thead>
  <tr>
  <th field="name" width="250">Name</th>
  <th field="quantity" width="100" align="right">Quantity</th>
  <th field="price" width="150" align="right" formatter="formatDollar">Price</th>
  <th field="total" width="150" align="right" formatter="formatDollar">Total</th>
  </tr>
 </thead>
 </table>

Code côté serveur
treegrid3_getdata.php

$id = isset($_POST['id']) ? intval($_POST['id']) : 0;
 
include 'conn.php';
$result = array();
$rs = mysql_query("select * from products where parentId=$id");
while($row = mysql_fetch_array($rs)){
 $row['state'] = has_child($row['id']) ? 'closed' : 'open';
 $row['total'] = $row['price']*$row['quantity'];
 array_push($result, $row);
}
 
echo json_encode($result);
 
function has_child($id){
 $rs = mysql_query("select count(*) from products where parentId=$id");
 $row = mysql_fetch_array($rs);
 return $row[0] > 0 ? true : false;
}

2. Ajouter une pagination à la grille de l'arborescence EasyUI
La deuxième partie vous apprend à ajouter une pagination à une grille arborescente (TreeGrid) avec des fonctionnalités de chargement dynamique.

Créer une grille arborescente (TreeGrid)

Pour activer la fonctionnalité de pagination de TreeGrid, vous devez ajouter l'attribut 'pagination:true', afin que les paramètres 'page' et 'rows' soient envoyés au serveur lors du chargement de la page.

 <table title="Products" class="easyui-treegrid" style="width:700px;height:300px"
  data-options="
  url: 'treegrid4_getdata.php',
  rownumbers: true,
  pagination: true,
  pageSize: 2,
  pageList: [2,10,20],
  idField: 'id',
  treeField: 'name',
  onBeforeLoad: function(row,param){
   if (!row) { // load top level rows
   param.id = 0; // set id=0, indicate to load new page rows
   }
  }
  ">
 <thead>
  <tr>
  <th field="name" width="250">Name</th>
  <th field="quantity" width="100" align="right">Quantity</th>
  <th field="price" width="150" align="right" formatter="formatDollar">Price</th>
  <th field="total" width="150" align="right" formatter="formatDollar">Total</th>
  </tr>
 </thead>
 </table>

Code côté serveur

treegrid4_getdata.php

$page = isset($_POST['page']) ? intval($_POST['page']) : 1;
$rows = isset($_POST['rows']) ? intval($_POST['rows']) : 10;
$offset = ($page-1)*$rows;
 
$id = isset($_POST['id']) ? intval($_POST['id']) : 0;
 
include 'conn.php';
 
$result = array();
if ($id == 0){
 $rs = mysql_query("select count(*) from products where parentId=0");
 $row = mysql_fetch_row($rs);
 $result["total"] = $row[0];
 
 $rs = mysql_query("select * from products where parentId=0 limit $offset,$rows");
 $items = array();
 while($row = mysql_fetch_array($rs)){
 $row['state'] = has_child($row['id']) ? 'closed' : 'open';
 array_push($items, $row);
 }
 $result["rows"] = $items;
} else {
 $rs = mysql_query("select * from products where parentId=$id");
 while($row = mysql_fetch_array($rs)){
 $row['state'] = has_child($row['id']) ? 'closed' : 'open';
 $row['total'] = $row['price']*$row['quantity'];
 array_push($result, $row);
 }
}
 
echo json_encode($result);
 
function has_child($id){
 $rs = mysql_query("select count(*) from products where parentId=$id");
 $row = mysql_fetch_array($rs);
 return $row[0] > 0 ? true : false;
}

Les paramètres envoyés au serveur incluent :
page : La page actuelle à charger.
lignes : Taille de la page.
id : La valeur id de la ligne parent à laquelle la ligne renvoyée par le serveur sera ajoutée.
Lors du développement d'un nœud de ligne, la valeur « id » est supérieure à 0. Lors de la modification du numéro de page, la valeur « id » doit être définie sur 0 pour placer la sous-ligne de chargement.
3. Nœuds de chargement paresseux de la grille d'arborescence EasyUI
Parfois, nous disposons déjà de données TreeGrid hiérarchiques complètes. Nous souhaitons également que TreeGrid charge paresseusement les nœuds de manière hiérarchique. Premièrement, seuls les nœuds de niveau supérieur sont chargés. Cliquez ensuite sur l'icône de développement du nœud pour charger ses nœuds enfants. Ce tutoriel montre comment créer un TreeGrid avec un chargement différé.

Créer une grille arborescente (TreeGrid)

 <table id="test" title="Folder Browser" class="easyui-treegrid" style="width:700px;height:300px"
  data-options="
  url: 'data/treegrid_data.json',
  method: 'get',
  rownumbers: true,
  idField: 'id',
  treeField: 'name',
  loadFilter: myLoadFilter
  ">
 <thead>
  <tr>
  <th field="name" width="220">Name</th>
  <th field="size" width="100" align="right">Size</th>
  <th field="date" width="150">Modified Date</th>
  </tr>
 </thead>
 </table>

Afin de placer les nœuds enfants de chargement, nous devons renommer l'attribut 'children' pour chaque nœud. Comme le montre le code ci-dessous, la propriété « children » est renommée « children1 ». Lorsqu'un nœud est développé, nous appelons la méthode « append » pour charger les données de son nœud enfant.
Code 'loadFilter'

 function myLoadFilter(data,parentId){
 function setData(){
  var todo = [];
  for(var i=0; i<data.length; i++){
  todo.push(data[i]);
  }
  while(todo.length){
  var node = todo.shift();
  if (node.children){
   node.state = 'closed';
   node.children1 = node.children;
   node.children = undefined;
   todo = todo.concat(node.children1);
  }
  }
 }
 
 setData(data);
 var tg = $(this);
 var opts = tg.treegrid('options');
 opts.onBeforeExpand = function(row){
  if (row.children1){
  tg.treegrid('append',{
   parent: row[opts.idField],
   data: row.children1
  });
  row.children1 = undefined;
  tg.treegrid('expand', row[opts.idField]);
  }
  return row.children1 == undefined;
 };
 return data;
 }

Les opérations ci-dessus sont liées aux réseaux d'arbres. J'espère que cela sera utile à l'apprentissage de chacun. Vous pouvez étudier en conjonction avec l'article précédent et vous obtiendrez des gains inattendus.

Lire les articles connexes : "Facile à apprendre le plug-in jQuery EasyUI EasyUI pour créer un réseau arborescent (1)"