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

     最近一直在研究FineUI（http://www.fineui.com/）,那么什么是FineUI呢，FineUI是基于 ExtJS 的专业 ASP.NET 控件库、创建 No JavaScript，No CSS，No UpdatePanel，No ViewState，No WebServices 的网站应用程序。

     最近看到一些朋友一直在为嵌套表格的功能而着急...,于心不忍啊，于是乎就研究下吧...帮朋友解决一下困难。O(∩_∩)O~、

     在FineUI中，普通的Grid是很容易实现的（看官方示例），那么要是在Grid的再嵌套一个表格的话，就有些难度了。那怎么办呢？

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

                <x:TemplateField ColumnID="expander" RenderAsRowExpander="true">
                    <ItemTemplate>
                          <div class="detailData"></div> 
                    </ItemTemplate>
                    </x:TemplateField>

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

   // 获取Grid的ID 
   var gridClientID = '<%= Grid1.ClientID %>';
   var grid = X(gridClientID);
   // 之后点击‘+’号添加希望显示的内容，即调用.on定义的expand事件
   grid.plugins[0].on("expand", function (expander, r, body, rowIndex) {
    // [第三步]...   }

  3、最为关键的的一步了，就是构造一个子GRID。

                // 构造新的子panel
                 this._rowPanel = new xg.GridPanel({
                     id: 'testgrid',
                     store: new Ext.data.Store
                        ({
                            //autoLoad: {
                            //    params: {
                            // 获取当前行的ID
                            //        id: grid.x_state.X_Rows.DataKeys[rowIndex]
                            //    }
                            //},
//读取数据源用json方法(三种方法1.读取json用JsonReader,2读取数组使用ArrayReader3.读取XML用XmlReader)
                            reader: new Ext.data.JsonReader
                            ({
                                root: "data",
                                //从数据库中读取的总记录数
                                totalProperty: 'totalCount',
                                //要读取出来的字段
                                fields:
                            [
                                'ID', Name, Remark
                            ]
                            }),
                            //获取数据源(该方法返回一个json格式的数据源)
                            proxy: new Ext.data.HttpProxy
                            ({
                                url: '../json/TestHandler.ashx?test=1'
                            })
                        }),
                     //定义GridPanel的列名称
                     cm: new Ext.grid.ColumnModel([
                     //  new Ext.grid.RowNumberer(
                     //  { header: "编号", width: 80, align: "center" }), //添加一个编号
                        //  new Ext.grid.CheckboxSelectionModel(), //增加 CheckBox多选框列
                         //header列名称，dateIndex对应数据库字段名称,sortable支持排序
                        {header: "角色名称", dataIndex: "Name", sortable: true },
                        { header: "角色备注", dataIndex: "Remark", sortable: true }
                        ]),
                     viewConfig: {
                         forceFit: true
                     },
                     stateful: true,
                     sm: new Ext.grid.RowSelectionModel({ singleSelect: false }),
                     autoExpandColumn: true,
                     enableColumnHide: true,
                     enableColumnMove: true,
                     iconCls: 'icon-grid',
                     viewConfig: {
                         forceFit: true,
                         emptyText: '没有满足条件的条目'
                     },
                     view: this._view,
                     autoWidth: true,
                     autoHeight: true,
                     //最重要的一行，跟上面定义的detailData呼应，将内容渲染到定义了class的当前层。
                    renderTo: Ext.DomQuery.select("div.detailData", body)[0] 
                         });
                    });

 

      好了，大功告成。给大家解决问题的一个思路，第一次写，文采不佳，还请各位博友谅解，多多支持。如有问题，还望批评指教。呵呵....