轻松学习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 相关文章推荐
Javascript 篱式条件判断
Aug 22 Javascript
javascript中用星号表示预录入内容的实现代码
Jan 08 Javascript
zTree插件之单选下拉菜单实例代码
Nov 07 Javascript
jQuery实现table隔行换色和鼠标经过变色的两种方法
Jun 15 Javascript
深入理解JS中的substr和substring
Apr 26 Javascript
jquery实现简单Tab切换菜单效果
Jul 17 Javascript
js实现4个方向滚动的球
Mar 06 Javascript
EasyUI的DataGrid每行数据添加操作按钮的实现代码
Aug 22 Javascript
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
May 13 Javascript
Vue+Webpack完美整合富文本编辑器TinyMce的方法
Nov 30 Javascript
vue-mugen-scroll组件实现pc端滚动刷新
Aug 16 Javascript
vue实现select下拉显示隐藏功能
Sep 30 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
用ADODB来让PHP操作ACCESS数据库的方法
2006/12/31 PHP
php FPDF类库应用实现代码
2009/03/20 PHP
PHP文件操作实现代码分享
2011/09/01 PHP
laravel 5.3中自定义加密服务的方案详解
2017/05/09 PHP
PHP编程快速实现数组去重的方法详解
2017/07/22 PHP
PHP实现的简单sha1加密功能示例
2017/08/27 PHP
PHP实现登录验证码校验功能
2018/05/17 PHP
让jQuery与其他JavaScript库并存避免冲突的方法
2013/12/23 Javascript
推荐4个原生javascript常用的函数
2015/01/12 Javascript
JavaScript动态插入CSS的方法
2015/12/10 Javascript
jQuery Mobile动态刷新页面样式的实现方法
2016/05/28 Javascript
JavaScript必知必会(二) null 和undefined
2016/06/08 Javascript
微信小程序 定位到当前城市实现实例代码
2017/02/23 Javascript
js清除浏览器缓存的几种方法
2017/03/15 Javascript
利用node.js如何搭建一个简易的即时响应服务器
2017/05/28 Javascript
react.js 父子组件数据绑定实时通讯的示例代码
2017/09/25 Javascript
node实现爬虫的几种简易方式
2019/08/22 Javascript
Vue.js如何使用Socket.IO的示例代码
2019/09/05 Javascript
layui清除radio的选中状态实例
2019/11/14 Javascript
JavaScript如何处理移动端拍摄图片旋转问题
2019/11/16 Javascript
vue中使用极验验证码的方法(附demo)
2019/12/04 Javascript
JavaScript事件概念详解(区分静态注册和动态注册)
2021/02/05 Javascript
用Python操作字符串之rindex()方法的使用
2015/05/19 Python
python编程嵌套函数实例代码
2018/02/11 Python
Python遍历numpy数组的实例
2018/04/04 Python
利用Python半自动化生成Nessus报告的方法
2019/03/19 Python
深入浅析Python 函数注解与匿名函数
2020/02/24 Python
美国滑雪和滑雪板商店:Buckman
2018/03/03 全球购物
俄罗斯EPL钻石珠宝店:ЭПЛ
2019/10/22 全球购物
荷兰家电购物网站:Expert.nl
2020/01/18 全球购物
GWT都有什么特性
2016/12/02 面试题
2014年应届大学生自我评价
2014/01/09 职场文书
洗发露广告词
2014/03/14 职场文书
小学生五年级大队长竞选发言稿
2014/09/12 职场文书
解除劳动合同通知书范本
2015/04/16 职场文书
入伍通知书
2015/04/23 职场文书