(转)FineUI之嵌套表格

游泳的鱼

转坛友的一篇关于Grid嵌套Grid的做法，使用了模板列结合ExtJs生成Grid

感谢坛友，原文请看坛友博客：
http://www.cnblogs.com/fendou1986/

1、插入模板列，代码如下。

1. <x:TemplateField ColumnID="expander" RenderAsRowExpander="true">
   
2.                     <ItemTemplate>
   
3.                           <div class="detailData"></div>
   
4.                     </ItemTemplate>
   
5.                     </x:TemplateField>

复制代码

2、给这个模板列，绑定一个事件

1. <p> // 获取Grid的ID
   
2.    var gridClientID = '<%= Grid1.ClientID %>';
   
3.    var grid = X(gridClientID);
   
4.    // 之后点击‘+’号添加希望显示的内容，即调用.on定义的expand事件
   
5.    grid.plugins[0].on("expand", function (expander, r, body, rowIndex) {
   
6. //[第三步]...   </p><p> // 构造新的子panel
   
7.                  this._rowPanel = new xg.GridPanel({
   
8.                      id: 'testgrid',
   
9.                      store: new Ext.data.Store
   
10.                         ({
    
11.                             //autoLoad: {
    
12.                             //    params: {
    
13.                             // 获取当前行的ID
    
14.                             //        id: grid.x_state.X_Rows.DataKeys[rowIndex]
    
15.                             //    }
    
16.                             //},
    
17. //读取数据源用json方法(三种方法1.读取json用JsonReader,2读取数组使用ArrayReader3.读取XML用XmlReader)
    
18.                             reader: new Ext.data.JsonReader
    
19.                             ({
    
20.                                 root: "data",
    
21.                                 //从数据库中读取的总记录数
    
22.                                 totalProperty: 'totalCount',
    
23.                                 //要读取出来的字段
    
24.                                 fields:
    
25.                             [
    
26.                                 'ID', Name, Remark
    
27.                             ]
    
28.                             }),
    
29.                             //获取数据源(该方法返回一个json格式的数据源)
    
30.                             proxy: new Ext.data.HttpProxy
    
31.                             ({
    
32.                                 url: '../json/TestHandler.ashx?test=1'
    
33.                             })
    
34.                         }),
    
35.                      //定义GridPanel的列名称
    
36.                      cm: new Ext.grid.ColumnModel([
    
37.                      //  new Ext.grid.RowNumberer(
    
38.                      //  { header: "编号", width: 80, align: "center" }), //添加一个编号
    
39.                         //  new Ext.grid.CheckboxSelectionModel(), //增加 CheckBox多选框列
    
40.                          //header列名称，dateIndex对应数据库字段名称,sortable支持排序
    
41.                         {header: "角色名称", dataIndex: "Name", sortable: true },
    
42.                         { header: "角色备注", dataIndex: "Remark", sortable: true }
    
43.                         ]),
    
44.                      viewConfig: {
    
45.                          forceFit: true
    
46.                      },
    
47.                      stateful: true,
    
48.                      sm: new Ext.grid.RowSelectionModel({ singleSelect: false }),
    
49.                      autoExpandColumn: true,
    
50.                      enableColumnHide: true,
    
51.                      enableColumnMove: true,
    
52.                      iconCls: 'icon-grid',
    
53.                      viewConfig: {
    
54.                          forceFit: true,
    
55.                          emptyText: '没有满足条件的条目'
    
56.                      },
    
57.                      view: this._view,
    
58.                      autoWidth: true,
    
59.                      autoHeight: true,
    
60.                      //最重要的一行，跟上面定义的detailData呼应，将内容渲染到定义了class的当前层。
    
61.                     renderTo: Ext.DomQuery.select("div.detailData", body)[0]
    
62.                          });
    
63.                     });</p>

复制代码

奋斗~

1.   listeners: {
   
2.                          mouseover: function (e) {
   
3.                              e.stopEvent();
   
4.                          },
   
5.                          rowmousedown: function (g, r, e) {
   
6.                              e.stopEvent();
   
7.                          }
   
8.                      },

复制代码

再补充一点：上面的代码一定要追加，要不然主表格和子表格选择的时候，会有冲突，如有问题在联系我吧；552847957@qq.com，效果图如下：

sanshi

给点截图效果，看着直观

奋斗~

sanshi 发表于 2013-9-4 09:59
给点截图效果，看着直观

老大，已经截图了....

猪八戒

奋斗~ 发表于 2013-9-4 10:13
老大，已经截图了....

能不能给我发一份示例代码啊。再次感谢。还有个问题表格的绑定是根据Grid行的Key吗？
邮箱：freebirdwww@163.com

奋斗~

是根据grid当前行的key
     // 获取当前行的ID
     //  id: grid.x_state.X_Rows.DataKeys[rowIndex]

yygy

多谢分享，作个记号

yygy

能上传个简单示例？在哪绑定一个事件，怎样获取数据源(该方法返回一个json格式的数据源)。初学

隨風往事

希望能上传示例。或者增加到在线示例中

仰望星空耶

grid.plugins[0].on("expand", function (expander, r, body, rowIndex)这里为何总是报Cannot read property 'plugins'