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库来实现前端的树形结构,并结合SSM(Spring、SpringMVC、MyBatis)框架和MySQL数据库进行后端处理。...
Easy UI Tree是一款基于jQuery和Easy UI框架的树形控件,它提供了丰富的功能,用于在Web应用中展示层次结构的数据。这个"easy ui tree比较全的功能"的示例旨在为初学者提供一个全面了解和学习Easy UI Tree特性的平台...
标题 "jquery easy ui tree" 指的是使用 jQuery Easy UI 实现的树形组件。 在 Easy UI 的 Tree 组件中,你可以通过简单的 HTML 结构和 JavaScript 配置来创建树形结构。以下是一些关键知识点: 1. **HTML 结构**:...
然而,标题提到"Jquery easy ui Tree组件使用(tree11.json当数据源有bug)",这可能意味着在实际使用中遇到了问题。常见的问题可能包括: 1. **数据格式错误**:确保`tree11.json`文件的JSON格式正确无误,避免语法...
**jQuery Easy UI 模板详解** jQuery Easy UI 是一个基于 jQuery 的前端开发框架,它提供了一系列的组件和样式,使得开发者能够快速构建出美观且功能丰富的 Web 应用程序。这个压缩包包含的 "jQuery Easy UI 学习...
- **组件丰富**:Easy UI 提供了如表格(datagrid)、树形控件(tree)、面板(panel)、表单元素(form)等多种组件,可以快速搭建网页布局。 - **响应式设计**:支持移动设备,可以自适应不同屏幕尺寸,提供良好...
除了上述内容,jQuery Easy UI 还包括对话框(dialog)、表单(form)、树(tree)、下拉列表(combobox)、日期选择器(datebox)、时间选择器(timespinner)等多种组件,这些组件都有各自独特的用法和配置选项,...
EasyUI是一个基于jQuery的轻量级前端框架,它提供了丰富的UI组件,包括我们这里关注的Tree组件。异步加载是提升用户体验的重要手段,尤其是在处理大量数据时,避免一次性加载所有节点,而是按需加载。 ### 1. ...
EasyUI 的核心理念是通过简单的 HTML 标签和 CSS 类来实现复杂的 UI 功能,减轻前端开发的工作量。 ### 一、jQuery EasyUI 的基本概念 1. **组件(Widgets)**: EasyUI 包含多种组件,如 Dialog(对话框)、Grid...
Easy-Ui是一个轻量级且易于使用的前端框架,主要用于快速构建高效、美观的管理后台界面。这个框架结合了Bootstrap的网格系统、jQuery的便捷操作以及自定义的组件,为开发者提供了一套完整的UI解决方案。在"Easy-Ui...
- **树形控件(Tree)**: 用于展示层次结构的数据,如目录结构,组织架构等。通过简单的配置,可以实现节点的展开、折叠、选择等功能。 - **表单(Form)**: 支持各种输入类型,如文本框、下拉框、复选框等,并且...
Easy UI的组件包括但不限于:DataGrid(数据网格)、Form(表单)、Window(窗口)、Panel(面板)、Menu(菜单)、Tabs(标签页)、Dialog(对话框)、Tree(树形结构)、Accordion(手风琴)等。每个组件都有其...
7. **其他组件**:除上述组件外,Easy UI 还包括树形视图(tree)、下拉选择框(combobox)、滑块(slider)等多种组件,它们共同构成了后台管理系统的基础构建块。 在实际开发中,我们需要根据项目需求,合理选择...
- **组件丰富**: 提供了诸如面板(panel)、表格(datagrid)、树形视图(tree)、下拉选择框(combobox)等多种常见 UI 组件。 - **响应式设计**: 预设的 CSS 样式支持响应式布局,使应用能在不同设备上良好显示。 ...
1. **组件丰富**:Easy-UI 提供了多种用户界面组件,如对话框(dialog)、表单(form)、面板(panel)、菜单(menu)、下拉选择框(combobox)、树形控件(tree)、表格(datagrid)等,满足开发各种复杂页面的需求...
总的来说,"easy ui 中文API CHM格式"和"jquery UI"都是前端开发的重要工具,结合使用可以创建出功能强大、用户体验优秀的Web应用。这个CHM文档对于学习和使用EasyUI的开发者来说是一份不可或缺的参考资料。
### jQuery Easy UI 知识点概览 #### 1. 基本拖放功能 在jQuery Easy UI中,拖放功能是通过`draggable()`方法实现的,它允许将HTML元素变成可拖动的对象。在给定的教程中,通过创建三个不同的`<div>`元素并使用`...
Easy UI 包含了多种组件,如表格(Grid)、表单(Form)、菜单(Menu)、对话框(Dialog)、按钮(Button)、下拉选择框(ComboBox)、树形结构(Tree)、分页(Pager)等,几乎涵盖了日常Web开发中常见的界面元素。...
《jQuery Easy UI 框架深度解析与应用实践》 jQuery Easy UI 是一款基于 jQuery 的前端框架,它为开发者提供了一系列精美的UI组件,如分页、数据网格、树形结构等,极大地简化了Web应用界面的开发工作。在本篇文章...
jQuery Easy UI 的 Tree 组件提供了丰富的选项和事件,支持单击、双击、拖放操作,可以轻松实现节点的展开与折叠,以及自定义节点图标和文本。通过配置 `data` 参数,我们可以将JSON数据动态加载到树中,或者通过...