先看效果：

代码如下：

  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="Lib/ExtJs/2_2/resources/css/ext-all.css" />
  9. <script type="text/javascript" src="Lib/ExtJs/2_2/adapter/ext/ext-base.js"></script>
  10. <script type="text/javascript" src="Lib/ExtJs/2_2/ext-all-debug.js"></script>
  11. <script type="text/javascript" src="Lib/ExtJs/2_2/source/locale/ext-lang-zh_CN.js"></script>
  12. <script type="text/javascript" src="Lib/ExtJs/plus/RowExpander.js"></script>
  13. <script type="text/javascript">
  14. Ext.onReady(function(){
  15. var testData=[
  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=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. //var sm=new Ext.grid.CheckboxSelectionModel({singleSelect:true});
  60. var cm = new Ext.grid.ColumnModel([
  61. expander
  62. ,{header: "姓名",dataIndex: 'name',width: 50,hideable:false,sortable:false}
  63. ,{header: "性别",dataIndex: 'sex',width: 130,hideable:false,sortable:false,resizable:true}
  64. ,{header: "年龄",dataIndex: 'age',width: 130,hideable:false,sortable:false,resizable:true}
  65. ]);
  66. var grid = new Ext.grid.GridPanel(
  67. {
  68. id:'testgrid',
  69. store:storeTest,
  70. cm:cm,
  71. renderTo:"grid1",
  72. width:780,
  73. autoHeight:false,
  74. height:300,
  75. listeners:{},
  76. plugins:[expander]
  77. }
  78. );
  79. });
  80. </script>
  81. <style type="text/css">
  82. #div2 h2 {
  83. font-weight:200;
  84. font-size:12px;
  85. }
  86. .c1 h2 {
  87. font-weight:200;
  88. }
  89. </style>
  90. </head>
  91. <body>
  92. <div id="grid1">
  93. </div>
  94. <div id="grid2">
  95. </div>
  96. </body>
  97. </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事件中添加嵌套表格.

ExtJS中实现嵌套表格的更多相关文章

  1. Ext3.4-EXT之嵌套表格的实现

    其中使用到的"RowExpander.js"为extjs官方示例中自带的. 实现这个嵌套表格要注意两点技巧: 1 提供给外层表格的dataStore的数据源以嵌套数组的形式表示细节 ...

  2. C# 绘制PDF嵌套表格

    嵌套表格,即在一张表格中的特定单元格中再插入一个或者多个表格,使用嵌套表格的优点在于能够让内容的布局更加合理,同时也方便程序套用.下面的示例中,将介绍如何通过C#编程来演示如何插入嵌套表格到PDF文档 ...

  3. Java 操作Word表格——创建嵌套表格、添加/复制表格行或列、设置表格是否禁止跨页断行

    本文将对如何在Java程序中操作Word表格作进一步介绍.操作要点包括 如何在Word中创建嵌套表格. 对已有表格添加行或者列 复制已有表格中的指定行或者列 对跨页的表格可设置是否禁止跨页断行 创建表 ...

  4. 跟我一起玩转FineUI之嵌套表格

    最近一直在研究FineUI(http://www.fineui.com/),那么什么是FineUI呢,FineUI是基于 ExtJS 的专业 ASP.NET 控件库.创建 No JavaScript, ...

  5. EXTJS中grid的数据特殊显示，不同窗口的数据传递

    //EXTJS中grid的数据特殊显示renderer : function(value, metaData, record, rowIndex, colIndex, store, view) { v ...

  6. 转： ExtJS中xtype一览

    转: ExtJS中xtype一览 基本组件: xtype Class 描述 button Ext.Button 按钮 splitbutton Ext.SplitButton 带下拉菜单的按钮 cycl ...

  7. 小细节--Extjs中，renderTo 和applyTo的区别

    说到web前端框架,extjs绝对算是非常优秀的一个. extjs中,两个方法很像,renderTo和applyTo,我在网上也搜了很多相关的内容,在这里举例为大家进行区分,欢迎大家交流指正. 主要区 ...

  8. 【JS中循环嵌套常见的六大经典例题+六大图形题，你知道哪几个？】

    首先,了解一下循环嵌套的特点:外层循环转一次,内层循环转一圈. 在上一篇随笔中详细介绍了JS中的分支结构和循环结构,我们来简单的回顾一下For循环结构: 1.for循环有三个表达式,分别为: ①定义循 ...

  9. kotlin中的嵌套类与内部类

    Java中的内部类和静态内部类在Java中内部类简言之就是在一个类的内部定义的另一个类.当然在如果这个内部类被static修饰符修饰,那就是一个静态内部类.关于内部类 和静态内部类除了修饰符的区别之外 ...

随机推荐

  1. SPOJ JZPLIT

    Problem SPOJ Solution 考虑任意一个作为矩阵四个角的位置 \(r_i \oplus c_j\oplus a_{i,j}\oplus x_{i,j}=0\) \(r_i \oplus ...

  2. HOJ 1108

    题目链接:HOJ-1108 题意为给定N和M,找出最小的K,使得K个N组成的数能被M整除.比如对于n=2,m=11,则k=2. 思路是抽屉原理,K个N组成的数modM的值最多只有M个. 具体看代码: ...

  3. 004_Gradle 笔记——Java构建入门

    Gradle是一个通用的构建工具,通过它的构建脚本你可以构建任何你想要实现的东西,不过前提是你需要先写好构建脚本的代码.而大部分的项目,它 们的构建流程基本是一样的,我们不必为每一个工程都编写它的构建 ...

  4. android 动态改变控件位置和大小 .

    动态改变控件位置的方法: setPadding()的方法更改布局位置. 如我要把Imageview下移200px:             ImageView.setPadding( ImageVie ...

  5. Linux文档时间戳查看和修改——stat

    查看文件时间戳命令:stat awk.txtFile: `awk.txt'Size: 20  Blocks: 8  IO Block: 4096  regular fileDevice: 801h/2 ...

  6. before_request after_request

    Flask我们已经学习很多基础知识了,现在有一个问题 我们现在有一个 Flask 程序其中有3个路由和视图函数,如下: from flask import Flask app = Flask(__na ...

  7. Deepin 2015 安装后找不到win10 启动选项的解决办法

    #sudo vi /boot/grub/grub.cfg 在export linux_gfx_mode后面加 menuentry "Windows 10 (loader)" --c ...

  8. poj3414 Pots（BFS）

    题目链接 http://poj.org/problem?id=3414 题意 有两个杯子,容量分别为A升,B升,可以向杯子里倒满水,将杯子里的水倒空,将一个杯子里的水倒到另一个杯子里,求怎样倒才能使其 ...

  9. 洛谷P3292 [SCOI2016] 幸运数字 [线性基，倍增]

    题目传送门 幸运数字 题目描述 A 国共有 n 座城市,这些城市由 n-1 条道路相连,使得任意两座城市可以互达,且路径唯一.每座城市都有一个幸运数字,以纪念碑的形式矗立在这座城市的正中心,作为城市的 ...

  10. Python函数系列-Random

    import random i = int(input('输入第一个数:')) j = int(input('输入第二个数:')) l = int(input('输入需要产生的个数:')) k=0 w ...