jQuery EasyUI入门到精通（21）DataGrid（11）
1、Nested SubGrid（嵌套的子表格），Loading nested subgrid data（加载嵌套子表格数据）.Click the expand button to expand row and view subgrid（点击扩展按钮用来扩展行以及显示子表格）.
HTML基本结构如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Loading nested subgrid data - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/datagrid-detailview.js"></script>
</head>
<body>
<h2>Loading nested subgrid data</h2>
Click the expand button to expand row and view subgrid.
<table id="dg"></table>
</body>
</html>
2、Nested SubGrid（嵌套的子表肤茄讨格）案例，Javascript代码如下所示：
<script type="text/javascript">
var conf = {
options:{
fitColumns:true,
columns:[[
{field:'company',title:'Company Name',width:200},
{field:'contact',title:'Contact Name',width:200},
{field:'country',title:'Country',width:200}
]],
data:[
{company:'Speed Info',contact:'Minna John',country:'Sweden'}
]
},
subgrid:{
options:{
fitColumns:true,
foreignField:'companyid',
columns:[[
{field:'orderdate',title:'Order Date',width:200},
{field:'shippeddate',title:'Shipped Date',width:200},
{field:'freight',title:'Freight',width:200}
]],
data:[
{orderdate:'08/23/2012',shippeddate:'12/25/2012',freight:9734}
]
},
欠舍 subgrid:{
总诸 options:{
fitColumns:true,
foreignField:'orderid',
columns:[[
{field:'price',title:'Unit Price',width:200,align:'right'},
{field:'quantity',title:'Quantity',width:200,align:'right'},
{field:'discount',title:'Discount',width:200,align:'right',formatter:function(value){
return value*100+'%'
}}
]],
data:[
{price:923,quantity:2312,discount:0.2}
]
},
subgrid:{
options:{
fitColumns:true,
foreignField:'pid',
singleSelect:true,
columns:[[
{field:'pnumber',title:'Product Number',width:200},
{field:'pname',title:'Product Name',width:200},
{field:'supplier',title:'Supplier',width:200}
]],
data:[
{pnumber:'00100823',pname:'Canon PowerShot A1300',supplier:'Canon'},
{pnumber:'12023423',pname:'Cisco RV110W-A-NA-K9',supplier:'Cisco'},
{pnumber:'82312393',pname:'Nikon COOLPIX L26 16.1 MP',supplier:'Nikon'}
]
}
}
}
}
};
$(function(){
$('#dg').datagrid({
title:'DataGrid - Nested SubGrid',
width:700,
height:300
}).datagrid('subgrid', conf);
});
</script>
3、Nested SubGrid（嵌套的子表格）运行效果如下图所示：
4、Large Data（大数据），Display large amount of data in DataGrid without pagination（在数据表格中显示大量数据但不使用分页）.
HTML基本结构如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="keywords" content="jquery,ui,easy,easyui,web">
<meta name="description" content="easyui help you build your web page easily!">
<title>Display large amount of data in DataGrid without pagination - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<h2>Display large amount of data in DataGrid without pagination</h2>
<div class="demo-info" style="margin-bottom:10px">
<div class="demo-tip icon-tip"> </div>
<div>Enter record count and press load button.</div>
</div>
<div style="margin-bottom:10px">
<span>Record Count:</span>
<input id="total" class="easyui-numberbox" value="100" min="0" max="2000">
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-reload" onclick="loaddata()">Load</a>
</div>
<table id="tt" style="width:700px;height:250px"
url="datagrid25_getdata.php" singleSelect="true"
title="Load Large Data" iconCls="icon-ok" autoRowHeight="false">
<thead>
<tr>
<th field="inv
<th field="date
<th field="name
<th field="amount
<th field="price
<th field="cost
<th field="note
</tr>
</thead>
</table>
</body>
</html>
5、Large Data（大数据）案例，Javascript代码如下图所示：
<script type="text/javascript">
$(function(){
$('#tt').datagrid({
onLoadSuccess:function(data){
$.messager.show({
title:'Info',
msg:'Load '+data.total+' records successfully'
});
}
});
});
function loaddata(){
$('#tt').datagrid('load',{
total: $('#total').numberbox('getValue')
});
}
</script>
6、Display large amount of data in DataGrid without pagination（在数据表格中显示大量数据但不使用分页），运行效果如下图所示：
