`
小鑫。
  • 浏览: 135077 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

JQuery EasyUI combotree

 
阅读更多

1.引入css和js
<link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>

2.加入标签
<input id="ddtree" name="ddtree" />

注:id,用于js操作;name,用于获取值
3.加入js代码
$('#ddtree').combotree( {
	//获取数据URL
	url : 'Data',
	//选择树节点触发事件
	onSelect : function(node) {
		//返回树对象
		var tree = $(this).tree;
		//选中的节点是否为叶子节点,如果不是叶子节点,清除选中
		var isLeaf = tree('isLeaf', node.target);
		if (!isLeaf) {
			//清除选中
			$('#ddtree').combotree('clear');
		}
	}
});

4.JSON格式
[ {
	"id" : 1,
	"text" : "Folder1",
	"iconCls" : "icon-ok",
	"children" : [ {
		"id" : 2,
		"text" : "File1",
		"checked" : true
	}, {
		"id" : 3,
		"text" : "Folder2",
		"state" : "open",
		"children" : [ {
			"id" : 4,
			"text" : "File3",
			"attributes" : {
				"p1" : "value1",
				"p2" : "value2"
			},
			"checked" : true,
			"iconCls" : "icon-reload"
		}, {
			"id" : 8,
			"text" : "Async Folder",
			"state" : "closed"
		} ]
	} ]
}, {
	"text" : "Languages",
	"state" : "closed",
	"children" : [ {
		"id" : "j1",
		"text" : "Java"
	}, {
		"id" : "j2",
		"text" : "C#"
	} ]
} ]

注:后台方法(见附带demo,Data.java,easyui.jsp)

API:http://www.jeasyui.com/documentation/index.php
分享到:
评论
3 楼 851228082 2015-11-17  
数据源的json串,必须是 id,text这两个名字?
2 楼 elfasd 2014-02-21  
好帖子 学习了
1 楼 lostyue 2012-07-05  
 

相关推荐

    Easyui combotree idField扩展Demo

    Easyui 是一个基于 jQuery 的前端框架,用于快速构建用户界面。Combotree 是 Easyui 提供的一个组件,它结合了下拉框(combobox)和树形结构(tree),常用于展示具有层级关系的数据,并允许用户进行选择。在这个...

    Java>jquery-easyui_combotree异步树的生成代码示例(NEW)

    ### Java与jQuery-EasyUI Combotree异步树生成代码示例详解 #### 一、概述 在实际项目开发过程中,经常会遇到需要展示层级结构数据的情况,如组织架构、产品分类等。`jQuery EasyUI Combotree`组件因其简单易用、...

    easyui_combotree_search

    本项目名为"easyui_combotree_search",主要涉及到jQuery、EasyUI、Combotree以及搜索功能的实现,特别是将树形结构与搜索框结合的应用。下面将详细阐述这些知识点。 1. **jQuery**:jQuery是一个快速、简洁的...

    easyui的combotree控件绑定json数据的例子

    EasyUI是一个基于jQuery的UI库,提供了丰富的组件,其中包括Combotree,它是一个结合了下拉框和树形结构的控件,常用于选择具有层级关系的数据。 首先,我们需要了解EasyUI的Combotree控件。Combotree控件将树形...

    jQueryEasyUI—Combotree修正版

    在本文中,我们将深入探讨jQuery EasyUI中的Combotree组件,以及如何修正它以实现多选和树形结构的功能。Combotree是jQuery EasyUI库中一个非常实用的控件,它将下拉列表和树形结构结合在一起,为用户提供了一种选择...

    jquery-easyui_combotree异步树的生成代码示例(NEW)

    ### jQuery EasyUI Combotree 异步树生成详解 #### 一、概述 在Web开发中,树形结构是常用的数据展示方式之一,特别是在需要层级显示数据时尤为常见。jQuery EasyUI 是一个基于 jQuery 的 UI 插件集合,它简化了...

    EasyUi combotree 实现动态加载树节点

    EasyUi 是一个基于 jQuery 的前端框架,它提供了一系列易于使用的组件,帮助开发者快速构建用户界面。其中,Combotree 是一个结合了下拉列表和树形结构的组件,常用于展示层级关系的数据,并且在实际应用中,往往...

    jquery-easyui_combotree异步树的生成代码

    ### jQuery-EasyUI Combotree 异步树生成详解 #### 一、Combotree 组件简介 在jQuery EasyUI框架中,Combotree组件是一个非常实用的功能组件,它结合了下拉列表(Combobox)与树形结构(Tree)的特点,能够实现...

    Jquery EasyUI 异步树,适合大数据量无限级加载

    在IT行业中,jQuery EasyUI是一个基于jQuery的前端框架,它提供了丰富的UI组件,极大地简化了Web界面开发。本文将深入探讨“Jquery EasyUI 异步树”这一主题,特别是如何实现适合大数据量无限级加载的功能。 首先,...

    jQuery EasyUI 官方API中文版

    这个框架的官方API中文版是开发者的重要参考资料,它详细解释了每个组件的用法、属性、方法和事件,使得国内开发者能够更加方便地理解和使用jQuery EasyUI。 首先,我们要理解jQuery EasyUI的核心概念。它主要基于...

    jqueryEasyUI

    标题中的"jqueryEasyUI"正是指这一强大的前端框架,它极大地简化了网页的界面构建过程,使得开发者能够快速、高效地创建出功能丰富的交互式界面。 jQuery EasyUI 的核心在于其提供的丰富组件和样式,这些组件包括但...

    Easyui Mvc结合使用实例

    首先,EasyUI是一个基于jQuery的UI库,它提供了一系列易于使用的组件,如表格、表单、下拉框、对话框等,使得开发者可以快速构建具有专业外观的Web界面。EasyUI的核心理念是简化开发,通过简单的HTML标记和CSS样式,...

    jQuery EasyUI 中文文档

    ### jQuery EasyUI 中文文档知识点概述 #### 一、jQuery EasyUI 概述 jQuery EasyUI 是一个基于 jQuery 的简化用户界面插件集合。它提供了一系列丰富的用户界面组件,可以帮助开发者快速构建美观且功能强大的 Web ...

    jQuery EasyUI 1.4.2 版 API 中文版

    2. **EasyUI组件**: EasyUI 提供了一系列预定义的UI组件,如数据网格(datagrid)、下拉树(combotree)、对话框(dialog)、表单控件(form)等,这些组件可以快速创建出响应式的网页界面。 二、主要组件 1. **...

    jQuery EasyUI 1.2 API文档

    【标签】"jQueryEasyUI帮助文档 jQueryEasyUI jQueryEasy1.2 EasyUI1.2文档"进一步明确了文档的主题,这些标签可以帮助用户通过关键词搜索找到这个资源。 压缩包内的文件"jQuery EasyUI 1.2 API文档.CHM"包含了所有...

    jQuery EasyUI 1.2.4 API 中文文档.chm

    本 chm 文档是根据博客园“风流涕淌”的《jQuery EasyUI 1.2.4 API 中文文档(完整)目录》整理而成 http://www.cnblogs.com/Philoo/archive/2011/11/17/jeasyui_api_index.html Base 基础 Documentation 文档 ...

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

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

    jQuery EasyUI 1.4.5 离线简体中文API文档 含完整开发工具包+皮肤+扩展+演示

    jQuery EasyUI 1.4.5版本更新内容: Bug(修复) datagrid:修复在调用updateRow方法之后使用getChanges方法无法返回被更新的行的BUG; treegrid:修复在追加或插入新行的时候触发onLoadSuccess事件的BUG; tree...

    jQuery EasyUI 1.4.3 版 API 中文版

    首先,jQuery EasyUI 的核心组件包括对话框(dialog)、表单(form)、数据网格(datagrid)、树形控件(tree)、下拉树(combotree)、菜单(menu)等。这些组件可以帮助开发者快速构建功能丰富的用户界面,无需...

Global site tag (gtag.js) - Google Analytics