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

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

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

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

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

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

  var data=r.json[3];

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

posted @ 2014-07-22 10:31  郑文亮  阅读(7795)  评论(1)  编辑  收藏  举报