Ext.NET之動態綁定GridPanel

經常會有朋友問如何動態綁定GridPanel，由於一直很忙，這次索性發帖來統一回答。

使用過Ext.NET的都知道，Ext.NET中的控件GridPanel很強大，也很好用，可以實現各種功能，但是相比GridView，比較欠缺的是，GridPanel無法自動綁定列與數據。

在使用GridView時，我們可以將DataTable、List等綁定到GridView並自動生成列顯示，但是GridPanel是不具備這個功能的。因此在某些需要動態綁定數據的地方，很多朋友都遇到麻煩——比如某些高級查詢情景，用戶可以選擇顯示的列名並輸入每列的篩選數據。簡單的方法是引發頁面回傳，但是這樣會導致頁面刷新，用戶體驗很差。

那么Ext.NET的GridPanel可以實現這個功能嗎？答案顯然是可以的。

首先看下面這個示例，如圖：

從圖中可以看出，每次單擊按鈕時，列的數量、列名、行數都不同，而且是ajax刷新的。那么這是如何做到的呢？關鍵代碼如下：

/// <summary>
        /// 生成字段和列，並綁定數據源
        /// </summary>
        /// <param name="_rptData"></param>
        /// <param name="_gp"></param>
        /// <param name="_store"></param>
        private void BindData(DataTable _rptData, GridPanel _gp, Store _store)
        {
            //清除舊數據與記錄集
            _store.Reader.Clear();
            _gp.SelectionModel.Clear();
            _gp.ColumnModel.Columns.Clear();
            //_store.Model.Clear();
            var _jsonReader = new JsonReader();
            foreach (DataColumn _dataColumn in _rptData.Columns)
            {
                //創建字段
                _jsonReader.Fields.Add(new RecordField(_dataColumn.ColumnName));
                //創建列
                var _column = new Column
                {
                    Header = Server.HtmlEncode(_dataColumn.ColumnName),
                    DataIndex = _dataColumn.ColumnName,
                };
                _gp.ColumnModel.Columns.Add(_column);
            }
            _store.Reader.Add(_jsonReader);
            _store.DataSource = _rptData.DefaultView;
            _store.DataBind();
            // 重繪【必須調用】
            _gp.Render();
        }

上面代碼首先清空了數據、記錄集、選擇項、列模型，然后創建了JSON讀取器，動態創建了列與字段，再綁定到記錄集，最后重繪GridPanel。上面代碼只是一個很粗淺的編寫，用於實現動態綁定GridPanel。在實際應用中，隨着業務邏輯的復雜性，你可能要做很多的判斷並且做相應的處理，比如根據數據類型生成相應的列類型，或者生成編輯字段等等，這就需要讀者自己去完成了。

接下來每次都調用這個方法來綁定數據即可，比如：

protected void BindData_Click(object sender, DirectEventArgs e)
{
    var rowCount = new Random().Next(10, 20);
    var colCount = new Random().Next(20, 40);
    DataTable dt = new DataTable();
    for (int i = 0; i < rowCount; i++)
    {
        var dr = dt.NewRow();
        for (int j = 0; j < colCount; j++)
        {
            if (i == 0)
            {
                var col = new Random(j).Next(1, 100000).ToString();
                if (!dt.Columns.Contains(col))
                    dt.Columns.Add(col);
            }
            dr[j] = new Random((i + 1) * (j + 2)).Next(1, 100000);
        }
        dt.Rows.Add(dr);
    }
    BindData(dt, gpRPTData, Store1);
}

上面這段代碼是生成隨機數據進行綁定的。綁定的代碼調用的是BindData方法。

頁面代碼如下：

<form id="form1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    <div>
        <ext:Viewport runat="server" Layout="FitLayout">
            <Items>
                <ext:GridPanel ID="gpRPTData" AutoScroll="true" Layout="Fit" TrackMouseOver="true"
                    runat="server" ColumnLines="true" StripeRows="true" Header="false" Title="數據報表">
                    <Store>
                        <ext:Store ID="Store1" ShowWarningOnFailure="false" AutoLoad="true" runat="server" />
                    </Store>
                    <LoadMask ShowMask="true" />
                    <ColumnModel ID="ctl120" />
                    <TopBar>
                        <ext:Toolbar runat="server" ID="tbShow" IDMode="Static">
                            <Items>
                                <ext:Button runat="server" Text="加載數據" Flat="false" ID="Button1" Icon="Accept">
                                    <DirectEvents>
                                        <Click OnEvent="BindData_Click">
                                            <EventMask ShowMask="true" Msg="正在生成數據，請稍后... ..." />
                                        </Click>
                                    </DirectEvents>
                                </ext:Button>
                            </Items>
                        </ext:Toolbar>
                    </TopBar>
                    <%--<Listeners>
                <CellClick Fn="cellclick" />
            </Listeners>--%>
                    <BottomBar>
                        <ext:PagingToolbar ID="PagingToolbar1" runat="server" PageSize="50">
                            <Items>
                                <ext:Label ID="Label1" runat="server" Text="分頁數:" />
                                <ext:ToolbarSpacer ID="ToolbarSpacer1" runat="server" Width="10" />
                                <ext:ComboBox ID="ComboBox1" runat="server" Width="80">
                                    <Items>
                                        <ext:ListItem Text="30" />
                                        <ext:ListItem Text="50" />
                                        <ext:ListItem Text="100" />
                                    </Items>
                                    <SelectedItem Value="50" />
                                    <Listeners>
                                        <Select Handler="#{PagingToolbar1}.pageSize = parseInt(this.getValue()); #{PagingToolbar1}.doLoad();" />
                                    </Listeners>
                                </ext:ComboBox>
                            </Items>
                        </ext:PagingToolbar>
                    </BottomBar>
                </ext:GridPanel>
            </Items>
        </ext:Viewport>
    </div>
    </form>

最后，需要Demo的朋友請點此下載。

很久沒有用Ext.NET，也許這是最后一次發表這方面的博客吧。大家如果碰到Ext.NET方面的問題，其實大可在官方論壇發帖求助，先關問題也可以在老外論壇搜索。國內這方面的資料還是相對欠缺的。

-------------------------------------------------------------------------

.net交流1群：85318032

.net交流2群：18362376

個人網店：CodeLove1314的小店

-------------------------------------------------------------------------