`

easyui tree

阅读更多

一.创建tree

 

    可使用两种方式来创建tree

      1.html直接创建

        

Js代码 复制代码
  1. <ul id="menuTree" class="easyui-tree" animate="true">   
  2.           <li>   
  3.     <span>所有菜单</span>   
  4.     <ul>   
  5.          <li state="closed">   
  6.                <span>Sub Folder 1</span>   
  7.                <ul>   
  8.         <li><span><a href="#">预约登记</a></span></li>   
  9.         <li>   
  10.                                     <span>预约周期</span>   
  11.         </li></ul>   
  12.                     </li>   
  13.                </ul>   
  14.          <li>   
  15. </ul>  
<ul id="menuTree" class="easyui-tree" animate="true">
          <li>
	<span>所有菜单</span>
	<ul>
	     <li state="closed">
	           <span>Sub Folder 1</span>
	           <ul>
		<li><span><a href="#">预约登记</a></span></li>
		<li>
                                    <span>预约周期</span>
		</li></ul>
                    </li>
               </ul>
         <li>
</ul>

 2.使用异步数据创建tree

Js代码 复制代码
  1. jQuery("#menuTree").tree({   
  2.      url:"menu.jsp"  
  3.      onclick:function(node)   
  4.      {   
  5.      }   
  6. });  
jQuery("#menuTree").tree({
     url:"menu.jsp"
     onclick:function(node)
     {
     }
});

 

  menu.jsp返回的数据格式如:

Js代码 复制代码
  1. [   
  2.    {"text":"所有菜单","children":[{"id":"01","text":"预约管理","state":"closed","children":[{"id":"00","text":"预约登记","attributes":{"moduleId":"01","roleId":"01"}}],"checked":true},{"id":"02","text":"销售管理","state":"closed","children":[{"id":"05","text":"课程类型","attributes":{"moduleId":"02","roleId":"01"},"checked":true}],"checked":true},{"id":"03","text":"进销存管理","state":"closed","children":[{"id":"12","text":"基础参数","attributes":{"moduleId":"03","roleId":"01"},"checked":true}],"checked":true},{"id":"04","text":"人事管理","state":"closed","children":[{"id":"21","text":"员工管理","attributes":{"moduleId":"04","roleId":"01"},"checked":true}],"checked":true},{"id":"05","text":"综合管理","state":"closed","children":[{"id":"23","text":"单位管理","attributes":{"moduleId":"05","roleId":"01"},"checked":true}],"checked":true},{"id":"06","text":"报表管理","state":"closed","children":[{"id":"29","text":"盘点表","attributes":{"moduleId":"06","roleId":"01"},"checked":true}],"checked":true},{"id":"07","text":"高级管理区","state":"closed","children":[{"id":"30","text":"进销存部分","attributes":{"moduleId":"07","roleId":"01"}}]}]}]  
分享到:
评论

相关推荐

    easyui tree扁平化扩展,不用再为children嵌套结构烦恼

    ### easyui tree扁平化扩展详解 #### 一、引言 在开发Web应用程序时,树形结构(Tree)是常见的UI组件之一,用于展示层级关系的数据。EasyUI Tree插件是基于jQuery的一个轻量级插件,它提供了一种简单的方式创建树...

    easyui tree使用方式

    EasyUI Tree 使用方式详解 EasyUI Tree 是一款功能強大且灵活的树状选择控件,它可以实现多种选择方式,例如多选、checkbox 勾选、新增或删除节点、拖曳移动节点等。以下是 EasyUI Tree 的使用方式详解。 一、套件...

    easyui tree 改进版

    EasyUI Tree是一款基于jQuery的轻量级用户界面库,它为开发者提供了丰富的树形结构组件。在标准的EasyUI Tree基础上,“easyui tree 改进版”进行了优化和增强,特别是加入了复选框选择功能,这使得用户在操作树形...

    EasyUI Tree Combotree 模糊搜索

    EasyUI Tree Combotree 的模糊所搜

    easyui tree 三帧界面

    在“easyui tree 三帧界面”这个主题中,我们主要讨论的是如何利用EasyUI的Tree组件来创建一个具有三个独立区域的界面,其中右侧区域可以动态展示图片和批注信息。 首先,EasyUI的Tree组件是一个强大的树形结构控件...

    JqueryEasyUI Tree 动态加载,稍作修改就可以用了

    Tree组件是jQuery EasyUI中的一个重要部分,用于展示层级结构的数据,如目录、组织结构等。本篇文章将深入探讨如何实现jQuery EasyUI Tree的动态加载,并根据提供的标题和描述,分享一些可能的实现方法。 动态加载...

    EasyUI tree 及 DataGrid

    EasyUI 是一个基于 jQuery 的前端框架,主要用于构建用户界面,特别是对于企业级应用而言,它提供了丰富的组件,如对话框、表单、菜单、树形控件(Tree)和数据网格(DataGrid)等。在本项目中,"EasyUI tree 及 ...

    jquery-easyui-tree学习

    《jQuery EasyUI Tree组件深度解析与实践应用》 在Web开发中,为了构建用户友好的交互界面,我们经常需要使用到各种UI库。jQuery EasyUI就是这样一个强大的前端框架,它基于jQuery,提供了丰富的组件,包括今天我们...

    Easyui tree 测试demo

    EasyUI 是一个基于 jQuery 的 UI 插件集合体,提供了丰富的界面组件,其中包括 Tree 组件。在本测试 demo 中,我们将深入探讨 EasyUI Tree 的使用方法以及相关文件的作用。 标题 "Easyui tree 测试demo" 指的是一个...

    权限管理EasyUI tree 及DateGrid 项目案例

    【权限管理EasyUI tree 及DateGrid 项目案例】是一个基于EasyUI框架的Web应用程序,主要目的是实现用户权限的登录管理和界面展示。EasyUI是一个基于jQuery的轻量级UI库,它提供了丰富的组件,简化了网页开发过程。在...

    easyui tree 例子

    在这个“easyui tree 例子”中,我们可以探讨几个关键的知识点,包括EasyUI Tree的基本使用、数据绑定、事件处理以及如何与后端数据交互。 1. **EasyUI Tree的基本结构** EasyUI Tree的基本HTML结构通常包含`&lt;ul&gt;`...

    easyui Tree系统管理

    4. **操作方法**:EasyUI Tree提供了丰富的API,如`tree.expand(node)`展开节点,`tree.collapse(node)`折叠节点,`tree.select(node)`选择节点,`tree.unselect(node)`取消选择,`tree.check(node, checked)`勾选或...

    EasyUI Tree树组件无限循环的解决方法

    "EasyUI Tree树组件无限循环的解决方法" EasyUI Tree树组件是一种常用的树形结构控件,用于展示层级结构的数据。但是在使用EasyUI Tree树组件时,可能会遇到无限循环的问题,即点击最后一个节点时,会重新加载动态...

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

    在本文中,我们将深入探讨jQuery EasyUI中的Tree组件以及如何实现树形列表节点的异步加载。EasyUI是一个基于jQuery的轻量级前端框架,它提供了丰富的UI组件,包括我们这里关注的Tree组件。异步加载是提升用户体验的...

    jQuery EasyUI tree增加搜索功能的实现方法

    扩展jQuery EasyUI tree搜索树节点的方法,使其支持节点名称的模糊匹配,将不匹配的节点隐藏。 /** * 1)扩展jquery easyui tree的节点检索方法。使用方法如下: * $("#treeId").tree("search", searchText); * ...

    easyui tree和table和地图点的结合

    主要封装了easyui的表格删除添加修改查询以及tree和table和地图点的结合

    EasyUI Tree+Asp.net实现权限树或目录树导航的简单实例

    EasyUI Tree与***结合使用实现权限树或目录树导航的功能,主要适用于构建网站后台管理系统中的导航模块,便于用户对网站的结构与权限进行管理。该实现方式利用了前端框架EasyUI提供的Tree控件和***的后台处理能力。 ...

    JQuery Easyui Tree的oncheck事件实现代码

    在使用JQuery Easyui Tree组件时,我们常常需要监听用户对树形结构中节点的交互行为,例如当用户点击复选框时触发特定的操作。然而,Easyui Tree的API默认只提供了`onClick`事件,这对于处理复选框的选中状态并不...

Global site tag (gtag.js) - Google Analytics