文档章节

14.EASYUI ComboTree组件

F
 Favour
发布于 2016/08/15 17:00
字数 697
阅读 27
收藏 1
点赞 0
评论 0

一,基本下拉树组件

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<meta charset="UTF-8">
	<title>Basic ComboTree - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.3.3/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.3.3/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../css/demo.css">
	<script type="text/javascript" src="../jquery-easyui-1.3.3/jquery.min.js"></script>
	<script type="text/javascript" src="../jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
	<h2>基本下拉树组件</h2>
	<div class="demo-info">
		<div class="demo-tip icon-tip"></div>
		<div>点击右边箭头按钮来显示树数据.</div>
	</div>
	<div style="margin:10px 0"></div>
	<input class="easyui-combotree" data-options="url:'../ComboTree/tree_data1.json',required:true" style="width:200px;">

</body>
</html>

二,为下拉树赋初值

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<meta charset="UTF-8">
	<title>Basic ComboTree - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.3.3/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.3.3/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../css/demo.css">
	<script type="text/javascript" src="../jquery-easyui-1.3.3/jquery.min.js"></script>
	<script type="text/javascript" src="../jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
	<h2>为下拉树赋初值</h2>
	<div class="demo-info">
		<div class="demo-tip icon-tip"></div>
		<div>当下拉树创建完后赋初值.</div>
	</div>
	<div style="margin:10px 0"></div>
	<input class="easyui-combotree" value="122" data-options="url:'../ComboTree/tree_data1.json',required:true" style="width:200px;">

</body>
</html>

三,下拉树多选

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<meta charset="UTF-8">
	<title>Basic ComboTree - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.3.3/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.3.3/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../css/demo.css">
	<script type="text/javascript" src="../jquery-easyui-1.3.3/jquery.min.js"></script>
	<script type="text/javascript" src="../jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
	<h2>为下拉树赋多选</h2>
	<div class="demo-info">
		<div class="demo-tip icon-tip"></div>
		<div>当下拉树多选.</div>
	</div>
	<div style="margin:10px 0"></div>
	<input class="easyui-combotree" value="122" data-options="url:'../ComboTree/tree_data1.json',required:true" multiple style="width:200px;">

</body>
</html>

四,下拉树组件相关操作

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<meta charset="UTF-8">
	<title>Basic ComboTree - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.3.3/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.3.3/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../css/demo.css">
	<script type="text/javascript" src="../jquery-easyui-1.3.3/jquery.min.js"></script>
	<script type="text/javascript" src="../jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
	<h2>下拉树操作</h2>
	<div class="demo-info">
		<div class="demo-tip icon-tip"></div>
		<div>点击下面按钮执行相关操作</div>
	</div>
	<div style="margin:10px 0">
		<a href="javascript:void(0)" class="easyui-linkbutton" onclick="getValue()">获取值</a>
		<a href="javascript:void(0)" class="easyui-linkbutton" onclick="setValue()">设置值</a>
		<a href="javascript:void(0)" class="easyui-linkbutton" onclick="disable()">禁用</a>
		<a href="javascript:void(0)" class="easyui-linkbutton" onclick="enable()">启用</a>
	</div>
	<input id="cc" class="easyui-combotree" data-options="url:'../ComboTree/tree_data1.json',required:true" style="width:200px;">
	<script type="text/javascript">
		function getValue(){
			var val = $('#cc').combotree('getValue');
			alert(val);
		}
		function setValue(){
			$('#cc').combotree('setValue', '122');
		}
		function disable(){
			$('#cc').combotree('disable');
		}
		function enable(){
			$('#cc').combotree('enable');
		}
	</script>

</body>
</html>

 

© 著作权归作者所有

共有 人打赏支持
F
粉丝 4
博文 185
码字总数 96673
作品 0
成都
程序员
【combotree】easyui的combotree(树形下拉框)使用总结

引言 最近由于工作的需要,需要使用到下拉树,就是我们有一个输入框,用户要输入东西,但是输入的东西是从我们那个之中选的,为了防止用户输入错误,我们使用了下拉树,因为为一个树形列表,...

双月通天 ⋅ 2016/11/03 ⋅ 0

如何实现jQuery easyui之中的combotree之中的数据的同步加载?

在使用jQuery easyui之中的combotree组件时,需要对combotree之中的数据进行同步加载。

鹏程万里 ⋅ 2014/10/27 ⋅ 1

项目中EXTjs中运用到的下拉树

首先是项目的环境是java,用到spring3.1.2的框架,展示数据用的是 EXTJs (1)js代码中: (2) loader: new Ext.tree.TreeLoader({dataUrl:'application/categoryTree.json?type=2'})在Control......

EDIAGD ⋅ 2013/02/04 ⋅ 1

easyUI combotree 多选取值

1,直接获取: 单选:$("#id").combotree("getValue") 多选:$("#id").combotree("getValues") 注意:如果value中的值和所显示的文本不同,如需获取文本内容,则可以使用getText(),多选同样加...

hello_bear ⋅ 2015/07/16 ⋅ 0

Easyui combotree,数据刷新问题

@_′↘夏悸 你好,想跟你请教个问题: 先谢谢你之前的帮助~ 这个问题是这样的。 布局west位置,是一个tree,显示各子公司。 布局center位置,是一个“根据tree点击的子公司ID获取其子部门列...

落阳 ⋅ 2013/03/01 ⋅ 2

easyui datagrid内嵌combotree实现异步加载

jquery easyui datagrid内嵌了一个combotree。 当要实现combotree的异步加载时,部分代码语法如下: onBeforeExpand:function(node){ $('#cc').combotree("tree").tree("options").url= "tr......

hankaibo ⋅ 2012/11/30 ⋅ 1

jquery easyui combotree取值

1,直接获取: 单选:$("#id").combotree("getValue") 多选:$("#id").combotree("getValues") 注意:如果value中的值和所显示的文本不同,如需获取文本内容,则可以使用getText(),多选同样加...

多重人格的疯子 ⋅ 2014/05/24 ⋅ 0

easyui combotree异步加载问题

使用easyui combotree,用的异步加载,比如上图中的123是在点开qqq时才加载进来的,现在我想给机构框一个默认值,比如节点123 id 为10,由于123一开始还没有加载出来,所以机构框value=10是加...

自由de风 ⋅ 2014/11/05 ⋅ 2

bootstrap中怎么解决EasyUI combotree兼容性问题

bootstrap中怎么解决EasyUI combotree兼容性问题 $('#id').combotree()报错

星期五123 ⋅ 2017/03/13 ⋅ 0

easyui ComboTree选择问题

ComboTree加载得到的数据中没有空值,所以我选择一个节点后就不能选择空值了。 如何在加载的数据是无空值的情况下,ComboTree有一个类似 的元素

开源中国技术顾问 ⋅ 2015/07/23 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Boost库编译应用

版本:Boost 1.66.0 Windows库编译 官网指南:直接执行bootstrap.bat处理文件即可,可以我却遇到一堆的问题。 环境:Windows 10 + Visual Studio 2017 Boost编译出来库命名 boost库生成文件命...

水海云 ⋅ 32分钟前 ⋅ 0

解决Eclipse发布到Tomcat丢失依赖jar包的问题

如果jar文件是以外部依赖的形式导入的。Eclipse将web项目发布到Tomcat时,是不会自动发布这些依赖的。 可以通过Eclipse在项目上右击 - Propertics - Deployment Assembly,添加“Java Build ...

ArlenXu ⋅ 32分钟前 ⋅ 0

iview tree组件层级过多时可左右滚动

使用vue+iview的tree组件,iview官网iview的tree树形控件 问题描述:tree层级过多时左右不可滚动 问题解决:修改overflow属性值 .el-tree-node>.el-tree-node_children { overflow: vi...

YXMBetter ⋅ 34分钟前 ⋅ 0

分布式锁

1.通过数据库实现 http://www.weizijun.cn/2016/03/17/%E8%81%8A%E4%B8%80%E8%81%8A%E5%88%86%E5%B8%83%E5%BC%8F%E9%94%81%E7%9A%84%E8%AE%BE%E8%AE%A1/ 2.ZK实现:curator-recipes分布式锁的......

素雷 ⋅ 42分钟前 ⋅ 0

Sublime Text3 快捷键

选择类 Ctrl+D 选中光标所占的文本,继续操作则会选中下一个相同的文本。 Alt+F3 选中文本按下快捷键,即可一次性选择全部的相同文本进行同时编辑。举个栗子:快速选中并更改所有相同的变量名...

AndyZhouX ⋅ 48分钟前 ⋅ 0

XamarinAndroid组件教程RecylerView自定义适配器动画

XamarinAndroid组件教程RecylerView自定义适配器动画 如果RecyclerViewAnimators.Adapters命名空间中没有所需要的适配器动画,开发者可以自定义动画。此时,需要让自定义的动画继承Animation...

大学霸 ⋅ 49分钟前 ⋅ 0

eureka 基础(二)

使用Eureka服务器进行身份验证 如果其中一个eureka.client.serviceUrl.defaultZone网址中包含一个凭据(如http://user:password@localhost:8761/eureka)),HTTP基本身份验证将自动添加到您...

明理萝 ⋅ 52分钟前 ⋅ 1

Kubernetes(五) - Service

Kubernetes解决的另外一个痛点就是服务发现,服务发现机制和容器开放访问都是通过Service来实现的,把Deployment和Service关联起来只需要Label标签相同就可以关联起来形成负载均衡,基于kuberne...

喵了_个咪 ⋅ 52分钟前 ⋅ 0

更新队友POM文件后报错

打开报错的地方的pom及其引用方法所在文件的pom,观察其版本号是否一致,不一致进行更改

森火 ⋅ 今天 ⋅ 0

IDEA使用sonarLint

一、IDEA如何安装SonarLint插件 1.打开 Idea 2.点击【File】 3.点击【Settings】 4.点击【Plugins】 5.在搜索栏中输入“sonarlint”关键字 6.点击【Install】进行安装 7.重启Idea 二、IDEA如...

开源中国成都区源花 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部