在easyui中展开DataGrid的行

在easyui中展开DataGrid的行，显示明细数据

PHP Ajax json 框架 Cache

easyui中的DataGrid可以切换不同的视图，当使用detailview时，可以让用户展开行以显示该行的详细信息。行的明细信息可以通过AJAX的方式进行加载。

 

 

使用detailview时，首先建立表格基本框架：

Html代码  

1. <table id="dg" style="width:500px;height:250px" url="data/datagrid_data.json" title="DataGrid - Expand Row" singleselect="true" fitcolumns="true">    
2.     <thead>    
3.         <tr>    
4.             <th field="itemid" width="60">Item ID</th>    
5.             <th field="productid" width="80">Product ID</th>    
6.             <th field="listprice" align="right" width="70">List Price</th>    
7.             <th field="unitcost" align="right" width="70">Unit Cost</th>    
8.             <th field="status" align="center" width="50">Status</th>    
9.         </tr>    
10.     </thead>    
11. </table>   

表格的定义可以在table标签中进行，所以不用再编写JS代码。

 

接着，应用detailview并定义如何展开加载明细内容：

Js代码  

1. $('#dg').datagrid({    
2.     view: detailview,    
3.     detailFormatter:function(index,row){    
4.         return '<div id="ddv-' + index + '" style="padding:5px 0"></div>';    
5.     },    
6.     onExpandRow: function(index,row){    
7.         $('#ddv-'+index).panel({    
8.             border:false,    
9.             cache:false,    
10.             href:'datagrid21_getdetail.php?itemid='+row.itemid,    
11.             onLoad:function(){    
12.                 $('#dg').datagrid('fixDetailRowHeight',index);    
13.             }    
14.         });    
15.         $('#dg').datagrid('fixDetailRowHeight',index);    
16.     }    
17. });    

在展开行时再动态通过AJAX的方式加载行的明细信息，明细信息的内容及布局可以是任意的，如下所示：

Php代码  

1. <table class="dv-table" border="0" style="width:100%;">    
2.     <tr>    
3.         <td rowspan="3" style="width:60px">    
4.             <?php    
5.                 echo "<img src=\"images/$itemid.gif\" style=\"height:50px\"/>";    
6.             ?>    
7.         </td>    
8.         <td class="dv-label">Item ID: </td>    
9.         <td><?php echo $item['itemid'];?></td>    
10.         <td class="dv-label">Product ID:</td>    
11.         <td><?php echo $item['productid'];?></td>    
12.     </tr>    
13.     <tr>    
14.         <td class="dv-label">List Price: </td>    
15.         <td><?php echo $item['listprice'];?></td>    
16.         <td class="dv-label">Unit Cost:</td>    
17.         <td><?php echo $item['unitcost'];?></td>    
18.     </tr>    
19.     <tr>    
20.         <td class="dv-label">Attribute: </td>    
21.         <td colspan="3"><?php echo $item['attr1'];?></td>    
22.     </tr>    
23. </table>    

 

更详细的使用及演示可以参考：http://www.jeasyui.com/tutorial/datagrid/datagrid21.php