轻松学习jQuery插件EasyUI EasyUI创建树形菜单


Posted in Javascript onNovember 30, 2015

一、EasyUI使用标记创建树形菜单
一个树形菜单(Tree)可以从标记创建。easyui 树形菜单(Tree)也可以定义在 <ul> 元素中。无序列表的 <ul> 元素提供一个基础的树(Tree)结构。每一个 <li> 元素将产生一个树节点,子 <ul> 元素将产生一个父树节点。

轻松学习jQuery插件EasyUI EasyUI创建树形菜单

创建树形菜单(Tree)

<ul class="easyui-tree">
  <li>
   <span>Folder</span>
   <ul>
    <li>
     <span>Sub Folder 1</span>
     <ul>
      <li><span>File 11</span></li>
      <li><span>File 12</span></li>
      <li><span>File 13</span></li>
     </ul>
    </li>
    <li><span>File 2</span></li>
    <li><span>File 3</span></li>
   </ul>
  </li>
  <li><span>File21</span></li>
 </ul>

二、EasyUI创建异步树形菜单
为了创建异步的树形菜单(Tree),每一个树节点必须要有一个 'id' 属性,这个将提交回服务器去检索子节点数据。

轻松学习jQuery插件EasyUI EasyUI创建树形菜单

创建树形菜单(Tree)

<ul id="tt" class="easyui-tree"
 url="tree2_getdata.php">
 </ul>

服务器端代码

$id = isset($_POST['id']) ? intval($_POST['id']) : 0;
 
 include 'conn.php';
 
 $result = array();
 $rs = mysql_query("select * from nodes where parentId=$id");
 while($row = mysql_fetch_array($rs)){
 $node = array();
 $node['id'] = $row['id'];
 $node['text'] = $row['name'];
 $node['state'] = has_child($row['id']) ? 'closed' : 'open';
 array_push($result,$node);
 }
 
 echo json_encode($result);
 
 function has_child($id){
 $rs = mysql_query("select count(*) from nodes where parentId=$id");
 $row = mysql_fetch_array($rs);
 return $row[0] > 0 ? true : false;
 }

三、EasyUI树形菜单添加节点
本节向您展示如何附加节点到树形菜单(Tree)。我们将创建一个包含水果和蔬菜节点的食品树,然后添加一些其他水果到已存在的水果节点。

轻松学习jQuery插件EasyUI EasyUI创建树形菜单

创建食品树
首先,我们创建食品树,代码如下所示:

<div style="width:200px;height:auto;border:1px solid #ccc;">
 <ul id="tt" class="easyui-tree" url="tree_data.json"></ul>
 </div>

请注意,树(Tree)组件是定义在 <ul> 标记中,树节点数据从 URL "tree_data.json" 加载。
得到父节点

然后我们通过点击节点选择水果节点,我们将添加一些其他的水果数据。执行 getSelected 方法得到处理节点:
 var node = $('#tt').tree('getSelected');
getSelected 方法的返回结果是一个 javascript 对象,它有一个 id、text、target 属性。target 属性是一个 DOM 对象,引用选中节点,它的 append 方法将用于附加子节点。
附加节点

var node = $('#tt').tree('getSelected');
 if (node){
 var nodes = [{
 "id":13,
 "text":"Raspberry"
 },{
 "id":14,
 "text":"Cantaloupe"
 }];
 $('#tt').tree('append', {
 parent:node.target,
 data:nodes
 });
 }

当添加一些水果,您将看见:

轻松学习jQuery插件EasyUI EasyUI创建树形菜单

正如您所看到的,使用 easyui 的树(Tree)插件去附加节点不是那么的难。
四、EasyUI创建带复选框的树形菜单
easyui 的树(Tree)插件允许您创建一个复选框树。如果您点击一个节点的复选框,这个点击的节点信息将向上和向下继承。例如:点击 'tomato' 节点的复选框,您将会看见 'Vegetables' 节点现在仅仅选中部分。

轻松学习jQuery插件EasyUI EasyUI创建树形菜单

创建复选框树

<ul id="tt" class="easyui-tree"
 url="data/tree_data.json"
 checkbox="true">
</ul>

五、EasyUI树形菜单拖放控制
当在一个应用中使用树(Tree)插件,拖拽(drag)和放置(drop)功能要求允许用户改变节点位置。启用拖拽(drag)和放置(drop)操作,所有您需要做的就是把树(Tree)插件的 'dnd' 属性设置为 true。

轻松学习jQuery插件EasyUI EasyUI创建树形菜单

创建树形菜单(Tree)

$('#tt').tree({
 dnd: true,
 url: 'tree_data.json'
});

当在一个树节点上发生放置操作,'onDrop' 事件将被触发,您应该做一些或更多的操作,例如保存节点状态到远程服务器端,等等。

onDrop: function(targetNode, source, point){
 var targetId = $(target).tree('getNode', targetNode).id;
 $.ajax({
 url: '...',
 type: 'post',
 dataType: 'json',
 data: {
 id: source.id,
 targetId: targetId,
 point: point
 }
 });
}

六、EasyUI树形菜单加载父/子节点
通常表示一个树节点的方式就是在每一个节点存储一个 parentid。 这个也被称为邻接列表模型。 直接加载这些数据到树形菜单(Tree)是不允许的。 但是我们可以在加载树形菜单之前,把它转换为标准标准的树形菜单(Tree)数据格式。 树(Tree)插件提供一个 'loadFilter' 选项函数,它可以实现这个功能。 它提供一个机会来改变任何一个进入数据。 本教程向您展示如何使用 'loadFilter' 函数加载父/子节点到树形菜单(Tree)。

轻松学习jQuery插件EasyUI EasyUI创建树形菜单

父/子节点数据

[
{"id":1,"parendId":0,"name":"Foods"},
{"id":2,"parentId":1,"name":"Fruits"},
{"id":3,"parentId":1,"name":"Vegetables"},
{"id":4,"parentId":2,"name":"apple"},
{"id":5,"parentId":2,"name":"orange"},
{"id":6,"parentId":3,"name":"tomato"},
{"id":7,"parentId":3,"name":"carrot"},
{"id":8,"parentId":3,"name":"cabbage"},
{"id":9,"parentId":3,"name":"potato"},
{"id":10,"parentId":3,"name":"lettuce"}
]
使用 'loadFilter' 创建树形菜单(Tree)
$('#tt').tree({
 url: 'data/tree6_data.json',
 loadFilter: function(rows){
 return convert(rows);
 }
});

转换的实现

function convert(rows){
 function exists(rows, parentId){
 for(var i=0; i<rows.length; i++){
 if (rows[i].id == parentId) return true;
 }
 return false;
 }
 
 var nodes = [];
 // get the top level nodes
 for(var i=0; i<rows.length; i++){
 var row = rows[i];
 if (!exists(rows, row.parentId)){
 nodes.push({
 id:row.id,
 text:row.name
 });
 }
 }
 
 var toDo = [];
 for(var i=0; i<nodes.length; i++){
 toDo.push(nodes[i]);
 }
 while(toDo.length){
 var node = toDo.shift(); // the parent node
 // get the children nodes
 for(var i=0; i<rows.length; i++){
 var row = rows[i];
 if (row.parentId == node.id){
 var child = {id:row.id,text:row.name};
 if (node.children){
  node.children.push(child);
 } else {
  node.children = [child];
 }
 toDo.push(child);
 }
 }
 }
 return nodes;
}

以上就是关于EasyUI创建树形菜单的基本操作方法,希望大家可以学以致用,真正的掌握其中的技巧。

Javascript 相关文章推荐
简单通用的JS滑动门代码
Dec 19 Javascript
javascript一些实用技巧小结
Mar 18 Javascript
silverlight线程与基于事件驱动javascript引擎(实现轨迹回放功能)
Aug 09 Javascript
使用js实现一个可编辑的select下拉列表
Feb 20 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
Oct 12 Javascript
react实现一个优雅的图片占位模块组件详解
Oct 30 Javascript
使用vue-cli+webpack搭建vue开发环境的方法
Dec 22 Javascript
vue.js与element-ui实现菜单树形结构的解决方法
Apr 21 Javascript
详解vue组件开发脚手架
Jun 15 Javascript
微信小程序实现留言板
Oct 31 Javascript
JavaScript中this函数使用实例解析
Feb 21 Javascript
nuxt 路由、过渡特效、中间件的实现代码
Nov 06 Javascript
轻松学习jQuery插件EasyUI EasyUI实现树形网络基本操作(2)
Nov 30 #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
You might like
PHP中替换键名的简易方法示例详解
2014/01/07 PHP
php根据日期判断星座的函数分享
2014/02/13 PHP
php中的动态调用实例分析
2015/01/07 PHP
PHP Header失效的原因分析及解决方法
2016/11/16 PHP
利用jQuery的deferred对象实现异步按顺序加载JS文件
2013/03/17 Javascript
jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法
2013/05/13 Javascript
JS获取计算机mac地址以及IP的实现方法
2014/01/08 Javascript
利用js正则表达式验证手机号,email地址,邮政编码
2014/01/23 Javascript
alert出数组中的随即值代码
2014/09/25 Javascript
Javascript核心读书有感之词法结构
2015/02/01 Javascript
AngularJS ng-bind-template 指令详解
2016/07/30 Javascript
jquery的checkbox,radio,select等方法小结
2016/08/30 Javascript
jQuery实现鼠标经过显示动画边框特效
2017/03/24 jQuery
React Native中Navigator的使用方法示例
2017/10/13 Javascript
微信小程序实现流程进度的图样式功能
2018/01/16 Javascript
bootstrap中日历范围选择插件daterangepicker的使用详解
2018/04/17 Javascript
JavaScript实现背景自动切换小案例
2019/09/27 Javascript
微信小程序仿抖音视频之整屏上下切换功能的实现代码
2020/05/24 Javascript
详解Python3中的Sequence type的使用
2015/08/01 Python
浅谈Python 字符串格式化输出(format/printf)
2016/07/21 Python
Python+matplotlib绘制不同大小和颜色散点图实例
2018/01/19 Python
python web.py开发httpserver解决跨域问题实例解析
2018/02/12 Python
简述python Scrapy框架
2020/08/17 Python
HTML5无刷新改变当前url的代码
2017/03/15 HTML / CSS
HTML5 Blob 实现文件下载功能的示例代码
2019/11/29 HTML / CSS
Kent & Curwen:与大卫·贝克汉姆合作
2017/06/13 全球购物
Crocs欧洲官网:Crocs Europe
2020/01/14 全球购物
J2SDK1.5与J2SDK5.0有什么区别
2012/09/19 面试题
应届毕业生个人自荐信范文
2013/11/30 职场文书
水利水电建筑施工应届生求职信
2014/07/04 职场文书
2014年度安全生产目标管理责任书
2014/07/25 职场文书
八一建军节主持词
2015/07/01 职场文书
JS实现扫雷项目总结
2021/05/19 Javascript
Python编程编写完善的命令行工具
2021/09/15 Python
Java服务调用RestTemplate与HttpClient的使用详解
2022/06/21 Java/Android
SpringBoot Http远程调用的方法
2022/08/14 Java/Android