文档章节

13.EASYUI ComboGrid组件

F
 Favour
发布于 2016/08/15 16:46
字数 1202
阅读 25
收藏 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 ComboGrid - 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-combogrid" style="width:250px" value="EST-12" data-options="
			panelWidth: 500,
			idField: 'itemid',
			textField: 'productname',
			url: '../ComboGrid/datagrid_data1.json',
			columns: [[
				{field:'itemid',title:'产品编号',width:80},
				{field:'productname',title:'产品名称',width:120},
				{field:'listprice',title:'市场价',width:80,align:'right'},
				{field:'unitcost',title:'成本价',width:80,align:'right'},
				{field:'attr1',title:'描述',width:200},
				{field:'status',title:'状态',width:60,align:'center'}
			]],
			fitColumns: true
		">
</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 ComboGrid - 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>
	<select class="easyui-combogrid" style="width:250px" data-options="
			panelWidth: 500,
			idField: 'itemid',
			textField: 'productname',
			url: '../ComboGrid/datagrid_data1.json',
			columns: [[
				{field:'itemid',title:'产品编号',width:80},
				{field:'productname',title:'产品名称',width:120},
				{field:'listprice',title:'市场价',width:80,align:'right'},
				{field:'unitcost',title:'成本价',width:80,align:'right'},
				{field:'attr1',title:'描述',width:200},
				{field:'status',title:'状态',width:60,align:'center'}
			]],
			fitColumns: true
		">
	</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 ComboGrid - 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>
	<select class="easyui-combogrid" style="width:250px" data-options="
			panelWidth: 500,
			multiple: true,
			idField: 'itemid',
			textField: 'productname',
			url: '../ComboGrid/datagrid_data1.json',
			columns: [[
				{field:'ck',checkbox:true},
				{field:'itemid',title:'产品编号',width:80},
				{field:'productname',title:'产品名称',width:120},
				{field:'listprice',title:'市场价',width:80,align:'right'},
				{field:'unitcost',title:'成本价',width:80,align:'right'},
				{field:'attr1',title:'描述',width:200},
				{field:'status',title:'状态',width:60,align:'center'}
			]],
			fitColumns: true
		">
	</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 ComboGrid - 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">
		<input type="checkbox" checked onchange="$('#cc').combogrid({selectOnNavigation:$(this).is(':checked')})">
		<span>导航选中</span>
	</div>
	<select id="cc" class="easyui-combogrid" style="width:250px" data-options="
			panelWidth: 500,
			idField: 'itemid',
			textField: 'productname',
			url: '../ComboGrid/datagrid_data1.json',
			columns: [[
				{field:'itemid',title:'产品编号',width:80},
				{field:'productname',title:'产品名称',width:120},
				{field:'listprice',title:'市场价',width:80,align:'right'},
				{field:'unitcost',title:'成本价',width:80,align:'right'},
				{field:'attr1',title:'描述',width:200},
				{field:'status',title:'状态',width:60,align:'center'}
			]],
			fitColumns: true
		">
	</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 ComboGrid - 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-combogrid" style="width:250px" data-options="
			panelWidth: 500,
			idField: 'itemid',
			textField: 'productname',
			url: '../ComboGrid/datagrid_data1.json',
			columns: [[
				{field:'itemid',title:'产品编号',width:80},
				{field:'productname',title:'产品名称',width:120},
				{field:'listprice',title:'市场价',width:80,align:'right'},
				{field:'unitcost',title:'成本价',width:80,align:'right'},
				{field:'attr1',title:'描述',width:200},
				{field:'status',title:'状态',width:60,align:'center'}
			]],
			fitColumns: true
		">
	<script type="text/javascript">
		function getValue(){
			var val = $('#cc').combogrid('getValue');
			alert(val);
		}
		function setValue(){
			$('#cc').combogrid('setValue', 'EST-13');
		}
		function disable(){
			$('#cc').combogrid('disable');
		}
		function enable(){
			$('#cc').combogrid('enable');
		}
	</script>
</body>
</html>

 

© 著作权归作者所有

共有 人打赏支持
F
粉丝 4
博文 185
码字总数 96673
作品 0
成都
程序员
jQuery EasyUI使用教程之过滤ComboGrid

Combogrid组件和Combobox组件的共同点是,除了都具有下拉面板以外,它们都是基于数据网格的。Combogrid组件可以过滤、分页,并具有其他一些数据网格的功能。本教程向您展示如何在一个Combogr...

Miss_Hello_World ⋅ 2016/09/20 ⋅ 0

jQuery EasyUI 1.4.3 发布

jQuery EasyUI 1.4.3 发布,更新内容如下: 错误 textbox: “setText” 方法不接受 0 值,已修复。 timespinner: 在 IE11 下,单击空 textbox 出错,已修复。 tabs: “update” 方法不能只更...

ejzhang ⋅ 2015/07/03 ⋅ 26

jQuery EasyUI 1.4.1 发布

jQuery EasyUI 1.4.1 发布了,下载地址: http://www.jeasyui.com/download/index.php ChangeLog(更新日志) Bug(错误) The combogrid has different height than other combo components......

ejzhang ⋅ 2014/11/06 ⋅ 31

combogrid分页加载默认值时无法自动跳转到相应页的解决方案

当如果easyui combogrid分布加载时,有默认值,且默认值不在第一页时,此时combogrid里的显示值为idField取到的对就值,如下图: “xiaoxiao”是默认值,但是并没有到相应的页面中被选择,而...

who7708 ⋅ 2015/08/18 ⋅ 3

如何对combogrid在分页的情况下实现多选?

请教个问题:如何对combogrid在分页的情况下实现多选?我弄了一个可分页的combogrid,需要支持多选。在同一页面多选没问题,选好这一页的之后,翻页,选框的值变成了ID,再想多选一条,点了之...

whaha2014 ⋅ 2015/09/13 ⋅ 1

easyui combogrid loadData加载不出来的问题

在easyui中用combogrid加载数据总是不成功,有没有遇到类是的问题的呢 代码 http://runjs.cn/detail/xukgvv5z 同样的数据 ,加载到表格上没有问题,加载到combogrid上却加载不了 var a = [{...

xxiu ⋅ 2013/01/01 ⋅ 2

jQuery EasyUI 1.5 发布

jQuery EasyUI 1.5 发布了,更新如下: 错误 combobox:加载包含选中项的数据时不触发“onSelect”事件,已修复。 datagrid:当字段设置空值有时“updateRow”方法不能正常工作,已修复。 改...

ejzhang ⋅ 2016/08/16 ⋅ 26

jquery easyui 的combogrid怎么重新加载数据

如题,在使用combogrid的时候怎么数据源改变的时候怎么样刷新combogrid的数据,重新在加载新的数据。

仁江 ⋅ 2012/05/29 ⋅ 3

EasyUI常用控件禁用方法

1.validatebox可以用的用法:前两种适用于单个的validatebox; 第三种应用于整个form里面的输入框; <1>.$("#id").attr("readonly", true); ----- $("#id").removeAttr("readonly"); <2>.$("#i......

自由de风 ⋅ 2015/05/07 ⋅ 0

jQuery EasyUI 1.5.1 发布,用户界面插件集合

更新 错误 datagrid:调用“updateRow”方法后丢失选中和复选标记,已修复。 tabs::调用“update”方法时trip工具定位错误,已修复。 window:高度设为“auto”时,移动窗口后设置会丢失,已...

ejzhang ⋅ 2016/12/15 ⋅ 13

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Jenkins实践3 之脚本

#!/bin/sh# export PROJ_PATH=项目路径# export TOMCAT_PATH=tomcat路径killTomcat(){pid=`ps -ef | grep tomcat | grep java|awk '{print $2}'`echo "tom...

晨猫 ⋅ 今天 ⋅ 0

Spring Bean的生命周期

前言 Spring Bean 的生命周期在整个 Spring 中占有很重要的位置,掌握这些可以加深对 Spring 的理解。 首先看下生命周期图: 再谈生命周期之前有一点需要先明确: Spring 只帮我们管理单例模...

素雷 ⋅ 今天 ⋅ 0

zblog2.3版本的asp系统是否可以超越卢松松博客的流量[图]

最近访问zblog官网,发现zlbog-asp2.3版本已经进入测试阶段了,虽然正式版还没有发布,想必也不久了。那么作为aps纵横江湖十多年的今天,blog2.2版本应该已经成熟了,为什么还要发布这个2.3...

原创小博客 ⋅ 今天 ⋅ 0

聊聊spring cloud的HystrixCircuitBreakerConfiguration

序 本文主要研究一下spring cloud的HystrixCircuitBreakerConfiguration HystrixCircuitBreakerConfiguration spring-cloud-netflix-core-2.0.0.RELEASE-sources.jar!/org/springframework/......

go4it ⋅ 今天 ⋅ 0

二分查找

二分查找,也称折半查找、二分搜索,是一种在有序数组中查找某一特定元素的搜索算法。搜素过程从数组的中间元素开始,如果中间元素正好是要查找的元素,则搜素过程结束;如果某一特定元素大于...

人觉非常君 ⋅ 今天 ⋅ 0

VS中使用X64汇编

需要注意的是,在X86项目中,可以使用__asm{}来嵌入汇编代码,但是在X64项目中,再也不能使用__asm{}来编写嵌入式汇编程序了,必须使用专门的.asm汇编文件来编写相应的汇编代码,然后在其它地...

simpower ⋅ 今天 ⋅ 0

ThreadPoolExecutor

ThreadPoolExecutor public ThreadPoolExecutor(int corePoolSize, int maximumPoolSize, long keepAliveTime, ......

4rnold ⋅ 昨天 ⋅ 0

Java正无穷大、负无穷大以及NaN

问题来源:用Java代码写了一个计算公式,包含除法和对数和取反,在页面上出现了-infinity,不知道这是什么问题,网上找答案才明白意思是负的无穷大。 思考:为什么会出现这种情况呢?这是哪里...

young_chen ⋅ 昨天 ⋅ 0

前台对中文编码,后台解码

前台:encodeURI(sbzt) 后台:String param = URLDecoder.decode(sbzt,"UTF-8");

west_coast ⋅ 昨天 ⋅ 0

实验楼—MySQL基础课程-挑战3实验报告

按照文档要求创建数据库 sudo sercice mysql startwget http://labfile.oss.aliyuncs.com/courses/9/createdb2.sqlvim /home/shiyanlou/createdb2.sql#查看下数据库代码 代码创建了grade......

zhangjin7 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部