`

Easy-UI Tree的生成

 
阅读更多
树形结构中checkbox="true"表示树节点是可以选择。
<div id="left">
   <ul id="tt" class="easyui-tree" checkbox="true"></ul>
</div>


    /**
     * 
     *@User   :Test
     *@date   :2014-6-18 下午03:19:28
     *@return :Object
     *@userFor : 生成树型数据
     */
   public List<Map<String, Object>> queryMenusList(String parentId)
	{
		List<Map<String, Object>> result = new ArrayList<Map<String,Object>>();
		// 找到下层子节点
		List<xx> allItem = this.menuDao.queryMenusList(parentId);
		
		for(xx v:allItem)
		{
			Map<String, Object> item = new HashMap<String, Object>();  
			item.put("id", v.getUrl());  
	        item.put("text", v.getName());
                //判断是否加载时选中值
	        item.put("checked", "true");
	        List<xx> childItem = this.menuDao.queryMenusList(v.getEventid()) ;
	        
	        if(childItem.size()>0)
	        {
	        	item.put("state", "closed");  
	            item.put("children", toJsons(childItem)); 
	        }
	        result.add(item);
		}
		return result ;
	}
    public List<Map<String, Object>> toJsons(List<xx> list)
    {
        List<Map<String, Object>> items = new ArrayList<Map<String, Object>>();
        for (int i = 0; i < list.size(); i++)
        {
        	xx bo = (xx) list.get(i);
            Map<String, Object> item = new HashMap<String, Object>();
            item.put("id", bo.getUrl());
            item.put("text",bo.getName() );
            List<xx> temps = this.menuDao.queryMenusList(bo.getEventid());
            if (temps.size() > 0)
            {
                item.put("state", "closed");
                item.put("children", toJsons(temps));
            }
            items.add(item);
        }
        return items;
    }

得到选中的值方法
var node = $('#tt').tree('getChecked'); 
//得到id值返回后台处理
for(var i=0;i<node.length;i++){
   ids+=node[i].id+",";	         
}


Js加载后台

$('#tt').tree({
      url:'./getLeftTree.do?treeHasClient=yes',
      onCheck:function(node){
            
                 },
       //右键生成菜单 e.pageX自动生成
       onContextMenu:function(e,node){
           $('#mm').menu('show', {
	        left: e.pageX,
		top: e.pageY
	    });
                 },
        //双击事件
	onDblClick:function(node){
                    
		}
             })

//右键后的菜单
<div id="mm" class="easyui-menu" style="width:100px;">  
     <div herf="#" onclick="xx()">Test1</div>  
     <div herf="#" onclick="xx()">Test2</div>  
     <div herf="#" onclick="xx()">Test3</div>
     <div herf="#" onclick="xx()">Test4</div>
</div> 
分享到:
评论
发表评论

文章已被作者锁定,不允许评论。

相关推荐

    EASY-UI示例;EASY-UI示例

    EASY-UI示例EASY-UI示例EASY-UI示例EASY-UI示例EASY-UI示例EASY-UI示例EASY-UI示例EASY-UI示例EASY-UI示例EASY-UI示例EASY-UI示例EASY-UI示例

    easy-ui onchange/easy-ui添加onchange

    在本文中,我们将深入探讨如何在Easy-UI框架中使用`onchange`事件,以及如何获取组合框(Combobox)的当前选中值。Easy-UI是一个基于jQuery的轻量级前端开发框架,它提供了丰富的组件,如表格、窗口、菜单、对话框等...

    jQuery easy-ui 富客户端AJAX框架

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

    非常好用的Easy-UI前段框架

    Easy-UI是一个基于jQuery的轻量级前端框架,它提供了丰富的组件和强大的功能,使得开发者在构建用户界面时能够快速而高效。这个“非常好用的Easy-UI前段框架”显然是一个已经集成了多种功能的解决方案,特别是针对...

    基于 jsp + servlet + jquery + easy-ui + ajax 的学生成绩管理系统.zip

    基于 jsp + servlet + jquery + easy-ui + ajax 的学生成绩管理系统 基于 jsp + servlet + jquery + easy-ui + ajax 的学生成绩管理系统 基于 jsp + servlet + jquery + easy-ui + ajax 的学生成绩管理系统 基于 jsp...

    Easy-UI类库

    Easy-UI是一个轻量级的前端用户界面框架,专为构建高效、美观的B/S(Browser/Server)系统页面而设计。它以简洁的代码、丰富的组件和高度可定制性著称,使得开发者能够快速地创建出具有专业品质的网页应用。在网页...

    简洁Easy-UI后台模板

    "简洁Easy-UI后台模板"是一款专为新手设计的易用型前端框架,它提供了标准的后台界面设计,集美观与实用性于一体。Easy-UI是一个基于HTML、CSS和JavaScript的轻量级前端开发框架,其核心是采用jQuery库,使得开发者...

    Easy-Ui后台搭建

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

    easy-ui框架

    1. **组件库**:Easy-UI提供了多种UI组件,如数据网格(datagrid)、下拉菜单(combobox)、树形视图(tree)、对话框(dialog)等,这些组件都封装了复杂的交互逻辑,使得开发者可以轻松地在页面上构建交互式元素。...

    easy-ui API DOM

    Easy-UI是一个基于jQuery的轻量级前端框架,它提供了丰富的组件和易于使用的API,用于构建功能强大的Web界面。在“easy-ui API DOM”中,我们主要关注的是如何利用Easy-UI的API与DOM(Document Object Model)进行...

    jQuery UI以及jQuery easy-ui技术手册

    jQuery Easy-UI 是基于jQuery和jQuery UI的一个轻量级框架,它简化了jQuery UI的使用,提供了一套易于上手的预设样式和组件。Easy-UI的主要目标是让开发者能快速构建出美观且功能丰富的Web应用。 - **组件精简**:...

    easy-ui资源

    标签"easy-ui舒适"表明这个资源可能包含了优化过的EasyUI版本或者是一些定制化的设计,提供了更舒适的用户体验,例如改进的布局、色彩搭配或是更友好的交互设计。 在压缩包文件名称列表中,"easyUI"可能是包含...

    jquery-easy-ui

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

    easy-ui.zip

    【easy-ui.zip】是一款集合了三款基于Web的管理型系统框架的压缩包,主要包含HTML、CSS和JavaScript等静态资源。这些框架可能用于构建高效、美观且易于使用的后台管理系统。下面将详细介绍其中可能涉及的知识点。 1...

    EasyTree的使用教程

    在实际操作中,我们将以名为“dms-tree”的示例文件作为基础,这个文件可能包含了用于演示的JSON数据或预设的配置文件。这些数据可以模拟后台接口返回的数据结构,帮助我们理解如何与后台进行数据交互。 例如,你...

    Easy-Ui简单后台搭建

    Easy-Ui是一个基于jQuery和Bootstrap框架的前端UI库,它为开发者提供了丰富的组件和美观的界面设计,使得构建用户友好的后台管理系统变得简单快捷。在"Easy-Ui简单后台搭建"这个主题中,我们将深入探讨如何利用Easy-...

    SSH+EASY-UI的账务管理系统

    用MAVEN,SPRING,HIBERNATE,STRUTS配置账务管理系统,前台界面EASY-UI,功能比较齐全,算是个小项目吧。jar包的话由于太大,反正如果有maven都可以自动下载的,用的IDE是ECLIPSE JUNIO,maven版本是3.0.4。 还需要...

    添加easy-ui样式的style样式和具体的jsp页面示例

    在JSP页面中,你可以使用Easy-UI的标签来快速生成组件。以下是一个包含标题、按钮和数据网格的示例: ```jsp 欢迎使用Easy-UI ('按钮被点击了!')"&gt;点击我 数据表格" style="width:100%;min-height:250px...

    jquery-easy-ui demo

    标题“jquery-easy-ui demo”表明我们将探讨这个框架的一些实际应用和示例,而“很好用的”描述则暗示了其易用性和实用性。 一、jQuery EasyUI 概述 jQuery EasyUI 是基于 jQuery 的轻量级框架,它集成了大量的 UI ...

    easy-ui门户前端框架版本v1.7.5

    2. **jquery.easyui.min.js**: 这是easy-ui的主要JavaScript文件,已经进行了压缩,包含了大量的组件和功能,如对话框、表格、菜单、树形结构、下拉框等。 3. **easyloader.js**: easyloader是easy-ui的加载器,负责...

Global site tag (gtag.js) - Google Analytics