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的小店
-------------------------------------------------------------------------