### DataGrid View（数据表格展示）

Extension > DataGrid View

扩展下载地址：http://www.jeasyui.com/extension/downloads/jquery-easyui-datagridview.zip (我发布的程序包整也有提供，在extension目录下)

### DataGrid DetailView（数据表格详细展示）

#### 第1步：创建一个HTML页面

1. <head>
2. <script type="text/javascript" src="datagrid-detailview.js"></script>
3. </head>
4. <body>
5. <table id="tt"></table>
6. </body>

#### 第2步：创建数据表格

1. $('#tt').datagrid({
2. title:'DataGrid - DetailView',
3. width:500,
4. height:250,
5. remoteSort:false,
6. singleSelect:true,
7. nowrap:false,
8. fitColumns:true,
9. url:'datagrid_data.json',
10. columns:[[
11. {field:'itemid',title:'Item ID',width:80},
12. {field:'productid',title:'Product ID',width:100,sortable:true},
13. {field:'listprice',title:'List Price',width:80,align:'right',sortable:true},
14. {field:'unitcost',title:'Unit Cost',width:80,align:'right',sortable:true},
15. {field:'attr1',title:'Attribute',width:150,sortable:true},
16. {field:'status',title:'Status',width:60,align:'center'}
17. ]],
18. view: detailview,
19. detailFormatter: function(rowIndex, rowData){
20. return '<table><tr>' +
21. '<td rowspan=2 style="border:0"><img src="images/' + rowData.itemid + '.png" style="height:50px;"></td>' +
22. '<td style="border:0">' +
23. '<p>Attribute: ' + rowData.attr1 + '</p>' +
24. '<p>Status: ' + rowData.status + '</p>' +
25. '</td>' +
26. '</tr></table>';
27. }
28. });

####

#### 属性

属性名 | 属性值类型 | 描述 | 默认值
--- | --- | --- | ---
detailFormatter | function(index,row) | detailFormatter函数返回行详细内容。 |

####

#### 事件

事件名 | 参数 | 描述
--- | --- | ---
onExpandRow | index,row | 在展开行的时候触发。
onCollapseRow | index,row | 在折叠行的时候触发。

####

#### 方法

方法名 | 参数 | 描述
--- | --- | ---
fixDetailRowHeight | index | 修复明细行高度。
getExpander | index | 获取行展开对象。
getRowDetail | index | 获取明细内容。
expandRow | index | 展开一行。
collapseRow | index | 折叠一行。
subgrid | conf | 创建一个嵌套的子表格。“conf”参数有“option”和“subgrid”属性： 1. options: 定义数据表格的展现方式。子表格options对象有一个“foreignField”属性。foreign值将会被发送到服务器端进行数据查询。 2. subgrid: 用于定义创建嵌套子表格的参数. 代码示例：
    var conf = {
    	options:{
    		//主表格参数
    	},
    	subgrid:{
    		options:{
    			foreignField:'orderid',	// 外键关联字段
    			// 其他表格参数
    		},
    		subgrid:{
    			options:{
    				foreignField:...,
    				// 其他表格参数
    			}
    		}
    	}
    };
    $('#dg').datagrid().datagrid('subgrid', conf);
getParentGrid | none | 获取父datagrid对象。
getParentRowIndex | none | 获取父行索引。

###

### DataGrid GroupView（数据表格分组展示）

#### 第1步：创建HTML页面

1. <head>
2. <script type="text/javascript" src="datagrid-groupview.js"></script>
3. </head>
4. <body>
5. <table id="tt"></table>
6. </body>

#### 第2步：创建数据表格

1. $('#tt').datagrid({
2. title:'DataGrid - GroupView',
3. width:500,
4. height:250,
5. rownumbers:true,
6. remoteSort:false,
7. nowrap:false,
8. fitColumns:true,
9. url:'datagrid_data.json',
10. columns:[[
11. {field:'productid',title:'Product ID',width:100,sortable:true},
12. {field:'listprice',title:'List Price',width:80,align:'right',sortable:true},
13. {field:'unitcost',title:'Unit Cost',width:80,align:'right',sortable:true},
14. {field:'attr1',title:'Attribute',width:150,sortable:true},
15. {field:'status',title:'Status',width:60,align:'center'}
16. ]],
17. groupField:'productid',
18. view: groupview,
19. groupFormatter:function(value, rows){
20. return value + ' - ' + rows.length + ' Item(s)';
21. }
22. });

####

#### 属性

属性名 | 属性值类型 | 描述 | 默认值
--- | --- | --- | ---
groupField | string | 声明哪些字段分组。 |
groupFormatter | function(value,rows) | groupFormatter函数返回分组内容。value参数指明了分组值定义的'groupField'属性。rows参数指明了指定分组值的数据行。 |
groupStyler | function(value,rows) | 函数返回CSS样式组。 value参数表名了通过'groupField'属性定义的分组值。 rows参数表明了根据分组值指定的数据行。 代码示例：
    $('#dg').datagrid({
    	groupStyler: function(value,rows){
    		if (value == 'RP-LI-02'){
    			return 'background-color:#6293BB;color:#fff;'; // return inline style
    			// the function can return predefined css class and inline style
    			// return {class:'r1', style:{'color:#fff'}};
    		}
    	}
    });

####

#### 方法

方法名 | 参数 | 描述
--- | --- | ---
expandGroup | groupIndex | 展开一个分组。
collapseGroup | groupIndex | 折叠一个分组。
scrollToGroup | groupIndex | 滚动一个分组。

###

### DataGrid BufferView（数据表格缓存视图）

#### 第1步：导入 bufferview 的 js 文件

####

1. <head>
2. <script type="text/javascript" src="datagrid-bufferview.js"></script>
3. </head>

####

#### 第2步：创建数据表格

1. <table id="tt" class="easyui-datagrid" style="width:700px;height:250px"
2. title="DataGrid - BufferView"
3. data-options="url:'get_data.php',view:bufferview,rownumbers:true,singleSelect:true,autoRowHeight:false,pageSize:50">
4. <thead>
5. <tr>
6. <th field="inv" width="80">Inv No</th>
7. <th field="date" width="100">Date</th>
8. <th field="name" width="80">Name</th>
9. <th field="amount" width="80" align="right">Amount</th>
10. <th field="price" width="80" align="right">Price</th>
11. <th field="cost" width="100" align="right">Cost</th>
12. <th field="note" width="110">Note</th>
13. </tr>
14. </thead>
15. </table>

###

### DataGrid VirtualScrollView（数据表格虚拟滚动视图）

#### 第1步：导入滚动视图的JS文件

1. <head>
2. <script type="text/javascript" src="datagrid-scrollview.js"></script>
3. </head>

####

#### 第2步：创建包含虚拟滚动视图的数据表格

1. <table id="tt" class="easyui-datagrid" style="width:700px;height:250px"
2. title="DataGrid - VirtualScrollView"
3. data-options="url:'get_data.php',view:scrollview,rownumbers:true,singleSelect:true,autoRowHeight:false,pageSize:50">
4. <thead>
5. <tr>
6. <th field="inv" width="80">Inv No</th>
7. <th field="date" width="100">Date</th>
8. <th field="name" width="80">Name</th>
9. <th field="amount" width="80" align="right">Amount</th>
10. <th field="price" width="80" align="right">Price</th>
11. <th field="cost" width="100" align="right">Cost</th>
12. <th field="note" width="110">Note</th>
13. </tr>
14. </thead>
15. </table>

#### 方法

方法名 | 参数 | 描述
--- | --- | ---
gotoPage | page | 跳转到指定页面。
scrollTo | index | 滚动视图到指定的行。
fixDetailRowHeight | index | 固定明细行行高。
getExpander | index | 获取展开对象。
getRowDetail | index | 获取明细内容。
expandRow | index | 展开一行。
collapseRow | index | 折叠一行。