轻松学习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 相关文章推荐
统一接口:为FireFox添加IE的方法和属性的js代码
Mar 25 Javascript
很多人都是用下面的js刷新站IP和PV
Sep 05 Javascript
jquery的extend和fn.extend的使用说明
Jan 09 Javascript
JS去除字符串两端空格的简单实例
Dec 27 Javascript
jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)
Aug 25 Javascript
使用JavaScript判断用户输入的是否为正整数(两种方法)
Feb 05 Javascript
简单谈谈axios中的get,post方法
Jun 25 Javascript
解决VUEX兼容IE上的报错问题
Mar 01 Javascript
详解webpack模块加载器兼打包工具
Sep 11 Javascript
详解JavaScript 异步编程
Jul 13 Javascript
Vue使用CDN引用项目组件,减少项目体积的步骤
Oct 30 Javascript
javascript中call,apply,bind的区别详解
Dec 11 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 开发环境配置(测试开发环境)
2010/04/28 PHP
基于PHP+Ajax实现表单验证的详解
2013/06/25 PHP
PHP 转义使用详解
2013/07/15 PHP
深入解析PHP 5.3.x 的strtotime() 时区设定 警告信息修复
2013/08/05 PHP
php随机显示图片的简单示例
2014/02/15 PHP
PHP小教程之实现双向链表
2014/06/12 PHP
php开发中的页面跳转方法总结
2015/04/26 PHP
PHP常用字符串操作函数实例总结(trim、nl2br、addcslashes、uudecode、md5等)
2016/01/09 PHP
Mac系统完美安装PHP7详细教程
2017/06/06 PHP
使用JavaScript检测Firefox浏览器是否启用了Firebug的代码
2010/12/28 Javascript
JS 实现点击a标签的时候让其背景更换
2013/10/15 Javascript
nodejs事件的监听与触发的理解分析
2015/02/12 NodeJs
javascript实现点击后变换按钮显示文字的方法
2015/05/13 Javascript
jquery实现TAB选项卡鼠标经过带延迟效果的方法
2015/07/27 Javascript
JS实现仿雅虎首页快捷登录入口及导航模块效果
2015/09/19 Javascript
BootStrap 可编辑表Table格
2016/11/24 Javascript
基于Marquee.js插件实现的跑马灯效果示例
2017/01/25 Javascript
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
2017/05/01 jQuery
js自定义瀑布流布局插件
2017/05/16 Javascript
深究AngularJS中$sce的使用
2017/06/12 Javascript
javascript实现文本框标签验证的实例代码
2018/10/14 Javascript
分享5个小技巧让你写出更好的 JavaScript 条件语句
2018/10/20 Javascript
移动端自适应flexible.js的使用方法(不用三大框架,仅写一个单html页面使用)推荐
2019/04/02 Javascript
微信小程序和百度的语音识别接口详解
2019/05/06 Javascript
比较详细Python正则表达式操作指南(re使用)
2008/09/06 Python
python中引用与复制用法实例分析
2015/06/04 Python
Python多线程下载文件的方法
2015/07/10 Python
python开发之str.format()用法实例分析
2016/02/22 Python
在windows系统中实现python3安装lxml
2016/03/23 Python
python+opencv实现动态物体识别
2018/01/09 Python
Python 中的 import 机制之实现远程导入模块
2019/10/29 Python
Keras 快速解决OOM超内存的问题
2020/06/11 Python
Python实现文件压缩和解压的示例代码
2020/08/12 Python
党员干部承诺书
2014/03/25 职场文书
活动总结怎么写啊
2014/05/07 职场文书
先进单位事迹材料
2014/12/25 职场文书