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 折叠一行。

相关文章
jquery easyui实现可编辑表格jquery easyui datagrid单元格鼠标移动弹出提示框tooltip的使用方法jquery easyui datagrid filter row 可过滤行的数据表格 jquery easyui drag and drop rows in datagrid 可拖放行的数据表格 jquery easyui drag and drop rows in treegrid 可拖放行的树形表格 jquery easyui datetimespinner 日期时间微调框 jquery easyui filebox 文件框 jquery easyui datalist 数据列表 jquery easyui pivotgrid 数据分析表格 jquery easyui cell editing in datagrid 单元格编辑表格 jquery easyui columns extension for datagrid 列扩展表格 jquery easyui combotreegrid 树形表格下拉框 jquery easyui panel 面板 jquery easyui combogrid 数据表格下拉框 jquery easyui datetimebox 日期时间输入框 jquery easyui datagrid 数据表格 jquery easyui propertygrid 属性表格 jquery easyui treegrid 树形表格 jquery easyui datagrid view 数据表格展示 jquery easyui editable datagrid 可编辑表格
关注编程学问公众号