首页 > 代码库 > easyUI 展开DataGrid里面的行显示详细信息

easyUI 展开DataGrid里面的行显示详细信息

2024-08-13 21:34:19   216人阅读

http://blog.csdn.net/yanghongchang_/article/details/7854156原著

datagrid 可以改变它的view(视图)去显示不同的效果.使用详细视图,datagrid可以显示展开按钮("+" 或者 "-")在数据行的左边,用户可以展开一个行去显示一个附加的详细信息.

技术分享

查看 Demo

 

步骤 1: 创建 DataGrid

[html] view plain copy
 
  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" width="50" align="center">Status</th>    
  9.         </tr>    
  10.     </thead>    
  11. </table>    

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

使用详细视图,切记:引入视图script文件在你的页面的头部.

 

 

[html] view plain copy
 
  1. <script type="text/javascript" src=http://www.mamicode.com/"http://www.jeasyui.com/easyui/datagrid-detailview.js"></script>    
[javascript] view plain copy
 
  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. });    

我们定义detailFormatter函数告诉datagrid 如何渲染详细视图,在这种情况下,我们返回一个简单的 ‘<div>‘元素,它将充当最为一个详细内容的容器,

 

注意:详细信息为空,当用户点击展开按钮(‘+‘),onExpandRow事件将被触发,所以我们可以写一些代码去加载ajax详细内容,最后我们调用fixDetailRowHeight方法去固定行高度,当详细内容加载之后.

 

步骤 3: 服务器端代码

 

datagrid21_getdetail.php

 

[php] view plain copy
 
  1. <?php    
  2. $itemid = $_REQUEST[‘itemid‘];    
  3.     
  4. $content = file_get_contents(‘data/datagrid_data.json‘);    
  5. $data = json_decode($content,true);    
  6. foreach($data[‘rows‘] as $item){    
  7.     if ($item[‘itemid‘] == $itemid){    
  8.         break;    
  9.     }    
  10. }    
  11.     
  12. ?>    
  13.     
  14. <table class="dv-table" border="0" style="width:100%;">    
  15.     <tr>    
  16.         <td rowspan="3" style="width:60px">    
  17.             <?php    
  18.                 echo "<img src=http://www.mamicode.com/"images/$itemid.gif\" style=\"height:50px\"/>";    
  19.             ?>    
  20.         </td>    
  21.         <td class="dv-label">Item ID: </td>    
  22.         <td><?php echo $item[‘itemid‘];?></td>    
  23.         <td class="dv-label">Product ID:</td>    
  24.         <td><?php echo $item[‘productid‘];?></td>    
  25.     </tr>    
  26.     <tr>    
  27.         <td class="dv-label">List Price: </td>    
  28.         <td><?php echo $item[‘listprice‘];?></td>    
  29.         <td class="dv-label">Unit Cost:</td>    
  30.         <td><?php echo $item[‘unitcost‘];?></td>    
  31.     </tr>    
  32.     <tr>    
  33.         <td class="dv-label">Attribute: </td>    
  34.         <td colspan="3"><?php echo $item[‘attr1‘];?></td>    
  35.     </tr>    
  36. </table>    

easyUI 展开DataGrid里面的行显示详细信息


联系
我们