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數據就不貼了