创建异步树形菜单

  1. 创建树形菜单的ul标签

    <ul class="easyui-tree" id="treeMenu">
    </ul>
  2. 写js代码,对菜单的ul标签元素使用tree函数
    $(function(){
    $('#treeMenu').tree({
    url:'tree_data.json' //url的值是异步获取数据的页面地址
    });
    });
  3. 写用来异步获取数据的php页面(tree_data.json页面)。
    返回的需是Json值(此处用数组代替从数据库获取的数据,以省略连接数据库过程)
    $result = [];
    
    //节点一
    $prodArr = [
    "id" => ,
    "text" => "商品管理",
    "state" => "open",
    "children" => [
    [
    "id" => ,
    "text" => "添加商品",
    "state" => "open",
    "attributes" => [
    "url" => "http://abc.com/test.php"
    ]
    ],
    [
    "id" => ,
    "text" => "修改商品",
    "state" => "open",
    "attributes" => [
    "url" => "http://abc.com/test2.php"
    ]
    ]
    ]
    ]; //节点二
    $newsArr = [
    "id" => ,
    "text" => "新闻管理",
    "state" => "open",
    "children" => [
    [
    "id" => ,
    "text" => "添加新闻",
    "state" => "open"
    ],
    [
    "id" => ,
    "text" => "修改新闻",
    "state" => "open"
    ]
    ]
    ]; //节点三
    $userArr = [
    "id" => ,
    "text" => "用户管理",
    "state" => "open",
    "children" => [
    [
    "id" => ,
    "text" => "添加用户",
    "state" => "open"
    ],
    [
    "id" => ,
    "text" => "修改用户",
    "state" => "open"
    ]
    ]
    ]; Array_push($result, $prodArr, $newsArr, $userArr);
    echo json_encode($result);

    说明:
    节点的属性:
    id:节点ID,可以作为参数来异步向页面地址获取子节点数据
    text:节点文本
    state:节点状态。取值为open(缺省默认值)或close。当设置为close时,会自动异步获取子节点的数据
    checked:指明节点是否被选中。
    attributes:自定义属性
    children:以数组的形式包含子节点       (更多细节知识可查看easyui官网中tree知识点)

到这,异步树形菜单就完成了。

动态添加标签页tab

  1. 创建用来包裹标签页tab的外层标签

    <div id="contentTabs" class="easyui-tabs" style="width:100%;height:100%;">
    </div>
  2. 在js中定义addTab函数
    function addTab(title, url){
    if ($('#contentTabs').tabs('exists', title)){
    $('#contentTabs').tabs('select', title);
    } else {
    var content = '<iframe scrolling="auto" frameborder="0" src="'+url+'" style="width:100%;height:100%;"></iframe>';
    $('#contentTabs').tabs('add',{
    title:title,
    content:content,
    closable:true
    });
    }
    }
  3. 在树形菜单的点击事件函数中调用addTab函数
    $(function(){
    $("#treeMenu").tree({
    onClick:function(node){
    if (node.attributes !== undefined && node.attributes.url !== undefined) {
    addTab(node.text,node.attributes.url);
    }
    }
    });
    });

最后,如图显示

EasyUI创建异步树形菜单和动态添加标签页tab的更多相关文章

  1. 雷林鹏分享:jQuery EasyUI 树形菜单 - 创建异步树形菜单

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

  2. ES6面向对象 动态添加标签页

    HTML <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml&quo ...

  3. EasyUI 布局 - 动态添加标签页(Tabs)

    首先导入js <link rel="stylesheet" href="../js/easyui/themes/default/easyui.css"&g ...

  4. easyui 动态添加标签页,总结

    步骤 1:创建 Tabs <div style="margin-bottom:10px"> <a href="#" class="e ...

  5. js 面向对象 动态添加标签

    有点逻辑 上代码 thml布局 点击查看代码 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  6. 使用 EasyUI 创建左侧导航菜单

    使用 JQuery EasyUI 创建左侧导航菜单,菜单的数据由后台服务提供. 效果图 HTML 元素 <div id="menuAccordion"></div ...

  7. EasyUI中动态生成标签页

    这是最近学到的内容,当时是有思路但是不知道怎么获取当前的点击对象,就没有实现功能,通过更深入的学习,我知道了不仅仅是Java,Oracle中有一个this,同样的EasyUI中也存在一个this,来获 ...

  8. dtree实现动态加载树形菜单,动态插入树形菜单

    1.导入  dtree文件    dtree.css   img文件夹   dtree.js 2. 建立对应 的数据库      1      父ID     name    id 3    建立连接 ...

  9. C# 后台动态添加标签(span,div) 以及模板添加

    很多时候.我们需要在后台用C#代码添加html标签.而不是在html源码中添加. 比如在html源码中简单的一个input 标签 <input type="type" nam ...

随机推荐

  1. [No00007B]DreamweaverCC 的CSS代码格式化

    Dreamweaver自带的代码格式化功能. 1.步骤:命令 -> 应用源格式. 2.你可以选择你的偏好.特别是css代码,有些人喜欢每个属性单独一行,有些人喜欢把所有属性写在同一行.步骤:编辑 ...

  2. asp.net页面关闭的时候如何触发事件?

      <script type="text/javascript"> var pb_strConfirmCloseMessage; var pb_blnCloseWind ...

  3. ZH奶酪:自然语言处理工具LTP语言云调用方法

    前言 LTP语言云平台 不支持离线调用: 支持分词.词性标注.命名实体识别.依存句法分析.语义角色标注: 不支持自定义词表,但是你可以先用其他支持自定义分词的工具(例如中科院的NLPIR)把文本进行分 ...

  4. 如何重新划分linux分区大小

    1.下载脚本文件,将脚本文件内容复制 chmod +x resize.sh sudo ./resize.sh 输入上面命令后会看到下面的结果 root@odroid:~# sudo ./resize. ...

  5. Oracle 实验四-七

    shutdown immediateORA-01097: 无法在事务处理过程中关闭 - 请首先提交或回退 解决:先 "commit" 实验四 SQL Production :: C ...

  6. 年底发福利了——分享一下我的.NET软件开发资源

    最近建了一个.NET软件开发资源的360网盘共享群,把收集的一些.NET软件开发资源分享给大家,也欢迎大家把好的东东分享一下. 资源主要有:开发工具.控件资源.书籍教程.网页设计.源码资源几大类,也希 ...

  7. try catch中用了 Response.Redirect 引发的线程异常终止

    记录一下,提醒自己. 今天写代码的时候,在try 中写了一句  Response.Redirect 在 catch 把页面重定向到了另外一个地方 本来是想打算,如果没出现异常,就定到页面A,如果异常了 ...

  8. 不一样的猜数字游戏 — leetcode 375. Guess Number Higher or Lower II

    好久没切 leetcode 的题了,静下心来切了道,这道题比较有意思,和大家分享下. 我把它叫做 "不一样的猜数字游戏",我们先来看看传统的猜数字游戏,Guess Number H ...

  9. 从一个简单的ASP.NET 5站点开启.NET跨平台之旅

    在经历了阿里云上“黑色1秒”的空欢喜之后,我们“被迫”考虑实现.NET的跨平台,将Web服务器由Windows换成Linux.而这种“被迫”在一个存在已久的愿望下,变得水到渠成.这个愿望就是 —— “ ...

  10. JS/CSS缓存杀手——VS插件

    背景 前些天去考科目二,感觉经历了一场不是高考却胜似高考的考试(10年前的5分之差, 还是难以释怀)!    一行八人,就我学的时间最少(4天,8人一辆车),教练都觉得我肯定还得再来一次! 靠着运气和 ...