Erlernen Sie ganz einfach das jQuery-Plug-in EasyUI EasyUI, um grundlegende Vorgänge des Baumnetzwerks (2)_jquery zu implementieren

1. Dynamisches Laden des EasyUI-Baumrasters
Das dynamische Laden von Baumgittern hilft beim Laden teilweiser Datenzeilen vom Server und vermeidet so lange Wartezeiten beim Laden großer Datenmengen. Dieses Tutorial zeigt Ihnen, wie Sie ein TreeGrid mit dynamischen Ladefunktionen erstellen.

Erstellen Sie ein Baumgitter (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>

Serverseitiger Code
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. Paginierung zum EasyUI-Baumraster hinzufügen
Im zweiten Teil erfahren Sie, wie Sie einem Baumraster (TreeGrid) mit dynamischen Ladefunktionen eine Paginierung hinzufügen.

Erstellen Sie ein Baumgitter (TreeGrid)

Um die Paginierungsfunktion von TreeGrid zu aktivieren, müssen Sie das Attribut „pagination:true“ hinzufügen, damit die Parameter „page“ und „rows“ beim Laden der Seite an den Server gesendet werden.

 <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>

Serverseitiger Code

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;
}

Zu den an den Server gesendeten Parametern gehören:
Seite: Die aktuell zu ladende Seite.
Zeilen: Seitengröße.
id: Der ID-Wert der übergeordneten Zeile, zu der die vom Server zurückgegebene Zeile hinzugefügt wird.
Beim Erweitern eines Zeilenknotens ist der „id“-Wert größer als 0. Beim Ändern der Seitenzahl sollte der „id“-Wert auf 0 gesetzt werden, um die ladende Unterzeile zu platzieren.
3. EasyUI-Baumgitter-Lay-Loading-Knoten
Manchmal verfügen wir bereits über vollständige hierarchische TreeGrid-Daten. Wir möchten auch, dass TreeGrid Knoten hierarchisch langsam lädt. Zunächst werden nur die Knoten der obersten Ebene geladen. Klicken Sie dann auf das Erweiterungssymbol des Knotens, um seine untergeordneten Knoten zu laden. Dieses Tutorial zeigt, wie man ein TreeGrid mit Lazy Loading erstellt.

Erstellen Sie ein Baumgitter (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>

Um ladende untergeordnete Knoten zu platzieren, müssen wir das Attribut „children“ für jeden Knoten umbenennen. Wie im folgenden Code gezeigt, wird die Eigenschaft „children“ in „children1“ umbenannt. Wenn ein Knoten erweitert wird, rufen wir die Methode „append“ auf, um die Daten seines untergeordneten Knotens zu laden.
'loadFilter'-Code

 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;
 }

Die oben genannten Vorgänge sind verwandte Vorgänge für Baumnetzwerke. Ich hoffe, dass sie für das Lernen aller hilfreich sind. Sie können sie in Verbindung mit dem vorherigen Artikel studieren und unerwartete Gewinne erzielen.

Lesen Sie verwandte Artikel: "Einfaches Erlernen des jQuery-Plug-ins EasyUI EasyUI zum Erstellen eines Baumnetzwerks (1)"