轻松学习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 相关文章推荐
在视频前插入广告
Nov 20 Javascript
js 事件小结 表格区别
Aug 13 Javascript
自己的js工具_Form 封装
Aug 21 Javascript
Javascript实现视频轮播在pc端与移动端均可
Sep 29 Javascript
jQuery的animate函数实现图文切换动画效果
May 03 Javascript
JS更改select内option属性的方法
Oct 14 Javascript
JavaScript 计算笛卡尔积实例详解
Dec 02 Javascript
JavaScript中利用for循环遍历数组
Jan 15 Javascript
vue项目实现记住密码到cookie功能示例(附源码)
Jan 31 Javascript
详解使用vue-admin-template的优化历程
May 20 Javascript
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 jQuery
微信小程序中data-key属性之数据传输(经验总结)
Aug 22 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生成带logo二维码方法小结
2016/04/08 PHP
thinkPHP5.0框架命名空间详解
2017/03/18 PHP
Cookie跨域问题解决方案代码示例
2020/11/24 PHP
JavaScript 异步调用框架 (Part 6 - 实例 &amp; 模式)
2009/08/04 Javascript
ExtJS下 Ext.Direct加载和提交过程排错小结
2013/04/02 Javascript
清除div下面的所有标签的方法
2014/02/17 Javascript
Javascript中对象继承的实现小例
2014/05/12 Javascript
JS弹出新窗口被拦截的解决方法
2016/08/09 Javascript
原生JS下拉加载插件分享
2016/12/26 Javascript
ES6学习之变量的解构赋值
2017/02/12 Javascript
深入理解Vue官方文档梳理之全局API
2017/11/22 Javascript
vue3.0 CLI - 1 - npm 安装与初始化的入门教程
2018/09/14 Javascript
vue 获取元素额外生成的data-v-xxx操作
2020/09/09 Javascript
在antd Form表单中select设置初始值操作
2020/11/02 Javascript
[05:15]DOTA2英雄梦之声_第16期_灰烬之灵
2014/06/21 DOTA
关于numpy中np.nonzero()函数用法的详解
2017/02/07 Python
python实现决策树
2017/12/21 Python
对python中的pop函数和append函数详解
2018/05/04 Python
Python3.5面向对象与继承图文实例详解
2019/04/24 Python
python多线程并发实例及其优化
2019/06/27 Python
Python基于unittest实现测试用例执行
2020/11/25 Python
HTML5之web workers_动力节点Java学院整理
2017/07/17 HTML / CSS
纽约和芝加哥当天送花:Ode à la Rose
2019/07/05 全球购物
四川internet信息高速公路(C#)笔试题
2012/02/29 面试题
电大自我鉴定
2013/10/27 职场文书
产品工艺师的岗位职责
2013/11/15 职场文书
大学毕业感言50字
2014/02/07 职场文书
学生干部学习的自我评价
2014/02/18 职场文书
毕业生求职自荐书范文
2014/03/27 职场文书
护士感人事迹
2014/05/01 职场文书
开业庆典活动策划方案
2014/09/21 职场文书
个人存款证明书
2014/10/18 职场文书
2016年寒假社会实践活动总结
2015/03/27 职场文书
2015年乡镇卫生院工作总结
2015/04/22 职场文书
教师纪律作风整顿心得体会
2016/01/23 职场文书