[转载]Create subgrid with master datagrid - jQuery EasyUI

baacloud免费翻墙vpn注册使用

[转载]Create subgrid with master datagrid – jQuery EasyUI.

Use the detail view of datagrid, users can expand a row to show additional details. As any content can be loaded as the row details, the subgrid can be dynamically loaded also. This tutorial will show you how to create a subgrid with master datagrid.

View Demo

Step 1: Create Master DataGrid

  1. <table id=“dg” style=“width:700px;height:250px” url=“datagrid22_getdata.php” title=“DataGrid – SubGrid” singleselect=“true” fitcolumns=“true”>
  2. <thead>
  3. <tr>
  4. <th field=“itemid” width=“80”>Item ID</th>
  5. <th field=“productid” width=“100”>Product ID</th>
  6. <th field=“listprice” align=“right” width=“80”>List Price</th>
  7. <th field=“unitcost” align=“right” width=“80”>Unit Cost</th>
  8. <th field=“attr1” width=“220”>Attribute</th>
  9. <th field=“status” align=“center” width=“60”>Status</th>
  10. </tr>
  11. </thead>
  12. </table>

Step 2: Set Detail View to show subgrid

To use the detail view, remember to include the view script file to your page header.

  1. <script type=“text/JavaScript src=“http://www.jeasyui.com/easyui/datagrid-detailview.js”></script>
  1. $(‘#dg’).datagrid({
  2. view: detailview,
  3. detailFormatter:function(index,row){
  4. return ‘<div style=”padding:2px”><table id=”ddv-‘ + index + ‘”></table></div>’;
  5. },
  6. onExpandRow: function(index,row){
  7. $(‘#ddv-‘+index).datagrid({
  8. url:‘datagrid22_getdetail.php?itemid=’+row.itemid,
  9. fitColumns:true,
  10. singleSelect:true,
  11. rownumbers:true,
  12. loadMsg:,
  13. height:‘auto’,
  14. columns:[[
  15. {field:‘orderid’,title:‘Order ID’,width:100},
  16. {field:‘quantity’,title:‘Quantity’,width:100},
  17. {field:‘unitprice’,title:‘Unit Price’,width:100}
  18. ]],
  19. onResize:function(){
  20. $(‘#dg’).datagrid(‘fixDetailRowHeight’,index);
  21. },
  22. onLoadSuccess:function(){
  23. setTimeout(function(){
  24. $(‘#dg’).datagrid(‘fixDetailRowHeight’,index);
  25. },0);
  26. }
  27. });
  28. $(‘#dg’).datagrid(‘fixDetailRowHeight’,index);
  29. }
  30. });

When users click expand button(‘+’), the ‘onExpandRow’ event will be triggered. We create a new subgrid with tree columns. Remember to call ‘fixDetailRowHeight’ method for master datagrid when subgrid load data successfully or resize.

Step 3: The Server Code

datagrid22_getdata.php
  1. $result = array();
  2. include ‘conn.php’;
  3. $rs = mySQL_query(“select * from item where itemid in (select itemid from lineitem)”);
  4. $items = array();
  5. while($row = mySQL_fetch_object($rs)){
  6. array_push($items, $row);
  7. }
  8. echo json_encode($items);
datagrid22_getdetail.php
  1. $itemid = $_REQUEST[‘itemid’];
  2. include ‘conn.php’;
  3. $rs = mysql_query(“select * from lineitem where itemid=‘$itemid’“);
  4. $items = array();
  5. while($row = mysql_fetch_object($rs)){
  6. array_push($items, $row);
  7. }
  8. echo json_encode($items);

Download the EasyUI example:

easyui-datagrid-demo.zip
赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏