Pelajari pemalam jQuery EasyUI EasyUI dengan mudah untuk melaksanakan operasi asas rangkaian pepohon (2)_jquery

1. Pemuatan dinamik grid pokok EasyUI
Pemuatan grid pokok secara dinamik membantu memuatkan separa baris data daripada pelayan, mengelakkan menunggu lama untuk memuatkan data yang besar. Tutorial ini akan menunjukkan kepada anda cara membuat TreeGrid dengan ciri pemuatan dinamik.

Buat grid pokok (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>

Kod sisi pelayan
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. Tambahkan halaman pada grid pepohon EasyUI
Bahagian kedua mengajar anda cara menambah penomboran pada grid pokok (TreeGrid) dengan ciri pemuatan dinamik.

Buat grid pokok (TreeGrid)

Untuk mendayakan ciri penomboran TreeGrid, anda mesti menambah atribut 'penomboran: benar', supaya parameter 'halaman' dan 'baris' akan dihantar ke pelayan apabila halaman dimuatkan.

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

Kod sisi pelayan

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

Parameter yang dihantar ke pelayan termasuk:
halaman: Halaman semasa untuk dimuatkan.
baris: Saiz halaman.
id: Nilai id baris induk yang baris dikembalikan daripada pelayan akan ditambahkan.
Apabila mengembangkan nod baris, nilai 'id' lebih besar daripada 0. Apabila menukar nombor halaman, nilai 'id' hendaklah ditetapkan kepada 0 untuk meletakkan subrow pemuatan.
3. grid pepohon EasyUI nod pemuatan malas
Kadangkala kami sudah mempunyai data TreeGrid hierarki penuh. Kami juga mahu TreeGrid memuatkan nod secara hierarki dengan malas. Pertama, hanya nod peringkat atas dimuatkan. Kemudian klik ikon kembangkan nod untuk memuatkan nod anaknya. Tutorial ini menunjukkan cara membuat TreeGrid dengan pemuatan malas.

Buat grid pokok (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>

Untuk meletakkan loading child nod, kita perlu menamakan semula atribut 'children' untuk setiap nod. Seperti yang ditunjukkan dalam kod di bawah, sifat 'kanak-kanak' dinamakan semula kepada 'kanak-kanak1'. Apabila nod dikembangkan, kami memanggil kaedah 'tambah' untuk memuatkan data nod anaknya.
kod '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;
 }

Di atas adalah operasi yang berkaitan untuk rangkaian pokok Saya harap ia akan membantu pembelajaran semua orang. Anda boleh belajar bersama-sama dengan artikel sebelumnya, dan anda akan mendapat keuntungan yang tidak dijangka.

Baca artikel berkaitan: "Mudah untuk mempelajari pemalam jQuery EasyUI EasyUI untuk mencipta rangkaian pokok (1)"