### DataGrid View（数据表格展示）
[Extension](http://www.jeasyui.com/extension/index.php) ? DataGrid View
**扩展下载地址：**[**http://www.jeasyui.com/extension/downloads/jquery-easyui-datagridview.zip**](http://www.jeasyui.com/extension/downloads/jquery-easyui-datagridview.zip)** ****(我发布的程序包整也有提供，在extension目录下)**
### DataGrid DetailView（数据表格详细展示）
#### 第1步：创建一个HTML页面
<head> <script type="text/javascript" src="datagrid-detailview.js"></script> </head> <body> <table id="tt"></table> </body>
#### 第2步：创建数据表格
$('#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>'; } });
####
#### 属性
| **属性名** | **属性值类型** | **描述** | **默认值** |
|-----|-----|-----|-----|
| detailFormatter | function(index,row) | detailFormatter函数返回行详细内容。 | |
####
#### 事件
| **事件名** | **参数** | **描述** |
|-----|-----|-----|
| onExpandRow | index,row | 在展开行的时候触发。 |
| onCollapseRow | index,row | 在折叠行的时候触发。 |
####
#### 方法
| **方法名** | **参数** | **描述** |
|-----|-----|-----|
| fixDetailRowHeight | index | 修复明细行高度。 |
| getExpander | index | 获取行展开对象。 |
| getRowDetail | index | 获取明细内容。 |
| expandRow | index | 展开一行。 |
| collapseRow | index | 折叠一行。 |
###
### DataGrid GroupView（数据表格分组展示）
#### 第1步：创建一个HTML页面
<head> <script type="text/javascript" src="datagrid-groupview.js"></script></head><body> <table id="tt"></table></body>
#### 第2步：创建数据表格
$('#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)'; } });
####
#### 属性
| **属性名** | **属性值类型** | **描述** | **默认值** |
|-----|-----|-----|-----|
| groupField | string | 声明哪些字段分组。 | |
| groupFormatter | function(value,rows) | groupFormatter函数返回分组内容。value参数指明了分组值定义的'groupField'属性。rows参数指明了指定分组值的数据行。 | |
####
#### 方法
| **方法名** | **参数** | **描述** |
|-----|-----|-----|
| expandGroup | groupIndex | 展开一个分组。 |
| collapseGroup | groupIndex | 折叠一个分组。 |
###
### DataGrid BufferView（数据表格缓存视图）
#### 第1步：导入缓存视图的JS文件
<head> <script type="text/javascript" src="datagrid-bufferview.js"></script></head>
#### 第2步：创建数据表格
<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>
###
### DataGrid VirtualScrollView（数据表格虚拟滚动视图）
#### 第1步：导入滚动视图的JS文件
<head> <script type="text/javascript" src="datagrid-scrollview.js"></script></head>
#### 第2步：创建包含虚拟滚动视图的数据表格
<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 1.4 版 API 中文版 (Made By Richie696)
- 文档说明
- 汉化说明
- EasyUI更新说明
- Base(基础)
- parser(解析器)
- easyloader(简单加载)
- draggable(拖动)
- droppable(放置)
- resizable(调整大小)
- pagination(分页)
- searchbox(搜索框)
- progressbar(进度条)
- tooltip(提示框)
- Layout(布局)
- panel(面板)
- tabs(选项卡)
- accordion(分类)
- layout(布局)
- Menu and Button(菜单和按钮)
- menu(菜单)
- linkbutton(按钮)
- menubutton(菜单按钮)
- splitbutton(分割按钮)
- Form(表单)
- form(表单)
- validatebox(验证框)
- textbox(文本框)
- combo(自定义下拉框)
- combobox(下拉列表框)
- combotree(树形下拉框)
- combogrid(数据表格下拉框)
- numberbox(数值输入框)
- datebox(日期输入框)
- datetimebox(日期时间输入框)
- datetimespinner(日期时间微调框)
- calendar(日历)
- spinner(微调)
- numberspinner(数字微调)
- timespinner(时间微调)
- slider(滑动条)
- filebox(文件框)
- Window(窗口)
- window(窗口)
- dialog(对话框窗口)
- messager(消息窗口)
- DataGrid and Tree(表格和树)
- datagrid(数据表格)
- propertygrid(属性表格)
- tree(树)
- treegrid(树形表格)
- Extension(扩展)
- Portal(门户)
- DataGrid View(数据表格展示)
- Editable DataGrid(可编辑表格)
- Editable Tree(可编辑树)
- DataGrid Filter Row(可过滤行的数据表格)
- Drag and Drop Rows in DataGrid(可拖放行的数据表格)
- Drag and Drop Rows in TreeGrid(可拖放行的树形表格)
- DWR Loader(DWR装载器)
- RTL Support(RTL支持)
- Ribbon(Ribbon界面)