Expand row in DataGrid to show subgrid
<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>Expand row in DataGrid to show subgrid - 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.4.4.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>Expand row in DataGrid to show subgrid</h2>
<div class="demo-info" style="margin-bottom: 10px">
<div class="demo-tip icon-tip"> </div>
<div>Click the expand button to expand row and view subgrid.</div>
</div>
<table id="dg" style="width: 650px; height: 250px"
url="datagrid22_getdata.php" title="DataGrid - SubGrid"
singleSelect="true" fitColumns="true">
<thead>
<tr>
<th field="itemid" width="80">Item ID</th>
<th field="productid" width="100">Product ID</th>
<th field="listprice" align="right" width="80">List Price</th>
<th field="unitcost" align="right" width="80">Unit Cost</th>
<th field="attr1" width="220">Attribute</th>
<th field="status" width="60" align="center">Status</th>
</tr>
</thead>
</table>
<script type="text/javascript">
$(function() {
$('#dg')
.datagrid(
{
view : detailview,
detailFormatter : function(index, row) {
return '<div style="padding:2px"><table class="ddv"></table></div>';
},
onExpandRow : function(index, row) {
var ddv = $(this).datagrid('getRowDetail',
index).find('table.ddv');
ddv
.datagrid({
url : 'datagrid22_getdetail.php?itemid='
+ row.itemid,
fitColumns : true,
singleSelect : true,
rownumbers : true,
loadMsg : '',
height : 'auto',
columns : [ [ {
field : 'orderid',
title : 'Order ID',
width : 200
}, {
field : 'quantity',
title : 'Quantity',
width : 100,
align : 'right'
}, {
field : 'unitprice',
title : 'Unit Price',
width : 100,
align : 'right'
} ] ],
onResize : function() {
$('#dg')
.datagrid(
'fixDetailRowHeight',
index);
},
onLoadSuccess : function() {
setTimeout(
function() {
$('#dg')
.datagrid(
'fixDetailRowHeight',
index);
}, 0);
}
});
$('#dg').datagrid('fixDetailRowHeight',
index);
}
});
});
</script>
</body>
</html>
分享到：
相关推荐
标题“C# MVC4 easyui datagrid expand row”表明我们要讨论的重点是利用EasyUI的数据网格组件实现一个可展开行的功能，这对于展示层次结构数据或需要额外详细信息的表格特别有用。 首先，让我们了解C# MVC4。ASP...
Convert a HTML table to DataGrid Add a pagination to DataGrid Get selected row data from DataGrid Add a toolbar to DataGrid Create Complex Toolbar for ... Expand row in DataGrid to show details
-- Row template with expand/collapse logic --> </DataGrid.RowStyle> </DataGrid> ``` 在C#中，你可能需要实现类似以下的代码： ```csharp public class Order : INotifyPropertyChanged { private bool _...
你可以通过`on`或`bind`方法绑定事件处理函数，如`$("#element").datagrid("bind", "clickRow", function(index, row){...})`。 5. **状态控制** API 还允许你控制组件的状态，如展开/折叠面板（`panel("expand")`...
此外，还可以使用 `treegrid.expandRow` 和 `treegrid.collapseRow` 方法展开或折叠特定行。 5. **事件处理**：EasyUI TreeGrid 支持多种事件，如 `onLoadSuccess`、`onClickRow` 等，可以在这些事件中编写自定义...