数据表格中展开行显示详情

使用教程 » 数据表格中展开行显示详情

datagrid可以更改视图以显示不同的效果。 使用detail视图，datagrid可以在数据行左侧显示展开按钮(“+”或“-”)。 用户可以展开一行以显示其他详细信息。

步骤一: 创建数据表格

<table id="dg" style="width:500px;height:250px" url="/jeasyui/datagrid8_getdata.php" pagination="true" sortName="itemid" sortOrder="desc" title="DataGrid - Expand Row" singleSelect="true" fitColumns="true"> <thead> <tr> <th field="itemid" width="60">Item ID</th> <th field="productid" width="80">Product ID</th> <th field="listprice" align="right" width="70">List Price</th> <th field="unitcost" align="right" width="70">Unit Cost</th> <th field="status" width="50" align="center">Status</th> </tr> </thead> </table>

步骤二: 为DataGrid设置详细视图

要使用detail视图，请记住将视图脚本文件包含到页眉中.

<script type="text/javascript" src="http://www.jeasyui.com/easyui/datagrid-detailview.js"></script> $('#dg').datagrid({ view: detailview, detailFormatter:function(index,row){ return '<div class="ddv" style="padding:5px 0"></div>'; }, onExpandRow: function(index,row){ var ddv = $(this).datagrid('getRowDetail',index).find('div.ddv'); ddv.panel({ border:false, cache:false, href:'datagrid21_getdetail.php?itemid='+row.itemid, onLoad:function(){ $('#dg').datagrid('fixDetailRowHeight',index); } }); $('#dg').datagrid('fixDetailRowHeight',index); } });

我们定义了'detailFormatter'函数来告诉datagrid如何呈现细节视图。 在本例中，我们返回一个简单的div元素，它将充当详细内容容器。 请注意，详细内容是空的。当用户单击expand按钮('+')时，将触发'onExpandRow'事件。 因此，我们可以编写一些代码来加载ajax细节内容。 最后，我们调用'fixDetailRowHeight'方法来固定加载细节内容时的行高度。

步骤三:服务器代码

<?php include_once 'conn.php'; $itemid = mysql_real_escape_string($_REQUEST['itemid']); $rs = mysql_query("select * from item where itemid='$itemid'"); $item = mysql_fetch_array($rs); ?> <table class="dv-table" border="0" style="width:100%;"> <tr> <td rowspan="3" style="width:60px"> <?php $aa = explode('-',$itemid); $serno = $aa[1]; $img = "images/shirt$serno.gif"; echo "<img src=\"$img\" style=\"width:60px;margin-right:20px\" />"; ?> </td> <td class="dv-label">Item ID: </td> <td><?php echo $item['itemid'];?></td> <td class="dv-label">Product ID:</td> <td><?php echo $item['productid'];?></td> </tr> <tr> <td class="dv-label">List Price: </td> <td><?php echo $item['listprice'];?></td> <td class="dv-label">Unit Cost:</td> <td><?php echo $item['unitcost'];?></td> </tr> <tr> <td class="dv-label">Attribute: </td> <td colspan="3"><?php echo $item['attr1'];?></td> </tr> </table>

下载 EasyUI 实例: