轻松学习jQuery插件EasyUI EasyUI实现树形网络基本操作(2)


Posted in Javascript onNovember 30, 2015

一、EasyUI树形网格动态加载
动态加载树形网格有助于从服务器上加载部分的行数据,避免加载大型数据的长时间等待。本教程将向您展示如何创建带有动态加载特性的树形网格(TreeGrid)。

轻松学习jQuery插件EasyUI EasyUI实现树形网络基本操作(2)

创建树形网格(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;
}

二、EasyUI树形网格添加分页
第二部分教大家如何向带有动态加载特性的树形网格(TreeGrid)添加分页。

 轻松学习jQuery插件EasyUI EasyUI实现树形网络基本操作(2)

创建树形网格(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;
}

发送到服务器的参数包括:
page:要加载的当前页面。
rows:页面尺寸大小。
id:父行的 id 值,从服务器返回的行将被添加。
当展开一个行节点时,'id' 值是大于 0 的。 当改变页码时,'id' 值应该被设置为 0 来放置加载子行。
三、EasyUI树形网格惰性加载节点
有时我们已经得到充分的分层树形网格(TreeGrid)的数据。 我们还想让树形网格(TreeGrid)按层次惰性加载节点。 首先,只加载顶层节点。 然后点击节点的展开图标来加载它的子节点。 本教程展示如何创建带有惰性加载特性的树形网格(TreeGrid)。

 轻松学习jQuery插件EasyUI EasyUI实现树形网络基本操作(2)

创建树形网格(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)》

Javascript 相关文章推荐
延时重复执行函数 lLoopRun.js
May 08 Javascript
js 判断一个元素是否在页面中存在
Dec 27 Javascript
javascript中typeof操作符和constucor属性检测
Feb 26 Javascript
基于Bootstrap的Metronic框架实现页面链接收藏夹功能
Aug 29 Javascript
微信小程序 石头剪刀布实例代码
Jan 04 Javascript
javascript实现复选框全选或反选
Feb 04 Javascript
Vue中父组件向子组件通信的方法
Jul 11 Javascript
Angular中封装fancyBox(图片预览)遇到问题小结
Sep 01 Javascript
vue使用ElementUI时导航栏默认展开功能的实现
Jul 04 Javascript
微信小程序下拉框搜索功能的实现方法
Jul 31 Javascript
vue动画—通过钩子函数实现半场动画操作
Aug 09 Javascript
JavaScript字符串转数字的简单实现方法
Nov 27 Javascript
基于javascript实现浏览器滚动条快到底部时自动加载数据
Nov 30 #Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)
Nov 30 #Javascript
轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
Nov 30 #Javascript
JS简单模拟触发按钮点击功能的方法
Nov 30 #Javascript
移动手机APP手指滑动切换图片特效附源码下载
Nov 30 #Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车
Nov 30 #Javascript
浅析node连接数据库(express+mysql)
Nov 30 #Javascript
You might like
php使用ereg验证文件上传的方法
2014/12/16 PHP
OAuth认证协议中的HMACSHA1加密算法(实例)
2017/10/25 PHP
如何解决PHP获取不到SESSION信息之一般情况
2019/10/10 PHP
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
2010/01/12 Javascript
Javascript的常规数组和关联数组对比小结
2012/05/24 Javascript
JavaScript高级程序设计(第3版)学习笔记 概述
2012/10/11 Javascript
javascript检测浏览器的缩放状态实现代码
2014/09/28 Javascript
js replace()去除代码中空格的实例
2017/02/14 Javascript
JS及JQuery对Html内容编码,Html转义
2017/02/17 Javascript
node.js操作MongoDB的实例详解
2017/10/11 Javascript
js 图片转base64的方式(两种)
2018/04/24 Javascript
JavaScript中 ES6变量的结构赋值
2018/07/10 Javascript
Vue头像处理方案小结
2018/07/26 Javascript
js中对象与对象创建方法的各种方法
2019/02/27 Javascript
Vue实现点击显示不同图片的效果
2019/08/10 Javascript
Vue 技巧之控制父类的 slot
2020/02/24 Javascript
js实现时钟定时器
2020/03/26 Javascript
在vue中使用Echarts利用watch做动态数据渲染操作
2020/07/20 Javascript
[01:45]2014DOTA2 TI预选赛预选赛 战前探营!
2014/05/21 DOTA
深入理解Javascript中的this关键字
2015/03/27 Python
python 制作自定义包并安装到系统目录的方法
2018/10/27 Python
pyqt5 禁止窗口最大化和禁止窗口拉伸的方法
2019/06/18 Python
Django框架配置mysql数据库实现过程
2020/04/22 Python
Python logging自定义字段输出及打印颜色
2020/11/30 Python
HTML5中如何显示视频呢 HTML5视频播放demo
2013/06/08 HTML / CSS
惠普墨西哥官方商店:HP墨西哥
2016/12/01 全球购物
巴基斯坦购物网站:Goto
2019/03/11 全球购物
Shop Apotheke瑞士:您的健康与美容网上商店
2019/10/09 全球购物
怎样声明接口
2014/09/19 面试题
工作目标责任书
2014/07/23 职场文书
文员试用期转正自我鉴定
2014/09/14 职场文书
党的群众路线调研报告
2014/11/03 职场文书
会议营销主持词
2015/07/03 职场文书
2016年寒假见闻
2015/10/10 职场文书
高中信息技术教学反思
2016/02/16 职场文书
2016年暑期社会实践活动总结报告
2016/04/06 职场文书