`
jeelee
  • 浏览: 637879 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

easy ui tree

 
阅读更多

action JSON的值是这样的:
{"systemMenuTreeList":[{"attributes":null,"children":[],"iconCls":null,"id":"282","state":"open","text":"test"},{"attributes":null,"children":[{"attributes":null,"children":[{"attributes":null,"children":[{"attributes":{"menuUrl":"dd"},"children":[],"iconCls":"ico-sub_menu","id":"1","state":"open","text":"系统管理"},{"attributes":{"menuUrl":"ee"},"children":[],"iconCls":"ico-sub_menu","id":"2","state":"open","text":"模组管理"},{"attributes":{"menuUrl":"ff"},"children":[],"iconCls":"ico-sub_menu","id":"3","state":"open","text":"父菜单管理"},{"attributes":{"menuUrl":null},"children":[],"iconCls":"ico-sub_menu","id":"4","state":"open","text":"子菜单管理"},{"attributes":{"menuUrl":null},"children":[],"iconCls":"ico-sub_menu","id":"5","state":"open","text":"用户管理"},{"attributes":{"menuUrl":null},"children":[],"iconCls":"ico-sub_menu","id":"6","state":"open","text":"用户权限管理"}],"iconCls":"icon-save","id":"1","state":"open","text":"系统管理"}],"iconCls":"icon-save","id":"1","state":"open","text":"系统管理"}],"iconCls":"ico-systems","id":"1","state":"open","text":"系统管理"},{"attributes":null,"children":[{"attributes":null,"children":[{"attributes":null,"children":[{"attributes":{"menuUrl":"www.baidu.com"},"children":[],"iconCls":"ico-sub_menu","id":"7","state":"open","text":"测试1"},{"attributes":{"menuUrl":"www.126.com"},"children":[],"iconCls":"ico-sub_menu","id":"8","state":"open","text":"测试2"},{"attributes":{"menuUrl":"cc"},"children":[],"iconCls":"ico-sub_menu","id":"9","state":"open","text":"测试3"}],"iconCls":"icon-save","id":"2","state":"open","text":"测试程序"}],"iconCls":"icon-save","id":"2","state":"open","text":"测试"}],"iconCls":"ico-systems","id":"2","state":"open","text":"测试"}]}

然后easy ui需要的JSON数据格式是:
[{
    "id":1,
    "text":"Folder1",
    "iconCls":"icon-save",
    "children":[{
        "text":"File1",
        "checked":true
    },{
        "text":"Books",
        "state":"open",
        "attributes":{
            "url":"/demo/book/abc",
            "price":100
        },
        "children":[{
            "text":"PhotoShop",
            "checked":true
        },{
            "id": 8,
            "text":"Sub Bookds",
            "state":"closed"
        }]
    }]
},{
    "text":"Languages",
    "state":"closed",
    "children":[{
        "text":"Java"
    },{
        "text":"C#"
    }]
}]



/*
* 获取系统菜单树JSON
*/
function getSystemMenuTree(){
//获取系统菜单树JSON数据
$('#menuTree').tree({     
        url: "../admin/systemMenuTreeJsonAction!getSystemMenuTreeJson", 
        loadFilter: function(data){ 
        //alert(data.systemMenuTreeList);
        return data.systemMenuTreeList;//这里必须经过处理,不能直接返回data            //return data;       
        } ,
        formatter:function(node){
    //return "<a href='#'>"+ node.text + "</a>";
        return node.text;
    },
    onClick: function(node){
    //alert($('#menuTree').tree('isLeaf',node.target));
    //alert(node.attributes.menuUrl);
    if($('#menuTree').tree('isLeaf',node.target)){
    alert(node.attributes.menuUrl);
    //window.location.href=node.attributes.menuUrl;
    window.navigate(node.attributes.menuUrl);
    alert(node.text);  // alert node text property when clicked
    }
    }
    });  
}
分享到:
评论

相关推荐

    easy ui tree 前后端树形结构项目 权限管理demo

    本项目"easy ui tree 前后端树形结构项目 权限管理demo"提供了一个完整的解决方案,使用了Easy UI Tree库来实现前端的树形结构,并结合SSM(Spring、SpringMVC、MyBatis)框架和MySQL数据库进行后端处理。...

    easy ui tree比较全的功能

    Easy UI Tree是一款基于jQuery和Easy UI框架的树形控件,它提供了丰富的功能,用于在Web应用中展示层次结构的数据。这个"easy ui tree比较全的功能"的示例旨在为初学者提供一个全面了解和学习Easy UI Tree特性的平台...

    jquery easy ui tree

    标题 "jquery easy ui tree" 指的是使用 jQuery Easy UI 实现的树形组件。 在 Easy UI 的 Tree 组件中,你可以通过简单的 HTML 结构和 JavaScript 配置来创建树形结构。以下是一些关键知识点: 1. **HTML 结构**:...

    Jquery easy ui Tree组件使用(tree11.json当数据源有bug)

    然而,标题提到"Jquery easy ui Tree组件使用(tree11.json当数据源有bug)",这可能意味着在实际使用中遇到了问题。常见的问题可能包括: 1. **数据格式错误**:确保`tree11.json`文件的JSON格式正确无误,避免语法...

    jquery easy ui模板

    **jQuery Easy UI 模板详解** jQuery Easy UI 是一个基于 jQuery 的前端开发框架,它提供了一系列的组件和样式,使得开发者能够快速构建出美观且功能丰富的 Web 应用程序。这个压缩包包含的 "jQuery Easy UI 学习...

    easy ui中文版

    - **组件丰富**:Easy UI 提供了如表格(datagrid)、树形控件(tree)、面板(panel)、表单元素(form)等多种组件,可以快速搭建网页布局。 - **响应式设计**:支持移动设备,可以自适应不同屏幕尺寸,提供良好...

    Jquery easy ui 中文帮助手册

    除了上述内容,jQuery Easy UI 还包括对话框(dialog)、表单(form)、树(tree)、下拉列表(combobox)、日期选择器(datebox)、时间选择器(timespinner)等多种组件,这些组件都有各自独特的用法和配置选项,...

    jquery easyui tree 树形列表节点异步加载

    EasyUI是一个基于jQuery的轻量级前端框架,它提供了丰富的UI组件,包括我们这里关注的Tree组件。异步加载是提升用户体验的重要手段,尤其是在处理大量数据时,避免一次性加载所有节点,而是按需加载。 ### 1. ...

    jquery easy ui 中文帮助

    EasyUI 的核心理念是通过简单的 HTML 标签和 CSS 类来实现复杂的 UI 功能,减轻前端开发的工作量。 ### 一、jQuery EasyUI 的基本概念 1. **组件(Widgets)**: EasyUI 包含多种组件,如 Dialog(对话框)、Grid...

    Easy-Ui后台搭建

    Easy-Ui是一个轻量级且易于使用的前端框架,主要用于快速构建高效、美观的管理后台界面。这个框架结合了Bootstrap的网格系统、jQuery的便捷操作以及自定义的组件,为开发者提供了一套完整的UI解决方案。在"Easy-Ui...

    jquery easy-ui

    - **树形控件(Tree)**: 用于展示层次结构的数据,如目录结构,组织架构等。通过简单的配置,可以实现节点的展开、折叠、选择等功能。 - **表单(Form)**: 支持各种输入类型,如文本框、下拉框、复选框等,并且...

    Easy UI前端框架

    Easy UI的组件包括但不限于:DataGrid(数据网格)、Form(表单)、Window(窗口)、Panel(面板)、Menu(菜单)、Tabs(标签页)、Dialog(对话框)、Tree(树形结构)、Accordion(手风琴)等。每个组件都有其...

    【JQuery Easy UI】后台管理系统的简单布局

    7. **其他组件**:除上述组件外,Easy UI 还包括树形视图(tree)、下拉选择框(combobox)、滑块(slider)等多种组件,它们共同构成了后台管理系统的基础构建块。 在实际开发中,我们需要根据项目需求,合理选择...

    jquery easy UI demo

    - **组件丰富**: 提供了诸如面板(panel)、表格(datagrid)、树形视图(tree)、下拉选择框(combobox)等多种常见 UI 组件。 - **响应式设计**: 预设的 CSS 样式支持响应式布局,使应用能在不同设备上良好显示。 ...

    jQuery easy-ui 富客户端AJAX框架

    1. **组件丰富**:Easy-UI 提供了多种用户界面组件,如对话框(dialog)、表单(form)、面板(panel)、菜单(menu)、下拉选择框(combobox)、树形控件(tree)、表格(datagrid)等,满足开发各种复杂页面的需求...

    easy ui 中文API CHM格式

    总的来说,"easy ui 中文API CHM格式"和"jquery UI"都是前端开发的重要工具,结合使用可以创建出功能强大、用户体验优秀的Web应用。这个CHM文档对于学习和使用EasyUI的开发者来说是一份不可或缺的参考资料。

    jquery Easy UI

    ### jQuery Easy UI 知识点概览 #### 1. 基本拖放功能 在jQuery Easy UI中,拖放功能是通过`draggable()`方法实现的,它允许将HTML元素变成可拖动的对象。在给定的教程中,通过创建三个不同的`&lt;div&gt;`元素并使用`...

    jquery easy ui 框架

    Easy UI 包含了多种组件,如表格(Grid)、表单(Form)、菜单(Menu)、对话框(Dialog)、按钮(Button)、下拉选择框(ComboBox)、树形结构(Tree)、分页(Pager)等,几乎涵盖了日常Web开发中常见的界面元素。...

    jquery easy ui demo

    《jQuery Easy UI 框架深度解析与应用实践》 jQuery Easy UI 是一款基于 jQuery 的前端框架,它为开发者提供了一系列精美的UI组件,如分页、数据网格、树形结构等,极大地简化了Web应用界面的开发工作。在本篇文章...

    jquery-easy-ui

    jQuery Easy UI 的 Tree 组件提供了丰富的选项和事件,支持单击、双击、拖放操作,可以轻松实现节点的展开与折叠,以及自定义节点图标和文本。通过配置 `data` 参数,我们可以将JSON数据动态加载到树中,或者通过...

Global site tag (gtag.js) - Google Analytics