`
KIWIFLY
  • 浏览: 6164 次
文章分类
社区版块
存档分类
最新评论

easyui 的 DataGrid View 使用

 
阅读更多


easyui真是后台人员的宝呀,让不会前台的程序员,不用再用那些自己看着都恶心的表格了!偷笑


今天来说说easyui datagrid 的 数据表格详细展示表格,这个有趣多了!


先上图



然后是代码

$('#tt').datagrid({
				title:'浏览模式',
				remoteSort:false,
				nowrap:false,
				fitColumns:true,
				sortName: "id",
				sortOrder: "desc", 
				pageSize: 20,
				pageList: [5, 10, 15, 20],
				pagination: true,
				url:'getMemberAllList.do',
				columns:[[
					{field:'id',title:'ID',width:80,sortable:true},
					{field:'userAccount',title:'用户帐号',width:100},
					{field:'userPwd',title:'用户密码',width:80},
					{field:'userTel',title:'手机',width:80},
					{field:'userEmail',title:'邮箱',width:150},
					{field:'userPayPwd',title:'支付密码',width:60},
					{field:'userRegisterDate',title:'注册日期',width:60,sortable:true},
					{field:'userGradeId',title:'会员等级',width:60,sortable:true},
					{field:'userFlag',title:'用户标记',width:60},
					
			
					{field:'userRealName',title:'真实姓名', hidden: 'true'},
					{field:'userGender',title:'性别', hidden: 'true'},
					{field:'userBirthday',title:'出生日期', hidden: 'true'},
					{field:'userAddress',title:'详细地址', hidden: 'true'},
					{field:'userPoints',title:'积分', hidden: 'true'},
					{field:'userPaySum',title:'消费金额', hidden: 'true'},
					{field:'userIdCard',title:'身份证', hidden: 'true'},
					{field:'userCollectList',title:'收藏表', hidden: 'true'},
					{field:'userImageMinHref',title:'头像', hidden: 'true'}
					
					
					
				]],
				view: detailview,
				detailFormatter: function(rowIndex, rowData){
					return '<table cellspacing="30px"><tr>' +
							'<td rowspan=2 style="border:0"><img src="<%=request.getContextPath()%>/images/header/' + rowData.userImageMinHref + '.jpg" style="height:50px;"></td>' +
							'<td style="border:0">' +
							'<p><b style=" color:blue ">真实姓名:</b> ' + rowData.userRealName + '</p>' +
							'<p><b style=" color:blue ">性 别:</b> ' + rowData.userGender + '</p>' +
							'</td>' +
							'<td style="border:0">' +
							'<p><b style=" color:blue ">出生日期:</b> ' + rowData.userBirthday + '</p>' +
							'<p><b style=" color:blue ">详细地址:</b> ' + rowData.userAddress + '</p>' +
							'</td>'+
							'<td style="border:0">' +
							'<p><b style=" color:blue ">积 分:</b> ' + rowData.userPoints + '</p>' +
							'<p><b style=" color:blue ">消费金额:</b> ' + rowData.userPaySum + '</p>' +
							'</td>'+
							'<td style="border:0">' +
							'<p><b style=" color:blue ">身份证:</b> ' + rowData.userIdCard + '</p>' +
							'<p><b style=" color:blue ">收藏商品:</b> ' + rowData.userCollectList + '</p>' +
							'</td>'+
							'</tr></table>';
				},
				toolbar: /* '#selectToolbar' */ [{
					disabled: 'true',
					iconCls: 'icon-add',
					text: '浏览模式',
					handler: function(){
						
						
	                       $('#dd').panel('close'); 
	                       $('#tt').datagrid('getPanel').panel('open');
					}
				},'-',{
					
					iconCls: 'icon-edit',
					text: '编辑模式',
					handler: function(){
						
						$('#tt').datagrid('getPanel').panel('close');
						$('#dd').panel('open');					
						
					}
				}],
	            onBeforeLoad: function () {
	            	$('#pp').panel('open');
	                start();
	            },
	            onLoadSuccess: function () {
	            	$('#pp').panel('close');
	            }

				
			});
});
用spring发送json数据就不贴了

分享到:
评论

相关推荐

    easyui datagrid 分页查询样例

    通过这个样例,开发者可以学习到如何结合EasyUI Datagrid和SpringMVC实现后台分页查询,理解前后端数据交互的原理,并且掌握相关框架和组件的使用。这将有助于提升Web应用的数据展示效率和用户体验。

    easyui帮助手册datagrid

    在本篇文章中,我们将深入探讨 EasyUI Datagrid 的主要配置选项及其用途。 1. **columns**:这是 Datagrid 最基本的配置,它是一个数组,包含了表格的所有列信息,如字段名(field)、标题(title)和宽度(width)...

    query_easyui_datagrid的增加_修改_删除.

    在探讨如何使用`query_easyui_datagrid`进行数据的增加、修改和删除之前,我们先来了解EasyUI库的基础知识及其提供的Datagrid组件。EasyUI是一个基于jQuery的用户界面插件集合,它提供了多种UI组件,如对话框、树形...

    DataGrid 中加入图标

    在.NET Framework中,使用Windows Forms或WPF的DataGrid控件,我们可以利用DataGridTemplateColumn来自定义列的显示。通过在模板中添加Image控件,并根据数据绑定到相应的字段或属性,可以实现图标显示。例如: ```...

    在DataGrid中使用CheckBox,实现全选功能

    在.NET框架中,Windows Forms和WPF应用中经常使用DataGrid控件来展示和操作数据。这个场景下,用户可能需要实现一个常见的功能,即在DataGrid中添加CheckBox,允许用户进行多选操作,尤其是全选功能。这篇博客“在...

    基于EasyUIdatagrid实现数据库操作的方法 (2012年)

    MVC三层架构是一种经典的设计模式,MVC的思想是将“显示”(View)、“数据”(Model)和“控制”(Control)分开。而JqueryUI作为前端视图的一种流行插件,也正逐渐得到广泛应用。其中Datagrid是数据库WEB页面呈现较频繁的...

    让easyui datagrid-detailview. +号图标 定义在其他列的后面

    在默认情况下,`datagrid`的详细视图(detail view)的加号图标会出现在数据行的最左边,即第一列之前。要改变这个位置,我们需要自定义`datagrid`的列模板,并结合JavaScript进行一些额外的设置。 1. **自定义列...

    JQueryEasyUI以及easyui拓展插件.zip

    jquery easyui的压缩包,以及easyui的一些拓展插件包,包括Portal(制作图表、列表、球形图等),数据网格视图(DataGrid View),可编辑的数据网格(Editable DataGrid),表格编辑单元格(Cell Editing in ...

    easyui datagridview扩展

    EasyUI 是一个基于 jQuery 的前端框架,用于快速构建用户界面,而 DataGridView 是 EasyUI 中的一个核心组件,主要用于展示数据表格。在 EasyUI 的扩展中,DataGridView 提供了多种功能增强,使得开发者能够更加灵活...

    jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果

    在本文中,我们将探讨如何使用jQuery Easyui的Datagrid组件实现单行的上移和下移功能,并且在操作后保存这些移动的结果。jQuery Easyui Datagrid是一个强大的数据展示工具,它提供了丰富的交互性和自定义选项,使得...

    dms.rar_easyui java_easyui-datagrid_jeasyui ibatis_jquery-easyui

    标签中的"easyui-java"表示项目使用了EasyUI与Java的结合,"easyui-datagrid"是EasyUI中的一个关键组件,用于展示表格数据。"jeasyui"可能指的是jQuery-EasyUI,它是EasyUI的一个扩展,提供了更多的jQuery插件和组件...

    Jquery下EasyUI组件中的DataGrid结果集清空方法

    在jQuery EasyUI框架中,DataGrid是一个非常常用的组件,用于展示和操作表格数据。当我们需要根据用户的选择动态更新DataGrid的数据时,有时需要清空DataGrid的结果集,以确保显示最新的查询结果。在这个场景中,...

    JQuery Easy-UI DataGrid性能调优

    - **介绍**:EasyUI DataGrid提供了一种名为Virtual Scroll View的视图模式,专门用于改善大数据量下的性能问题。 - **实施步骤**:启用此视图模式,以减少页面滚动时的数据重绘次数,从而提升整体性能。 #### 勾选...

    struts2+ajax+easyui+json+datagrid增删改查

    Struts2、Ajax、EasyUI、JSON 和 DataGrid 是现代Web开发中常用的技术组合,用于构建功能丰富的交互式用户界面。下面将详细解释这些技术及其在实现增删改查、分页和排序功能中的作用。 **Struts2** 是一个基于MVC...

    浅谈MVC+EF easyui dataGrid 动态加载分页表格

    在本文中,我们将深入探讨如何使用MVC(Model-View-Controller)框架、Entity Framework(EF)以及EasyUI中的dataGrid组件实现动态加载分页表格的功能。这种技术常用于Web应用开发,它允许用户在不刷新整个页面的...

    easyui 实例

    这暗示我们将研究一个使用EasyUI DataGrid组件的示例,它通常用于展示和管理大量的数据。DataGrid可以从服务器获取数据,并支持排序、分页和过滤功能。datagrid8_demo.html很可能是前端展示页面,包含了DataGrid的...

    MVC与EASYUI结合使用实例

    1. **EasyUI Datagrid集成**: Datagrid允许动态加载数据,支持排序、分页、筛选等功能。在MVC应用中,控制器可以处理数据查询和操作,然后返回给datagrid展示。视图部分,只需要在HTML中配置好datagrid的基本属性,...

    jQuery EasyUI框架中的Datagrid数据表格组件结构详解

    6. **分冻结列部分和普通列部分**:在`datagrid-view`内部,有两个子容器,分别用于显示冻结列(`datagrid-view1`)和非冻结列(`datagrid-view2`)。冻结列部分通常包含行号或冻结列,而普通列部分则显示其他未冻结...

    EasyUI折叠表格层次显示detailview详解及实例

    然后,在JavaScript中设置datagrid的配置项,包括使用detailview,定义展开行时的详细内容格式化函数`detailFormatter`,以及在展开行时的回调函数`onExpandRow`: ```javascript $(function() { $('#dg')....

Global site tag (gtag.js) - Google Analytics