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...
easyUI datagrid 自动调整行号大小
在IT领域，EasyUI Datagrid是一款基于jQuery的前端数据展示组件，它提供了丰富的表格功能，如数据分页、排序、筛选等。当我们需要将Datagrid中的数据进行打印时，可能会遇到一些挑战，因为通常默认的浏览器打印功能...
easyui datagrid中实现上下左右、回车切换单元格easyui datagrid中实现上下左右、回车切换单元格easyui datagrid中实现上下左右、回车切换单元格
在IT行业中，EasyUI Datagrid是一款基于jQuery的前端数据展示组件，它提供了丰富的表格功能，如排序、分页、过滤等。在实际工作中，我们经常需要将这些展示的数据导出到Excel文件，以便进行进一步的分析或存储。下面...
这个“jquery easyui datagrid demo”包含了一些关于如何使用 jQuery EasyUI 中 Datagrid 组件的示例和相关文档，帮助我们理解和应用 Datagrid。 首先，`datagrid.doc` 文件很可能是 Datagrid 的简要说明文档，它...
标题中的“easyui datagrid 右冻结”是指在使用EasyUI框架开发Web应用程序时，针对datagrid组件实现右侧列固定的功能。EasyUI是一个基于jQuery的UI库，提供了丰富的组件，包括datagrid，它是一个用于展示表格数据的...
easyui datagrid editor回车切换单元格示例，适合熟悉easyui但又不懂如何做的人员，可能参考一下源码JS。
在使用EasyUI框架开发Web应用时，Datagrid组件是一个非常重要的元素，它提供了一种方便的方式来展示和操作数据。在标题“easyui datagrid在编辑状态下更新列的值”中，我们关注的是如何在Datagrid的编辑模式下动态地...
JS EasyUI DataGrid是一款基于jQuery和EasyUI框架的数据表格组件，它提供了丰富的功能，如数据分页、排序、过滤和自定义操作等。在实际应用中，动态加载数据是DataGrid的一个重要特性，允许用户在需要时加载更多的...
在本示例中，我们关注的是如何在EasyUI的Datagrid组件上添加一个特殊功能：当鼠标悬停在某一行时，弹出一个窗口显示该行的关键信息，例如用于图片预览。以下是对这个知识点的详细解释： 1. **EasyUI Datagrid**： ...
jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像（onMouseOver/onMouseOut） Demo 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停离开事件，源码奉献！！！
EasyUI 是一个基于 jQuery 的 UI 框架，它提供了丰富的组件，包括表格（DataGrid）等，使得 Web 应用程序的界面开发更加便捷。在这个"EasyUI DataGrid 过滤用法实例"中，我们将深入探讨如何利用 EasyUI 的 DataGrid ...
### EasyUI Datagrid 中文排序解决方案 #### 一、前言 在开发Web应用程序时，经常需要处理中文数据的排序问题。特别是在使用如EasyUI Datagrid这样的前端组件时，中文排序成为了开发者面临的一个常见挑战。本文将...
### 解决EasyUI dataGrid列较多时无数据显示不全的问题 在使用EasyUI框架进行前端开发的过程中，可能会遇到dataGrid组件在数据为空时列显示不完整的问题。这不仅影响用户体验，也降低了系统的可用性。本文将详细...
EasyUI Datagrid是一款基于jQuery的前端数据展示组件，它提供了丰富的功能，如表格布局、数据分页、排序、过滤等，常用于Web应用的数据展示。在本项目中，"easyui datagrid 分页查询样例"是利用EasyUI Datagrid与...
在IT领域，尤其是在Web开发中，EasyUI是一个广泛使用的JavaScript框架，它基于jQuery，提供了丰富的UI组件，如Datagrid，用于构建数据展示和管理的表格。在本篇中，我们将深入探讨如何在EasyUI的Datagrid中实现行...
在IT领域，EasyUI是一个基于jQuery的前端框架，它提供了丰富的UI组件，如datagrid，用于构建用户界面。本文将深入探讨如何使用EasyUI datagrid实现多条件筛选功能，特别是支持可复选的筛选条件，类似于淘宝网站上的...
easyUI datagrid 行上移，下移，置顶，置底的方法
在IT领域，EasyUI Datagrid是一款基于jQuery的前端数据展示组件，它提供了丰富的表格功能，如排序、分页、过滤等。"EasyUI Datagrid 导出到Excel"这一主题涉及的是如何将EasyUI Datagrid中的数据显示在Excel表格中，...