• 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', 130,hideable:false,sortable:false,resizable:true}
    49.      ,{header: "成绩",dataIndex: 'degrade', 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', 50,hideable:false,sortable:false}
    69.     ,{header: "性别",dataIndex: 'sex', 130,hideable:false,sortable:false,resizable:true}
    70.     ,{header: "年龄",dataIndex: 'age', 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.     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事件中添加嵌套表格.
  • 相关阅读:
    TCP带外数据
    ASP.Net Core 返回的json数据，自定义日期格式
    C# 简单的区块链实现
    PowerShell自动部署ASP.NET Core程序到 IIS
    ASP.NET Core依赖注入多个服务实现类
    EF Core 2.0 执行原始查询如何防止SQL注入
    C#7 进入快速迭代道路
    QuartzNet 任务管理系统
    WebApi如何传递参数
    C# 快速高效率复制对象另一种方式 表达式树
  • 原文地址：https://www.cnblogs.com/zhwl/p/3859968.html
Copyright © 2020-2023  润新知