트리 네트워크의 기본 연산을 구현하는 jQuery 플러그인 EasyUI EasyUI를 쉽게 배워보세요(2)_jquery

1. EasyUI 트리 그리드의 동적 로딩
트리 그리드를 동적으로 로드하면 서버에서 데이터의 일부 행을 로드하는 데 도움이 되므로 대용량 데이터를 로드하는 데 오랜 시간이 걸리지 않습니다. 이 튜토리얼에서는 동적 로딩 기능을 사용하여 TreeGrid를 생성하는 방법을 보여줍니다.

트리 그리드 생성(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>

서버측 코드
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. EasyUI 트리 그리드에 페이징 추가
두 번째 부분에서는 동적 로딩 기능을 사용하여 트리 그리드(TreeGrid)에 페이지 매김을 추가하는 방법을 설명합니다.

트리 그리드 생성(TreeGrid)

TreeGrid의 페이지 매김 기능을 활성화하려면 'pagination:true' 속성을 추가해야 페이지가 로드될 때 'page' 및 'rows' 매개변수가 서버로 전송됩니다.

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

서버측 코드

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

서버로 전송되는 매개변수는 다음과 같습니다.
페이지: 현재 로드할 페이지입니다.
행: 페이지 크기.
id: 서버에서 반환된 행이 추가될 상위 행의 id 값입니다.
행 노드를 확장할 때 'id' 값이 0보다 큽니다. 페이지 번호 변경 시 'id' 값을 0으로 설정하여 로딩 하위 행을 배치해야 합니다.
3. EasyUI 트리 그리드 지연 로딩 노드
이미 전체 계층적 TreeGrid 데이터가 있는 경우도 있습니다. 또한 TreeGrid가 노드를 계층적으로 지연 로드하기를 원합니다. 먼저 최상위 노드만 로드됩니다. 그런 다음 노드의 확장 아이콘을 클릭하여 하위 노드를 로드합니다. 이 튜토리얼에서는 지연 로딩을 사용하여 TreeGrid를 만드는 방법을 보여줍니다.

트리 그리드 생성(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>

로드 중인 하위 노드를 배치하려면 각 노드의 'children' 속성 이름을 바꿔야 합니다. 아래 코드와 같이 'children' 속성의 이름이 'children1'로 변경되었습니다. 노드가 확장되면 'append' 메소드를 호출하여 하위 노드 데이터를 로드합니다.
'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;
 }

위 내용은 트리 네트워크에 관련된 작업입니다. 이전 글과 연계하여 공부하시면서 모두의 학습에 도움이 되셨으면 좋겠습니다.

관련 기사 읽기: "배우기 쉬운 jQuery 플러그인 EasyUI EasyUI로 트리 네트워크 만들기 (1)"