Easy Learning jquery Plugin Easyui Easyui Implementation of the basic operation of the Tree Network (2) _jquery

Dynamic loading of a easyui tree-shaped grid
Dynamically loading a tree grid helps to load part of the row data from the server, avoiding long waits for loading large data. This tutorial will show you how to create a tree grid (Treegrid) with dynamic load characteristics.

Create a tree grid (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= ">Name</th> <th field=" Quantity "width=" align= "right
  " > quantity</th>
  <th field= "Price" width= "the Align=" "Right" formatter= "Formatdollar" >price</th >
  <th field= "Total" width= "the Align=" "Right" formatter= "Formatdollar" >Total</th>
  </tr >
 </thead>
 </table>

Server-side code
treegrid3_getdata.php

$id = Isset ($_post[' id ')? Intval ($_post[' id '): 0;
 
Include ' conn.php ';
$result = Array ();
$rs = mysql_query ("SELECT * from the 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 the products where parentid= $id")
 ; $row = Mysql_fetch_array ($rs);
 return $row [0] > 0? True:false;
}

Second, Easyui tree mesh Add paging
The second section teaches you how to add pagination to a tree grid (Treegrid) with dynamic load characteristics.

Create a tree grid (Treegrid)

To enable the paging feature of the tree grid (Treegrid), you must add the ' pagination:true ' property so that the page and rows parameters are sent to the server when it loads.

 <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= ">Name</th> <th field=" Quantity "width=" "align=" "Right
  " >Quantity< /th>
  <th field= "Price" width= "I" align= "right" formatter= "Formatdollar" >Price</th>
  < Th field= "Total" width= "he" align= "right" formatter= "Formatdollar" >Total</th>
  </tr>
 < /thead>
 </table>

Server-side 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 the products where parentid=0");
 $row = Mysql_fetch_row ($RS);
 
 $result ["total"] = $row [0];
 $rs = mysql_query ("SELECT * from the 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 the 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 (*) F"ROM products where parentid= $id ");
 $row = Mysql_fetch_array ($RS); return $row [0] > 0?
True:false;
 }

The parameters sent to the server include:
Page : the current page to load.
rows: page size size.
ID: The ID value of the parent row, and the row returned from the server is added.
When you expand a row node, the ' ID ' value is greater than 0. When you change the page number, the ' ID ' value should be set to 0来 to place the load child row.
Three, Easyui tree grid lazy Load node
Sometimes we've got the full hierarchical tree grid (Treegrid) of data. We also want the tree grid (Treegrid) to lazily load nodes at a hierarchical level. First, only the top-level nodes are loaded. Then click on the expansion icon of the node to load its child nodes. This tutorial shows you how to create a tree grid (Treegrid) with lazy load attributes.

Create a tree grid (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= "<th" >Name</th>
  field= "size" width= "M" align= "right" >Size</th>
  <th field= "date" width= ">modified date</th>
  </tr>
 </thead>
 </" Table>

In order to place the load child nodes, we need to rename the ' Children ' attribute for each node. As the following code shows, the ' Children ' property is renamed ' Children1 '. When we expand a node, we call the ' append ' method to load its child node data.
' 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;
 }

The above is for the tree-shaped network related operations, I hope to help you learn, we can combine the previous article to learn, there will be unexpected harvest.

Related article reading: Easy learning jquery plugin Easyui easyui Create a Tree network (1)