jQuery EasyUI 教程
jQuery EasyUI 擴(kuò)展 - 數(shù)據(jù)網(wǎng)格視圖（DataGrid View）
jQuery EasyUI 擴(kuò)展數(shù)據(jù)網(wǎng)格詳細(xì)視圖（DataGrid DetailView）
用法
步驟 1：創(chuàng)建一個(gè) HTML 頁(yè)面
????<head> ????????<script type="text/javascript" src="datagrid-detailview.js"></script> ????</head> ????<body> ????????<table id="tt"></table> ????</body>
步驟 2：創(chuàng)建數(shù)據(jù)網(wǎng)格（DataGrid）
????$('#tt').datagrid({
????????title:'DataGrid - DetailView',
????????width:500,
????????height:250,
????????remoteSort:false,
????????singleSelect:true,
????????nowrap:false,
????????fitColumns:true,
????????url:'datagrid_data.json',
????????columns:[[
????????????{field:'itemid',title:'Item ID',width:80},
????????????{field:'productid',title:'Product ID',width:100,sortable:true},
????????????{field:'listprice',title:'List Price',width:80,align:'right',sortable:true},
????????????{field:'unitcost',title:'Unit Cost',width:80,align:'right',sortable:true},
????????????{field:'attr1',title:'Attribute',width:150,sortable:true},
????????????{field:'status',title:'Status',width:60,align:'center'}
????????]],
????????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>';
????????}
????});
屬性
| 名稱 | 類型 | 描述 | 默認(rèn)值 |
|---|---|---|---|
| detailFormatter | function(index,row) | 返回行明細(xì)內(nèi)容的格式化函數(shù)。 |
事件
| 名稱 | 參數(shù) | 描述 |
|---|---|---|
| onExpandRow | index,row | 當(dāng)展開一行時(shí)觸發(fā)。 |
| onCollapseRow | index,row | 當(dāng)折疊一行時(shí)觸發(fā)。 |
方法
| 名稱 | 參數(shù) | 描述 |
|---|---|---|
| fixDetailRowHeight | index | 固定明細(xì)行的高度。 |
| getExpander | index | 獲取行擴(kuò)展對(duì)象。 |
| getRowDetail | index | 獲取行明細(xì)容器。 |
| expandRow | index | 展開一行。 |
| collapseRow | index | 折疊一行。 |
數(shù)據(jù)網(wǎng)格分組視圖（DataGrid GroupView）
用法
步驟 1：創(chuàng)建一個(gè) HTML 頁(yè)面
????<head> ????????<script type="text/javascript" src="datagrid-groupview.js"></script> ????</head> ????<body> ????????<table id="tt"></table> ????</body>
步驟 2：創(chuàng)建數(shù)據(jù)網(wǎng)格（DataGrid）
????$('#tt').datagrid({
????????title:'DataGrid - GroupView',
????????width:500,
????????height:250,
????????rownumbers:true,
????????remoteSort:false,
????????nowrap:false,
????????fitColumns:true,
????????url:'datagrid_data.json',
????????columns:[[
????????????{field:'productid',title:'Product ID',width:100,sortable:true},
????????????{field:'listprice',title:'List Price',width:80,align:'right',sortable:true},
????????????{field:'unitcost',title:'Unit Cost',width:80,align:'right',sortable:true},
????????????{field:'attr1',title:'Attribute',width:150,sortable:true},
????????????{field:'status',title:'Status',width:60,align:'center'}
????????]],
????????groupField:'productid',
????????view: groupview,
????????groupFormatter:function(value, rows){
????????????return value + ' - ' + rows.length + ' Item(s)';
????????}
????});
屬性
| 名稱 | 類型 | 描述 | 默認(rèn) |
|---|---|---|---|
| groupField | string | 指示要被分組的字段。 | |
| groupFormatter | function(value,rows) |
返回分組內(nèi)容的格式化函數(shù)。 value 參數(shù)指示由 'groupField' 屬性定義的分組值。 rows 參數(shù)根據(jù)指定分組值指示數(shù)據(jù)行。 |
方法
| 名稱 | 參數(shù) | 描述 |
|---|---|---|
| expandGroup | groupIndex | 展開一個(gè)分組。 |
| collapseGroup | groupIndex | 折疊一個(gè)分組。 |
數(shù)據(jù)網(wǎng)格緩存視圖（DataGrid BufferView）
步驟 1：包含 'datagrid-bufferview.js' 文件
????<head> ????????<script type="text/javascript" src="datagrid-bufferview.js"></script> ????</head>
步驟 2：創(chuàng)建數(shù)據(jù)網(wǎng)格（DataGrid）
????<table id="tt" class="easyui-datagrid" style="width:700px;height:250px" ????????????title="DataGrid - BufferView" ????????????data-options="url:'get_data.php',view:bufferview,rownumbers:true,singleSelect:true,autoRowHeight:false,pageSize:50"> ????????<thead> ????????????<tr> ????????????????<th field="inv" width="80">Inv No</th> ????????????????<th field="date" width="100">Date</th> ????????????????<th field="name" width="80">Name</th> ????????????????<th field="amount" width="80" align="right">Amount</th> ????????????????<th field="price" width="80" align="right">Price</th> ????????????????<th field="cost" width="100" align="right">Cost</th> ????????????????<th field="note" width="110">Note</th> ????????????</tr> ????????</thead> ????</table>
數(shù)據(jù)網(wǎng)格虛擬滾動(dòng)視圖（DataGrid VirtualScrollView）
步驟 1：包含 'datagrid-scrollview.js' 文件
????<head> ????????<script type="text/javascript" src="datagrid-scrollview.js"></script> ????</head>
步驟 2：通過虛擬滾動(dòng)視圖創(chuàng)建數(shù)據(jù)網(wǎng)格（DataGrid）
????<table id="tt" class="easyui-datagrid" style="width:700px;height:250px" ????????????title="DataGrid - VirtualScrollView" ????????????data-options="url:'get_data.php',view:scrollview,rownumbers:true,singleSelect:true,autoRowHeight:false,pageSize:50"> ????????<thead> ????????????<tr> ????????????????<th field="inv" width="80">Inv No</th> ????????????????<th field="date" width="100">Date</th> ????????????????<th field="name" width="80">Name</th> ????????????????<th field="amount" width="80" align="right">Amount</th> ????????????????<th field="price" width="80" align="right">Price</th> ????????????????<th field="cost" width="100" align="right">Cost</th> ????????????????<th field="note" width="110">Note</th> ????????????</tr> ????????</thead> ????</table>
下載 jQuery EasyUI 實(shí)例
jquery-easyui-datagridview.zip
jQuery EasyUI 擴(kuò)展其他擴(kuò)展