文档章节

12.EASYUI ComboBox组件

F
 Favour
发布于 2016/08/15 16:08
字数 1846
阅读 23
收藏 0
点赞 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 ComboBox - 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" style="margin-bottom:10px">
		<div class="demo-tip icon-tip"></div>
		<div>在下拉框内输入信息自动匹配.</div>
	</div>
	
	<select class="easyui-combobox" name="sheng" style="width:200px;">
		<option value="河北省">河北省</option>
		<option value="山东省">山东省</option>
		<option value="辽宁省">辽宁省</option>
		<option value="黑龙江省">黑龙江省</option>
		<option value="吉林省">吉林省</option>
		<option value="甘肃省">甘肃省</option>
		<option value="青海省">青海省</option>
		<option value="河南省">河南省</option>
		<option value="江苏省">江苏省</option>
		<option value="湖北省">湖北省</option>
		<option value="湖南省">湖南省</option>
		<option value="江西省">江西省</option>
		<option value="浙江省">浙江省</option>
		<option value="广东省">广东省</option>
		<option value="云南省">云南省</option>
		<option value="福建省">福建省</option>
		<option value="台湾省">台湾省</option>
		<option value="海南省">海南省</option>
		<option value="山西省">山西省</option>
		<option value="四川省">四川省</option>
		<option value="陕西省">陕西省</option>
		<option value="贵州省">贵州省</option>
		<option value="安徽省">安徽省</option>
	</select>

</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 ComboBox - 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="$('#language').combobox('reload', '../ComboBox/combobox_data1.json')">加载数据</a>
	</div>

	<input class="easyui-combobox" id="language" name="language"
			data-options="valueField:'id',textField:'text'">
</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 ComboBox - 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" style="margin-bottom:10px">
		<div class="demo-tip icon-tip"></div>
		<div>点击下拉框选择多个项.</div>
	</div>
	<input class="easyui-combobox" 
			name="language"
			data-options="
					url:'../ComboBox/combobox_data1.json',
					valueField:'id',
					textField:'text',
					multiple:true,
					panelHeight:'auto'
			">

</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 ComboBox - 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" style="margin-bottom:10px">
		<div class="demo-tip icon-tip"></div>
		<div>导航下拉框时选中一个值.</div>
	</div>
	<div style="margin:10px 0;">
		<input type="checkbox" checked onchange="$('#cc').combobox({selectOnNavigation:$(this).is(':checked')})">
		<span>导航选中</span>
	</div>
	
	<select id="cc" class="easyui-combobox" name="sheng" style="width:200px;">
		<option value="河北省">河北省</option>
		<option value="山东省">山东省</option>
		<option value="辽宁省">辽宁省</option>
		<option value="黑龙江省">黑龙江省</option>
		<option value="吉林省">吉林省</option>
		<option value="甘肃省">甘肃省</option>
		<option value="青海省">青海省</option>
		<option value="河南省">河南省</option>
		<option value="江苏省">江苏省</option>
		<option value="湖北省">湖北省</option>
		<option value="湖南省">湖南省</option>
		<option value="江西省">江西省</option>
		<option value="浙江省">浙江省</option>
		<option value="广东省">广东省</option>
		<option value="云南省">云南省</option>
		<option value="福建省">福建省</option>
		<option value="台湾省">台湾省</option>
		<option value="海南省">海南省</option>
		<option value="山西省">山西省</option>
		<option value="四川省">四川省</option>
		<option value="陕西省">陕西省</option>
		<option value="贵州省">贵州省</option>
		<option value="安徽省">安徽省</option>
	</select>

</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 ComboBox - 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" style="margin-bottom:10px">
		<div class="demo-tip icon-tip"></div>
		<div>如何在下拉框中自定义格式.</div>
	</div>
	<input class="easyui-combobox" name="language" data-options="
				url: '../ComboBox/combobox_data1.json',
				valueField: 'id',
				textField: 'text',
				panelWidth: 350,
				panelHeight: 'auto',
				formatter: formatItem
			">
	<script type="text/javascript">
		function formatItem(row){
			var s = '<span style="font-weight:bold">' + row.text + '</span><br/>' +
					'<span style="color:#888">' + row.desc + '</span>';
			return s;
		}
	</script>
</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 ComboBox - 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" style="margin-bottom:10px">
		<div class="demo-tip icon-tip"></div>
		<div>下拉框绑定了一个远程数据.</div>
	</div>
	<input class="easyui-combobox" 
			name="language"
			data-options="
					url:'../ComboBox/combobox_data1.json',
					valueField:'id',
					textField:'text',
					panelHeight:'auto'
			">

</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 ComboBox - 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="setvalue()">设置值</a>
		<a href="javascript:void(0)" class="easyui-linkbutton" onclick="alert($('#state').combobox('getValue'))">获取值</a>
		<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#state').combobox('disable')">禁用</a>
		<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#state').combobox('enable')">启用</a>
	</div>
	<script type="text/javascript">
		function setvalue(){
			$.messager.prompt('设置值','请输入一个值(张三,李四,王八等):',function(v){
				if (v){
					$('#state').combobox('setValue',v);
				}
			});
		}
	</script>
	
	<select id="state" class="easyui-combobox" name="sheng" style="width:200px;">
		<option value="河北省">河北省</option>
		<option value="山东省">山东省</option>
		<option value="辽宁省">辽宁省</option>
		<option value="黑龙江省">黑龙江省</option>
		<option value="吉林省">吉林省</option>
		<option value="甘肃省">甘肃省</option>
		<option value="青海省">青海省</option>
		<option value="河南省">河南省</option>
		<option value="江苏省">江苏省</option>
		<option value="湖北省">湖北省</option>
		<option value="湖南省">湖南省</option>
		<option value="江西省">江西省</option>
		<option value="浙江省">浙江省</option>
		<option value="广东省">广东省</option>
		<option value="云南省">云南省</option>
		<option value="福建省">福建省</option>
		<option value="台湾省">台湾省</option>
		<option value="海南省">海南省</option>
		<option value="山西省">山西省</option>
		<option value="四川省">四川省</option>
		<option value="陕西省">陕西省</option>
		<option value="贵州省">贵州省</option>
		<option value="安徽省">安徽省</option>
	</select>

</body>
</html>

 

© 著作权归作者所有

共有 人打赏支持
F
粉丝 4
博文 185
码字总数 96673
作品 0
成都
程序员
EasyUI Combobox中getValue和getText

在组织部项目中使用的Combobox都是通过<input>标签实现的,如下: <input id="checkPlace" class="easyui-combobox" name="checkPlace" data-options="valueField:'id',textField:'text',ur......

霜叶情 ⋅ 04/12 ⋅ 0

初探WINDOWS下IME编程

大家知道,DELPHI许多控件有IME属性。这么好用的东西VC可没自带,怎么办呢?其实,可通过注册表,用API实现。下面说一下本人对IME的研究结果,并提供示例工程供大家参考: 下载示例工程 10.6...

yousss ⋅ 04/25 ⋅ 0

QPalette类详细使用方法

QPalette( [ˈpælət] 调色板)类相当于对话框或控件的调色板,它管理着控件或窗体的所有颜色信息,每个窗体或控件都包含一个QPalette对象,在显示时按照它的QPalette对象中对各部分各状态下...

m0_37806112 ⋅ 04/11 ⋅ 0

70个学习JAVA必背的英语单词,了解下

以下是整理的70个在JAVA在学习JAVA的时候经常遇到的英文单词 1、Compile:编绎 2、Run:运行 3、Class:类 4、Object:对象 5、System:系统 6、out:输出 7、print:打印 8、line:行 9、variable:...

编程大侠 ⋅ 04/11 ⋅ 0

C# Revit二次开发基础-核心课程

第1章 C# Revit二次开发概述 【直播】1)课程体系介绍(7月1日 20:30-21:30) 免费试学 【直播】2)配置开发环境(7月4日 20:30-21:30) 15 第15章 课程总结 【直播】44) C#、BIM、Revit二次开发...

liujiangtaocsu ⋅ 05/12 ⋅ 0

PearPlayer 2.4.12 发布,流媒体播放器

PearPlayer 2.4.12 已发布,更新内容: 优化在弱网环境下的播放体验 重写英文说明文档 终端缓存节点增加到10万+ 修复一些已知的bug 优化API传输协议

snowinszut ⋅ 02/08 ⋅ 0

Next.js 5.0.1-canary.2 发布,React 应用的后端渲染框架

Next.js 5.0.1-canary.2 发布,Next.js 是一个用于在服务端渲染 React 应用程序的简单框架 更新内容: Patches Make sure to alias only and but not sub modules: #3731 下载地址: Source...

周其 ⋅ 02/09 ⋅ 0

CentOS 6 更改系统时区

编译安装glibc时,make命令进入死循环,不停地检查编译环境,等了半个小时还在循环,网上一查原来是因为系统时间和glibc软件包的时间不一致,系统时间慢于glibc configure配置时间,看了下时...

拾瓦兴阁 ⋅ 04/03 ⋅ 0

基站短信群发设备

基站短信群发设备【电/薇同号:159乄1443乄0801】姚晨和舒淇是娱乐圈中出名的大嘴女明星,姚晨从出道至今,被人说了不少闲话,最多的一句话是:“长成这样还想当明星?简直是...

15662209540 ⋅ 03/24 ⋅ 0

天梯赛 L3 - 015 球队“食物链” 【dfs + 剪枝】

传送门 题意不多说. 思路: 这个问题很明显的是哈密顿回路的版本, 而哈密顿回路是个NP问题, 用dfs当然可以出答案, 但是点不能太多, 这个题目20个点, 再加上剪枝就可以过了. 所以首先确定我们...

anxdada ⋅ 03/26 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

火狐浏览器各版本下载及插件httprequest

各版本下载地址:http://ftp.mozilla.org/pub/mozilla.org//firefox/releases/ httprequest插件截至57版本可用

xiaoge2016 ⋅ 21分钟前 ⋅ 0

Java学习路径及练手项目合集

Java学习路径及练手项目合集

颖伙虫 ⋅ 37分钟前 ⋅ 0

Docker系列教程28-实战:使用Docker Compose运行ELK

原文:http://www.itmuch.com/docker/28-docker-compose-in-action-elk/,转载请说明出处。 ElasticSearch【存储】 Logtash【日志聚合器】 Kibana【界面】 答案: version: '2'services: ...

周立_ITMuch ⋅ 今天 ⋅ 0

使用快嘉sdkg极速搭建接口模拟系统

在具体项目研发过程中,一旦前后端双方约定好接口,前端和app同事就会希望后台同事可以尽快提供可供对接的接口方便调试,而对后台同事来说定好接口还仅是个开始、设计流程,实现业务逻辑,编...

fastjrun ⋅ 今天 ⋅ 0

PXE/KickStart 无人值守安装

导言 作为中小公司的运维,经常会遇到一些机械式的重复工作,例如:有时公司同时上线几十甚至上百台服务器,而且需要我们在短时间内完成系统安装。 常规的办法有什么? 光盘安装系统 ===> 一...

kangvcar ⋅ 昨天 ⋅ 0

使用Puppeteer撸一个爬虫

Puppeteer是什么 puppeteer是谷歌chrome团队官方开发的一个无界面(Headless)chrome工具。Chrome Headless将成为web应用自动化测试的行业标杆。所以我们很有必要来了解一下它。所谓的无头浏...

小草先森 ⋅ 昨天 ⋅ 0

Java Done Right

* 表示难度较大或理论性较强。 ** 表示难度更大或理论性更强。 【Java语言本身】 基础语法,面向对象,顺序编程,并发编程,网络编程,泛型,注解,lambda(Java8),module(Java9),var(...

风华神使 ⋅ 昨天 ⋅ 0

Linux系统日志

linux 系统日志 /var/log/messages /etc/logrotate.conf 日志切割配置文件 https://my.oschina.net/u/2000675/blog/908189 logrotate 使用详解 dmesg 命令 /var/log/dmesg 日志 last命令,调......

Linux学习笔记 ⋅ 昨天 ⋅ 0

MVC——统一报文格式的异常处理响应

在我们写controller层的时候,常常会有这样的困惑,如果需要返回一个数据是,可能为了统一回去构造一个类似下列的数据格式: { status:true, msg:"保存成功!", data:[]} 而且在写...

alexzhu592 ⋅ 昨天 ⋅ 0

android -------- 打开本地浏览器或指定浏览器加载,打电话,打开第三方app

开发中常常有打开本地浏览器加载url或者指定浏览器加载, 还有打开第三方app, 如 打开高德地图 百度地图等 在Android程序中我们可以通过发送隐式Intent来启动系统默认的浏览器。 如果手机本身...

切切歆语 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部