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数据就不贴了