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权限管理 前后端代码完整 可直接运行 你可以根据我写的代码自行修改 里面有我的注释 要是有不懂的可以问我 我会尽可能的回复你
然而,标题提到"Jquery easy ui Tree组件使用(tree11.json当数据源有bug)",这可能意味着在实际使用中遇到了问题。常见的问题可能包括: 1. **数据格式错误**:确保`tree11.json`文件的JSON格式正确无误,避免语法...
这是一个easy-ui中树的简单实现,代码不是很全,可以参考
**jQuery Easy UI 模板详解** jQuery Easy UI 是一个基于 jQuery 的前端开发框架,它提供了一系列的组件和样式,使得开发者能够快速构建出美观且功能丰富的 Web 应用程序。这个压缩包包含的 "jQuery Easy UI 学习...
除了上述内容,jQuery Easy UI 还包括对话框(dialog)、表单(form)、树(tree)、下拉列表(combobox)、日期选择器(datebox)、时间选择器(timespinner)等多种组件,这些组件都有各自独特的用法和配置选项,...
- **树形控件(Tree)**: 用于展示层次结构的数据,如目录结构,组织架构等。通过简单的配置,可以实现节点的展开、折叠、选择等功能。 - **表单(Form)**: 支持各种输入类型,如文本框、下拉框、复选框等,并且...
完整的jquery easyui tree 树形列表节点异步加载demo,比官方demo详细得多。是前后台交互的web应用。
Easy-Ui后台搭建
1. **组件丰富**:Easy-UI 提供了多种用户界面组件,如对话框(dialog)、表单(form)、面板(panel)、菜单(menu)、下拉选择框(combobox)、树形控件(tree)、表格(datagrid)等,满足开发各种复杂页面的需求...
Easy UI 包含了多种组件,如表格(Grid)、表单(Form)、菜单(Menu)、对话框(Dialog)、按钮(Button)、下拉选择框(ComboBox)、树形结构(Tree)、分页(Pager)等,几乎涵盖了日常Web开发中常见的界面元素。...
《jQuery Easy UI 框架深度解析与应用实践》 jQuery Easy UI 是一款基于 jQuery 的前端框架,它为开发者提供了一系列精美的UI组件,如分页、数据网格、树形结构等,极大地简化了Web应用界面的开发工作。在本篇文章...
1. **组件(Widgets)**: jQuery Easy UI 提供了一系列的组件,包括但不限于:`datagrid`(数据网格)、`form`(表单)、`dialog`(对话框)、`menu`(菜单)、`layout`(布局)、`tabs`(选项卡)、`tree`(树形...
标题“jquery-easy-ui demo”表明我们将探讨这个框架的一些实际应用和示例,而“很好用的”描述则暗示了其易用性和实用性。 一、jQuery EasyUI 概述 jQuery EasyUI 是基于 jQuery 的轻量级框架,它集成了大量的 UI ...
jquery-easy-ui 各种demo 例如tree,
而jQuery Easy UI则在此基础上进一步封装,提供了诸如对话框(Dialog)、表格(Grid)、表单(Form)、树形控件(Tree)等UI组件。 在创建三层树结构的过程中,我们需要用到jQuery Easy UI的`tree`组件。这个组件...
在这个名为“最新jquery-easy-ui”的压缩包中,我们重点关注的是版本 1.2.6。 ### 1. jQuery 基础 jQuery 是一个流行的 JavaScript 库,它简化了 DOM 操作、事件处理、动画以及 Ajax 交互。EasyUI 建立在 jQuery ...
Easy-UI是一个基于jQuery的轻量级前端框架,它提供了丰富的组件和易于使用的API,用于构建功能强大的Web界面。在“easy-ui API DOM”中,我们主要关注的是如何利用Easy-UI的API与DOM(Document Object Model)进行...
《jQuery Easy UI 1.0.4:构建优雅前端界面的利器》 jQuery Easy UI 是一个基于 jQuery 的轻量级前端开发框架,旨在简化网页用户界面的构建过程,提供丰富的组件和精美的主题,帮助开发者快速创建出美观且功能齐全...
1.3.1 版本中包含了诸如对话框(dialog)、表格(datagrid)、表单(form)、菜单(menu)等常见的UI组件,这些组件都具有丰富的配置选项和事件处理机制,可以根据实际需求进行定制。 对话框(Dialog)是EasyUI中的...