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