<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
<html>
|
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
<title>jQuery EasyUI</title>
|
<link rel="stylesheet" type="text/css" href="../css/easyui.css">
|
<link rel="stylesheet" type="text/css"
|
href="http://www.jeasyui.net/Public/js/easyui/themes/icon.css">
|
<script type="text/javascript" src="../js/jquery.min.js"></script>
|
<script type="text/javascript" src="../js/foundation-2.0.js"></script>
|
<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
|
<script type="text/javascript" src="../js/datagrid-detailview.js"></script>
|
<script>
|
$(function(){
|
Server.getColumns("tt", function(columns) {
|
$('#tt').datagrid({
|
title:'DataGrid - DetailView',
|
width:500,
|
height:250,
|
remoteSort:false,
|
singleSelect:true,
|
nowrap:false,
|
fitColumns:true,
|
url:'datagrid_data.json',
|
columns:columns,
|
view: detailview,
|
detailFormatter: function(rowIndex, rowData){
|
return '<table><tr>' +
|
'<td rowspan=2 style="border:0"><img src="images/' + rowData.itemid + '.png" style="height:50px;"></td>' +
|
'<td style="border:0">' +
|
'<p>Attribute: ' + rowData.attr1 + '</p>' +
|
'<p>Status: ' + rowData.status + '</p>' +
|
'</td>' +
|
'</tr></table>';
|
}
|
});
|
});
|
|
});
|
</script>
|
</head>
|
<body>
|
<h1>DataGrid - DetailView</h1>
|
|
<table id="tt"></table>
|
</body>
|
</html>
|
