首页 > 代码库 > ExtJS中实现嵌套表格

ExtJS中实现嵌套表格

先看效果:

 

 

 

代码如下:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>test</title>
  6. <script type="text/javascript">
  7. </script>
  8. <link rel="stylesheet" type="text/css" href=http://www.mamicode.com/"Lib/ExtJs/2_2/resources/css/ext-all.css" />
  9. <script type="text/javascript" src=http://www.mamicode.com/"Lib/ExtJs/2_2/adapter/ext/ext-base.js"></script>
  10. <script type="text/javascript" src=http://www.mamicode.com/"Lib/ExtJs/2_2/ext-all-debug.js"></script>
  11. <script type="text/javascript" src=http://www.mamicode.com/"Lib/ExtJs/2_2/source/locale/ext-lang-zh_CN.js"></script>
  12. <script type="text/javascript" src=http://www.mamicode.com/"Lib/ExtJs/plus/RowExpander.js"></script>
  13. <script type="text/javascript">
  14. Ext.onReady(function(){
  15. var testData=http://www.mamicode.com/[
  16.    ["lugreen","男",26,[["数学",100],["语文",150]]]
  17.    ,["lisi","男",25,[["数学",100],["语文",150]]]
  18.    ,["zhangsan","男",27,[["数学",120],["语文",158]]]   
  19. ];
  20. //
  21. storeTest= new Ext.data.SimpleStore({
  22.     fields: ["name","sex","age","grade"]
  23.     ,data: testData
  24. });
  25. var expander = new Ext.grid.RowExpander({
  26.         tpl : new Ext.XTemplate(
  27.         ‘<div class="detailData">‘,
  28.         ‘‘,
  29.         ‘</div>‘
  30.         )
  31.         });
  32. expander.on("expand",function(expander,r,body,rowIndex){
  33.   //查找 grid 
  34.   window.testEle=body;
  35.   //alert(body.id);
  36.   if (Ext.DomQuery.select("div.x-panel-bwrap",body).length==0){
  37.      //alert("a");
  38.      var data=http://www.mamicode.com/r.json[3];
  39.      var store=new Ext.data.SimpleStore({
  40.            fields: ["class","degrade"]
  41.            ,data:data
  42.          });
  43.      var cm = new Ext.grid.ColumnModel([
  44.      {header: "科目",dataIndex: ‘class‘,width: 130,hideable:false,sortable:false,resizable:true}
  45.      ,{header: "成绩",dataIndex: ‘degrade‘,width: 130,hideable:false,sortable:false,resizable:true}
  46.       ]);
  47.       Ext.DomQuery.select("div.detailData")[0];
  48.   var grid = new Ext.grid.GridPanel(
  49.   {
  50.     store:store,
  51.     cm:cm,
  52.     renderTo:Ext.DomQuery.select("div.detailData",body)[0],
  53.     autoWidth:true,
  54.     autoHeight:true
  55.     }
  56.   );
  57.   
  58.   }
  59. });
  60. //var sm=new Ext.grid.CheckboxSelectionModel({singleSelect:true});
  61.     var cm = new Ext.grid.ColumnModel([
  62.     expander
  63.     ,{header: "姓名",dataIndex: ‘name‘,width: 50,hideable:false,sortable:false}
  64.     ,{header: "性别",dataIndex: ‘sex‘,width: 130,hideable:false,sortable:false,resizable:true}
  65.     ,{header: "年龄",dataIndex: ‘age‘,width: 130,hideable:false,sortable:false,resizable:true}
  66.     ]);
  67.   var grid = new Ext.grid.GridPanel(
  68.   {
  69.     id:‘testgrid‘,
  70.     store:storeTest,
  71.     cm:cm,
  72.     renderTo:"grid1",
  73.     width:780,
  74.     autoHeight:false,
  75.     height:300,
  76.     listeners:{},
  77.      plugins:[expander]
  78.     }
  79.     );
  80. });
  81. </script>
  82. <style type="text/css">
  83. #div2 h2 {
  84.     font-weight:200;
  85.     font-size:12px;
  86. }
  87. .c1 h2 {
  88.     font-weight:200;
  89. }
  90. </style>
  91. </head>
  92. <body>
  93. <div id="grid1">
  94.   
  95. </div>
  96. <div id="grid2">
  97.   
  98. </div>
  99. </body>
  100. </html>

其中使用到的"RowExpander.js"为extjs官方示例中自带的。

实现这个嵌套表格要注意两点技巧:

1 提供给外层表格的dataStore的数据源以嵌套数组的形式表示细节区的数据,如下面的黑体所示。

  
  1. var testData=http://www.mamicode.com/[
  2.    ["lugreen","男",26,[["数学",100],["语文",150]]]
  3.    ,["lisi","男",25,[["数学",100],["语文",150]]]
  4.    ,["zhangsan","男",27,[["数学",120],["语文",158]]]   
  5. ];

使用数组集中record对象的json属性来获取以细节区数据

  var data=http://www.mamicode.com/r.json[3];

2 在rowExpander的 expand事件中添加嵌套表格.