跟我一起玩轉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] 
                         });
                    });

 

      好了，大功告成。給大家解決問題的一個思路，第一次寫，文采不佳，還請各位博友諒解，多多支持。如有問題，還望批評指教。呵呵....