Easily learn the jQuery plug-in EasyUIEasyUI to implement basic tree network operations (2) _ jquery

This article mainly helps you to easily learn about the jQuery plug-in EasyUI and implement basic tree-like network operations for EasyUI, including dynamic loading, adding pages, and inert loading nodes, for more information, see I. Dynamic Loading of EasyUI tree-like Grids
Dynamic Loading of tree-like grids helps to load part of row data from the server and avoid loading large data for a long wait. This tutorial will show you how to create a TreeGrid ).

Create a TreeGrid)

 
 
 
 
  
  
 
   
 
    
Name
 
    
Quantity
 
    
Price
 
    
Total
 
   
 
  
 
 
 

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

Ii. Add pages to the EasyUI tree-like grid
The second part teaches you how to add pages to a TreeGrid with dynamic loading characteristics.

Create a TreeGrid)

To enable the paging feature of the TreeGrid, you must add the 'pagination: true' attribute, so that the 'page' and 'rows 'parameters will be sent to the server during page loading.

 
 
 
 
  
  
 
   
 
    
Name
 
    
Quantity
 
    
Price
 
    
Total
 
   
 
  
 
 
 

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

Parameters sent to the server include:
Page:The current page to load.
Rows:Page size.
Id:The id value of the parent row. The row returned from the server is added.
When you expand a row node, the value of 'id' is greater than 0. When the page number is changed, the 'id' value should be set to 0 to load the child row.
Iii. EasyUI tree-shaped grid inert loading Node
Sometimes we have obtained a full hierarchy of TreeGrid data. We also want the TreeGrid to load nodes in a layered manner. First, load only the top-level nodes. Click the expand icon of the node to load its subnodes. This tutorial shows how to create a TreeGrid with the characteristics of inert loading ).

Create a TreeGrid)

 
 
 
 
  
  
 
   
 
    
Name
 
    
Size
 
    
Modified Date
 
   
 
  
 
 
 

To place and load subnodes, We need to rename the 'children 'attribute for each node. As shown in the following code, the 'children 'attribute is renamed to 'children1 '. When you expand a node, we call the 'append' method to load its subnode data.
'Loadfilter' code

Function myLoadFilter (data, parentId) {function setData () {var todo = []; for (var I = 0; I
 
  

  
These are operations related to the Tree Network. We hope to help you with your learning. You can learn from the previous article, with unexpected results.
  
Related Articles: Learning jQuery plug-in EasyUI to create a Tree Network (1)